Accessing Form Elements
This tutorial is all about control - controlling forms, pictures, text etc. All right control freak, let us start with Forms.
The above button is created using the code
<input type="button" value="This is an example of a button." onClick="alert('Did anyone call me?')">
When the user clicks on the button, the code "alert('Did anyone call me?')" which will pop up a message box with the text 'Did anyone call me?'.
This is called event handling. The above script has instruction on how to act in the event of a click. One can specify the code that will be called on other events too. Here is a small list of event handlers that almost all the form elements will support.
You can also call functions that you have defined from here. Just make a function inside the <script> tag and call it from here using the code '
Now lets us move on to other elements.
First of all, let us read the value in a form element. The following form is created by the code
<form name="frm"><input type="entry" name="entry" id="entry_element" value="Hello World."></form>
As you see it has a name 'entry'. We will be using this to access the input item.
var txt = document.frm.entry.value
This will put the value of the 'entry' element into the variable called 'txt'. You can now display it using 'alert(txt)'.
So this is the syntax to access form elements
document.<form name>.<element name>.value
We got data from the element, now lets put data inside it. For this the same method is used...
document.frm.entry.value = "Hello World"
Easy isn't it? Now to see another method to do the same.
var txt = document.forms.elements.value;
Yet another way of accessing the element is using its ID. Try to below code to get the value of the entry.
var txt = document.getElementById("entry_element").value;
This will search the whole DOM structure for an element with the id "entry_element" - and then returns its value. More about this in later chapters.
One can append stuff at the end of form elements using this simple trick...
document.frm.entry.value = document.frm.entry.value + ", Goodbye Home."
Try the stuff you just learned...
The same method can be used to access other elements like Textarea, password, file and hidden type. It can also be used to access the 'select' element, more about that later. The T-Box given below is a textarea with the name 'tbox' in a form by the name of 'test'. This code was used to created it...
Now we use the same method to access it.
<form name="test"> <textarea name="tbox" rows="10" cols="50"></textarea> <input type="button" value="Run" onClick="run()" class="run_button"> </form>
var txt = document.test.tbox.value; alert("The value data inside T-Box is :\n"+txt);
On a side note, the above lines, if you don't know, are what is known as a quine. A quine is a program that generates a copy of its own source text as its complete output. Yes, I know that it did not show the HTML source and all that - but still I think it can be considered as a quine.
Other Input elements
Try accessing similar elements. All these elements use the 'input' tag - the 'type' attribute will be different. For example, <input type="text">. All these elements are inside a form by the name of 'input_elements'.
You may want to try out what you learned in the area provided below.blog comments powered by Disqus