Use the DOM to alter style, text and images on a page
The <form> tag
The form tag is the encompassing object wrapped around all elements of a form. It has several key attributes:
method - possible values include POST and GET. Both send the information as name-value pairs. Get forms append the form information into the url. Post forms send the information behind the scenes, not visible by the user.
action - the page/script that you want the information sent to
Form Element Attributes
Each form element will need BOTH an id and a name attribute. The id will allow the element to be directly accessed through the JavaScript DOM. The name attribute is what is used in the processing of a form. Typically, developers use the same values for both name and id. There are a few exceptions to this rule:
For radio buttons, the name of each button must be the same to ensure mutual exclusivity. Each radio button will then need its own unique id
Arrays of form elements can be sent, in which case the name of the elements is the same: arrName[], but the id's would need to be unique. This is often the result of the DOM generating a certain number of elements based on a users request.
Submitting a Form
The simple inclusion of an paired with the appropriate form tag attributes will allow a form to be sent. Often, before we submit the form, we need to check information for validity or completeness. In these cases, we can use the onsubmit event in the form tag. By calling a JavaScript method in the onsubmit event, we can check information before the form is sent. However, to do this, two things must happen. First, the called JavaScript method must return a value of true or false based on its findings. Second, the onsubmit event must return a value of true or false (same as the method) to tell the form if the data should be sent. An example can be seen below:
<script>
function validate()
{
return window.confirm("Do you want to submit the form?");
}
</script>
<form method="GET" action="formHandler.html" onsubmit="return validate()" >
<input type="text" id="name" name="name" />
<input type="submit" value="Submit" />
</form>
In the above form, clicking the submit button calls the validate method. The validate method produces a confirm button which returns a value of true or false, which is in turn, returned by the validate method. Then, the onsubmit event returns the result of the method to the form, telling the form if it should submit (true) or not (false). The onsubmit method will, by default, return true if no other value is specified.
It should also be noted that a form can be submitted directly through JavaScript using the formElement.submit() method.
Checking a Form Element for Content
When collecting data from users, there is often key pieces of information that they must submit. For example, a contact form with out a return email address is not effective. In these cases we need to make sure that there is content in the element. This is most often used in text input and text areas. To check if there is content in a text field or text area, access the element through the DOM and check to see if the .value property is equal to "" OR check if the value.length==0.
if(document.getElementById("name").value=="") OR if(document.getElementById("name").value.length==0)
In the case of a check box, if the check box element has
Validating Data
Just checking for empty is not always enough. Programmers often need to validate the information presented. This can be done in an informal or formal way. For example, if we need to make sure that the user entered an email, we could informally check for an @ sign and a . near the end. So, we can find the index location of the @ symbol and . using the indexOf method. Then, we just need to make sure that the @ has one character in front of it, there is one character between the @ and . character and that the . character is at least 2 spaces before the end of the input. Formal validation often involves the use of regular expressions, which are out of the scope of this course.
Checking Radio Button Inputs
Ensuring that a radio value has been selected, or accessing the value of said radio button, is a little more complex. This is because the buttons all have the same name, but different ids. So, the first step is to make sure that a button has been selected:
var arr=document.getElementsByName("size"); //returns an array of elements with the same name
for(var x=0; x<arr.length; x++)
if(arr[x].checked)
var value=arr[x].value;
Alerting the User to Issues
If a user has entered invalid information or not entered required information, we want to bring their attention to those inputs. This can be done in a variety of ways, all of which utilize the DOM.
One common way is to highlight the questions/inputs presenting a problem. This can be done as follows:
document.getElementById("field").style.background="Red";
Another way is to send an alert message (or in document message) to the user about what is incorrect.
alert("You did not enter a valid phone number."); OR document.getElementById("errorDiv").innerHTML="<span class='error'>Invalid password</span>";
Instant Validity Check
Instead of waiting until the user submits to find all of their problems, some developers choose to alert them to problems as they go. This can be done using events attached to each input element. For example, if a text field has an onchange event attached to it, that event will fire when the user enters the field, changes the value and then leaves the field. This is a great way to instantly check the validity of an entry and alert the user immediately if there is a problem.
Processing Results
If you ensure that your method is GET, then all variables and their values will be concatenated into the address string on the action page. The location string can be accessed using window.location. The resulting value, when stored in a variable will look similar to the following:
http://www.mysite.com/page.html?name=Mickey%20Mouse&email=mickey@disney.com
By using our knowledge of JavaScript programming(loops and String methods) we should be able to pick apart the string to get the values and include them in output on the resulting page.