Variable in html code - variables

Question

I'm super new to html
All I need is the code for a field where a User can type his Staff Number and then a button which takes him to a URL that is made up of his Staff Number somewhere in the path.
Eg:
The User enters '123' in the text field and when clicking the 'Submit' button must be taken to this document:
www.mysite.com/Staff123.pdf
Not sure about the syntax but with an example I would be able to edit to suit what I need if I can get the code to create both the text field as well as the button.
Thanks a lot

Answer 1

You need to create a form in html. Basically, a form is a block which let user input some values (text, password, email, date, integer, file, ...) and that send these values, once submitted through a submit button, to a certain file that will process these datas.
A classic example is the login form that you can see on nearly each site you know.
It could be like that:
<form action="processing_script.php" method="post">
<input type="email" name="user_mail" placeholder="Please enter your mail here">
<input type="password" name="user_password" placeholder="Please enter your password here">
<input type="submit" value="Click here to send the form">
</form>
You can see some attributes used in this example, I will describe each of them:
action attribute for form tag: it's the script that will receive and process the values from this form.
method attribute for form tag: it's the way that values will be sended to the destination script. It can be etheir "post" or "get". The post method will send the values through http headers, so it's hidden for users (but it can be seen with tools like Wireshark). The get method will send values through the adress bar like this (this is the url you see once you submitted the form): http://yourWebsite.com/processing_script.php?user_mail=johndoe#liamg.com&user_password=mYp#$$W0rD
type attribute for form tag: it depends on the type of data you want the user to inquire. Your web browser will use this attribute to determine which way he will show the input to the user. For example, user will see a little calendar widget if you wrote type="date". The browser will also do some basic verification on the data type when the user will click the submit button (in fact, the browser will not let someone validate the form if for example the input type is "email" and the value entered by the user is "zertredfgt#" or "erfthrefbgthre", but it will pass if the mail is "johndoe#liamg.com"). Type can be email, text, date, password, file, submit, and some others.
name attribute for input tag: it's the name of the variable that will be used in the destination script to access to the value entered by user in the field of the form.
placeholder attribute for input tag: it's the text shown in the fields when they're still empty. The text is not in black, it's some kind of grey.
The last thing to explain is the :
it's displayed as a button, and the text on it comes from the value attribute.
In your case, I think you only need to use some JavaScript:
Create a JavaScript method that will redirect you to the right pdf url based on what is entered in a text input.
Create a small form, without action or method fields.
Create an input type text (for the staff number) with a good attribute name like this: name="staffNumber".
Create a button (not a submit button) like this:
To redirect to a specific url in JavaScript, you want to read this: How do I redirect to another webpage?
To read the value from an input in JavaScript, you can proceed like that:
...
var staff_number = getElementsByName("staffNumber")[0].value;
...
To create the full url of the right PDF, just use the concatenation operator (it's + in JavaScript), so something like that should work:
...
var base_url = "http://youWebsite.com/Staff";
var file_extension = ".pdf";
var full_url = base_url + staff_number.toString() + file_extension;
...
(the .toString() is a method that ensure it's processed as a string, to concatenate and avoid some strange addition that could occur I guess)
I think you've got everything you need to create exactly what you need.
Please keep us up to date when you've tried !