Form Manipulation
Autocheck Checkboxes
If you have checkboxes, sometimes it may be necessary for you to automatically check them on page load. Sometimes you may want one button to check all at once.
In order to get all checkboxes to be checked, you will need to include the form fields in a form tag. The names of each field need not be unique. Just as radio buttons can have the same name so that they are grouped together, checkboxes can have the same name to group them. We can reference all grouped checkboxes with document.formname.checkboxes_group_name. For our form named "orderfruit" and the checkbox group called "fruit," this would be document.orderfruit.fruit. We will pass this on as an argument to our Javascript functions for checking and unchecking all.
HTML<form name="orderfruit" onsubmit="submit.php">
<label>Apples </label>
<input id="apples" name="fruit" type="checkbox" value="1" checked="checked" /> <br/>
<label>Grapes </label>
<input id="grapes" name="fruit" type="checkbox" value="5" /> <br/>
<label>Oranges </label>
<input id="oranges" name="fruit" type="checkbox" value="2" /> <br/>
<label>Bananas </label>
<input id="bananas" name="fruit" type="checkbox" value="anyvalue" /> <br/>
<label> </label>
<input type="button" value="Check All"
onclick="checkAll(document.orderfruit.fruit)" />
<input type="button" value="Uncheck All"
onclick="uncheckAll(document.orderfruit.fruit)" />
function checkAll(myCheckboxes) {
for (i = 0; i < myCheckboxes.length; i++) {
myCheckboxes[i].checked = true ;
}
}
function uncheckAll(myCheckboxes) {
for (i = 0; i < myCheckboxes.length; i++) {
myCheckboxes[i].checked = false ;
}
}
Enable and Disable Text Fields
We can enable and disable text fields with checkboxes. For example, if the user hasn't checked "Baseballs," then the quantity field for baseballs can remain disabled until "Baseballs" is checked.
HTML<form name="orderballs" onsubmit="submit.php">
<table id="balls"><tr>
<td>Baseballs</td>
<td><input id="" name="balls" type="checkbox" value="1"
onclick="enableField('qbaseballs',this.checked)" /></td>
<td>Qty</td>
<td> <input id="qbaseballs" type="text" size="4" /> </td></tr>
<tr><td>Soccer balls</td>
<td><input id="soccer" name="balls" type="checkbox" value="5"
onclick="enableField('qsoccer',this.checked)" /> </td>
<td>Qty </td>
<td><input id="qsoccer" type="text" size="4"/> </td></tr>
<tr><td>Basketballs</td>
<td><input id="basketballs" name="balls" type="checkbox" value="2"
onclick="enableField('qbasketballs',this.checked)" /> </td>
<td>Qty </td>
<td><input id="qbasketballs" type="text" size="4"/> </td></tr>
<tr><td>Tennis balls </td>
<td><input id="tennis" name="balls" type="checkbox" value="anyvalue"
onclick="enableField('qtennis',this.checked)" /> </td>
<td>Qty</td>
<td><input id="qtennis" type="text" size="4"/> </td>
<tr><td colspan="4"><input type="button" value="Check All"
onclick="checkAll(document.orderballs.balls)" /> <input type="button"
value="Uncheck All" onclick="uncheckAll(document.orderballs.balls)" />
</td></tr>
</table>
</form>
Notice that all the quantity fields are disabled. This is accomplished with the onLoad event in the body tag. I have groups the text fields with the same name qballs.
HTML<body onLoad="disableAll(document.orderballs.balls)" />
Javascript
function disableAll(myFields) {
for (i = 0; i < myFields.length; i++) {
myFields[i].disabled = true;
}
}
Now, we need to enable them by checking the checkbox. First, the text field has to toggle between enabled and disabled with the checkbox being checked or unchecked. Second, since we are doing individual text fields, we can use their id to reference them.
Javascriptfunction enableField(myObj, status) {
var returnVar = document.getElementById(myObj);
status=!status;
returnVar.disabled = status;
}
Notes on above example:
- The onclick event for the checkbox executes the function enableField with the arguments myObj and status. The myObj argument is the field that will be enabled or disabled. The status argument that is passed is this.checked, which passes that boolean value for checked or unchecked. If checked, then the value will be true. If unchecked, then the value will be false.
- The line status=!status changes the boolean value to the opposite. In effect, if checked, then it will be unchecked. If unchecked, then it will be checked.
We need to add one more functionality. When clicking on the button "Check All" or "Uncheck All", we need to enable or disable all the text fields. The Javascript that does this is the function below. It assigns the false boolean to all the text fields grouped as qballs. We have already written the disableAll function. We just need to have the button execute the respective functions.
HTML<input type="button" value="Check All"
onclick="checkAll(document.orderballs.balls);enableAll(document.orderballs.qballs)" />
<input type="button" value="Uncheck All"
onclick="uncheckAll(document.orderballs.balls);disableAll(document.orderballs.qballs)" />
Javascript
function enableAll(myFields) {
for (i = 0; i < myFields.length; i++) {
myFields[i].disabled = false;
}
}
Note: In order to enable objects, you need to set the disabled proper to false. There is no enabled property. Hence, we cannot use myFields[i].enabled = true;.
Putting It All Together
Let's put this all together with a working example.
Click for HTMLThe Javascript for the setQty in this example deserves some attention. This single function accomplishes a lot of the work and utilizes the getObj and changeValue functions we've already looked at earlier.
var total = 0;
function setQty(item,qty,ltable,ptable) {
var price = getObj(item).value;
var qty = getObj(qty).value;
var stprice = price * qty;
stprice_curr = stprice.toFixed(2);
changeValue(ltable,qty);
changeValue(ptable,stprice_curr);
total = total + stprice;
total_curr = total.toFixed(2);
changeValue('total',total_curr);
}
- The setQty function is triggered by the onChange event. This event calls the function each time the value of a textbox changes.
- Each time the function is called, it gets the price and the quantity for the corrresponding item.
- The toFixed function formats the price with 2 decimals.
This concludes checkboxes.
Next: Forms - Selection Menus