Retrieving values from a web page
There are two main ways of getting information about the elements on a webpage. These are
- document.getElementById('element');
- document.getElementsByTagName('tagName');
The method getElementsByTagName('tagName'), gets a list of all child elements attached to the nodes with the specified tag name. It may appear to be an array, by it is actually an DOM NodeList object.
For this example lets make the message a little more personal. We will use a text box to get your first name. First modify the Javascript to the code below
Using an HTML form
Add the following lines of HTML code between the <body> tags
<form action="javascript:test()" > <p>Enter your name <INPUT id="myName" type="text" size="20"></p> <p>Select a color for the header <select id="myColor"> <option value="#F80" >Orange</option> <option value="#FF0" >Yellow</option> <option value="#FCC" >Pink</option> <option value="#0F0" >Green</option> <option value="#ACF" >Blue</option> </select> <p>How would you rate your Javascript skills?</p> <input type="radio" name="skill" checked value = "beginner" />Beginner <input type="radio" name="skill" value = "intermediate" />Intermediate <input type="radio" name="skill" value = "advanced" />Advanced <p>Tick the following you consider yourself proficient at</p> <input type="checkbox" value="HTML" />HTML <input type="checkbox" value="XML" />XML <input type="checkbox" value="PHP" />PHP <input type="checkbox" value="CSS" />CSS <input type="checkbox" value="HTML" />XSL <P>What do you like about Javascript?</P> <textarea id="myComment" rows ="2" cols="48"></textarea> <p><input type="submit" value ="Submit" /></p> </form>
In this example we have used an HTML form to get your name. The Javascript function is called by the onclick event when the user clicks the button. In the Javascript a variable has been declared called user and set equal to the value entered in the text box. Notice the ID property of the text box has been called "myName". HTML ID names must be unique within a web page. The code,
document.getElementById("myName").value,
retrieves the tag with id= "myName" tags, and gets the property value. This is how Javascript refers to a tag within a web page. If you have two tags within the same web page with the same ID then the code will fail. This is why ID names must be unique. Notice the dots between the words document.getElementById("myName").value.
Add the Javascript welcome function below to include include the comment. In Javascript the plus (+) signs are used to join (concatenate) text and variables together. Any text between double (or single) quotes is known as a string. The variables, user and userComment must be outside the quotes.
function test()
{
//welcome greeting for new users
var user = document.getElementById("myName").value;
var userComment = document.getElementById("myComment").value;
var myColor = document.getElementById("myColor").value;
var response = "Thank you " + user + " for your comment\n" + userComment;
document.getElementById("myComment").value = response;
}
Enter your name and a comment then press the submit button to test your code.
Note the \n after the word comment in the code. This is a special character used to insert a new line
Using the HTML Select option
For this part of the exercise we'll use the select option to choose a colour for the text between the <H2> tags. The ID property "subject" is used to identify the H2 tag to Javascript.
<p>Select a color for the header <select id="myColor"> <option value="#ACF" >Blue</option> <option value="#F80" >Orange</option> <option value="#FF0" >Yellow</option> <option value="#FCC" >Pink</option> <option value="#0F0" >Green</option> </select></p>
Modify the Javascript function to change the colour of your header. Your Javascript function should now look like this
function test()
{
//welcome greeting for new users
var user = document.getElementById("myName").value;
var userComment = document.getElementById("myComment").value;
var myColor = document.getElementById("myColor").value;
var response = "Thank you " + user + " for your comment\n" + userComment;
//Change the background to color selected
var sbj = document.getElementById("subject");
sbj.style.backgroundColor = myColor;
document.getElementById("myComment").value = response;
}
Note: the format of Javascript backgroundColor differs from the CSS standard. No hyphens are permitted
Adding radio buttons and checkboxes
These are a little more problematical because they are both <input> tags and haven't they been given an id. We need to test which tag we are dealing with and whether it is checked or not. To do this we'll used the code
var skills = document.getElementsByTagName('input');
We now need to know how many tags we are dealing with. To do this we test the length of the skills object. I.e.
var total = skills.length;
Next we will go through each input tag in turn and test its type, either radio or checkbox, and whether it has been checked or not.
Things to note
- response += response is shorthand for (new) response = (old) response + " for your comment\n" + userComment;
- i++ is also shorthand for (new) i = (old) i + 1.
- Javascript differs from the CSS standard of backgroundColor. no hyphens are permitted
- Elements in an array start at index zero and an individual element is specified as arrayName[index]. Note the square brackets.
- Properties (and methods of an object are specified by the dot notation
What happens if the user presses the submit query button more than once?
How would you fix this problem?
| Attachment | Size |
|---|---|
| HTMLForm.htm | 2.48 KB |
