Accessing Form Elements
This tutorial is all about control - controlling forms, pictures, text etc. All right control freak, let us start with Forms.
button
Buttons can be used to call a JavaScript code. We can use the 'onClick' attribute of the button to call a javascript function to do our dirty work for us. Now let us see how.
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.
- onBlur
- onChange
- onFocus
Button, checkbox, radio button will support 'onClick'. Make sure that the element you are using supports the event handler by checking javascript manual. Thats what the manual is for. I know that for some of you, reading the manual is equivalent to conceding defeat, but you just have to swallow you pride and refer it if you wish to be a javascript programmer.
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 'onClick="NameOfYourFunction()"'
Now lets us move on to other elements.
text
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[0].elements[0].value;
Here, we find the form element without using its name. We do this by referring to the correct form element in the hierarchical document structure used by JavaScript. The first form will be referred to as forms[0]. In it the first element will be elements[0], the second element[1] and so on. The technical term used for this method is Document Object Model or DOM. It is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself.
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...
textarea
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...
<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