Categories:

Accessing forms using JavaScript

To access a form within a page, do this:

document.formname.elementname

For example, say you have a form like this:

<form name="test">
<input type="text" size="10" value="good" name="boxes">
</form>

Notice that we gave the form and the element a name. This is so JavaScript can use this information to gain access to them . Ok, now we want JavaScript to alert us the value inside this box.

<input type="button" value="Click Here>>"
onclick="alert(document.test.boxes.value)">
Click here for output: 

Note how we got to the value of the element of the form object-by going down the JavaScript object tree. Try altering the text in the text box, and try clicking above again. You will see that it will alert the new entry each time.

Ok, so whenever you create a form, always remember to give both the form and the element a distinct name in which JavaScript can then acquire to access the element. Is this the only way? No. You could use arrays, but I will not talk about that in this section; this is generally the better way to access forms in that it will not confuse you by asking you to keep track of each form element using its index number.

Lets do an illustration with multiple boxes.

Basic Calculator-Enter a math expression in the first box, and than use the calculate button to get the answer. Ex: 25*(6-5)

.
Answer: 
<form name="example">
<input type="text" size="20" name="calculator">
<input type="button" name="B1" value="Calculate" onclick="cal()">
<input type="reset" name="B2" value="Reset">
Answer:<input type="text" size="20" name="answer">
</form>

<script>
function cal(){
	document.example.answer.value=eval(document.example.calculator.value)
}
</script>

The key here is the code within the script tags:

document.example.answer.value=eval(document.example.calculator.value)

Basically, we are saying: put whatever is in the right-hand-side, and stuff it into the left hand side. Hay, but wait! What is eval(...) in the above? It is a built in function that "evaluates" what's in the first box before stuffing it into the second one. eval(something) is a built in function that "makes sense" of any string you put into it, treating it as code instead of a string. Consider this:

document.example.answer.value=document.example.calculator.value

If we type: (3*5)+7
Without eval(): "(3*5)+7"
With eval(): 22

Don't expect to understand fully the eval() function right now...just understand its role in this example. We will come back to this function, because its such an important one; in the mean time, don't worry about it. Now, there is one small problem with this example: Try inputting letters (ie: l*we) into it, and you will get an error message. That's because, of course, you cannot calculate letters, but your code does not know that! It attempts to, and out pops JavaScript errors-we shall discuss validating forms in the next page.

Finally, lets do a more complex example that has a little more practicality to it. You may have seen the below example used on the net:

Move your mouse over the links:

Dynamic Drive

Coding Forums

Here's the "core" code for the first link, assuming we have given the form the name "myform", and the textarea the name "mytextarea":

<a href="resources.htm" 
onMouseover="document.resources.tip.value='blablabla...'
onMouseout="document.resources.tip.value=''">Web Resources</a>

As you can see, we used the event handers we had learned before to give the textarea box different text, depending on the state of the mouse. When the mouse moves over it, we supply the box with the text we want it to display, and when it moves out, we reset it. Note that resetting it is by giving it a value of null, or ''