Form Handling - Part 1
Form Validation
Form Handling - Part 2
Accessing Form Elements...(cont.)
Checkbox
Now let us try to access other form elements - starting with the check box.
The code used to create the above effect was...
<script language="Javascript">
<!--
function check() {
var data = "You choose to ";
var chosen = 0;
if(document.chk_choice.cb_money.checked) {
data = data + "make a lot of money, ";
chosen++;
}
if(document.chk_choice.cb_enjoy.checked) {
data = data + "enjoy the work, ";
chosen++;
}
if(document.chk_choice.cb_law.checked) {
data = data + "operate within the law.";
chosen++;
}
if (chosen < 2) alert("You can choose upto two options here.\n\
But in real life don't count on getting even what you choose.");
else if (chosen > 2) alert("Please choose only TWO.\
You can't have them all, can you?");
else alert(data);
}
//-->
</script>
<p><form name="chk_choice">
<input type="checkbox" name="cb_money" value="money">Make Lots of Money<br>
<input type="checkbox" name="cb_enjoy" value="enjoy">Enjoy the Work<br>
<input type="checkbox" name="cb_law" value="law">Operate Within the Law<br>
Choose any <b>two</b>.<br>
<input type="button" value="Make the Choice" onClick="check()">
</form>
</p>
Here, a function called check will see which all checkboxes are ticked and display the output accordingly. The above elements are in a form called 'chk_choice' and the first element - "Earn a lot of money", has the name 'cb_money'. This can be accessed with the code
document.chk_choice.cb_money.checked
This variable will have the value 'true' if the checkbox is selected and the value 'false' if it is not. Try the code
alert(document.chk_choice.cb_money.checked)
in the above T-Box to see this in action.
One can change the status of a checkbox in this manner
document.chk_choice.cb_money.checked = true - will make the first element chosen and
document.chk_choice.cb_money.checked = false - will clear the first element if it was selected.
You may try the above given examples here.
Radio
This example was created with the script...
<script language="javascript">
function dosError() {
for (var i=0;i<3;i++) {
if(document.frm_dos.message[i].checked)
alert("No Windows! Let's "+document.frm_dos.message[i].value)
}
}
</script>
<p><form name="frm_dos">
DOS Error #203: Windows not found:<br>
Cheer <input type="radio" name="message" value="Cheer"> |
Party <input type="radio" name="message" value="Party"> |
Dance <input type="radio" name="message" value="Dance"><br>
<input type="button" value="Choose" onClick="dosError()">
</form></p>
The form we use here is named 'frm_dos'. Another thing to notice here is that all three elements have the same name - 'message'. If you try to give them different names, they won't operate the way normal radio buttons should. You will be able to select multiple options. That is not the function of radio buttons - that is the function of checkboxes. In the case of radio buttons, the user must be able to make only one choice.
Hence, the same name is given to three elements. Now an array is created called 'messages[]' at location 'document.frm_dos.messages[]'. The first element(document.frm_dos.messages[0].value) will have the value 'Cheer', the second will have the value 'Party' and so on. To find whether a option is selected or not we will use the same method we used in the case of checkboxes - except this time we do it using an array.
document.frm_dos.messages[0].checked - will be 'true' if the first element(Cheer) is selected. The similar hold true for second and third elements.
To check all three elements we use a for loop.
for (var i=0;i<3;i++) {
if(document.frm_dos.message[i].checked)
alert("No Windows! Let's "+document.frm_dos.message[i].value)
}We look every element to see which one is checked. If we found an element that is checked, we will display its value.
select
The above example was created with the help of this script...
<script language="javascript">
//Traffic Problem
function trafficSolution() {
alert("Your solution for heavy traffic is "
+document.frm_traffic.solution.value)
}
</script>
<p><form name="frm_traffic">
How do you deal with heavy traffic?
<select name="solution">
<option value="drugs">A.Heavy psychedelics.
<option value="guns">B.Carry loaded weapons.
<option value="violence">C.Get a sticker saying "Guns don't kill people. I do."
</select>
<input type="button" onclick="trafficSolution()" value="Solution">
</form></p>The concept used here is similar to the one that we used in text, textarea and other such elements - using the 'value' property of the element.
The 'select' element has the name 'solution' and the form it is put in has the name 'frm_traffic'. The 'solution' element's value will reflect which option is currently chosen. If the first element is chosen, it will have a value 'drugs'. If the second element is chosen, it will have a value 'guns'. So usingdocument.frm_traffic.solution.value
one can find which option is chosen.