How to use radio buttons and checkboxes with javascript
Question
<html><!--start of html file-->
<head><!--start of head-->
</head><!--end of head-->
<script type = "text/javascript" ><!--Start of javascript-->
function checkData()/*function to check data*/
{
function checkDay()
{
var car;
var extras;
for (i=0; i<document.durationForm.length;i++)
{
if(document.durationForm[i].checked)
{
document.getElementById("durationForm[i]");
alert(durationForm[i]);
}
}
}//end of checkDay()
/*for (i=0; i<document.carForm.length;i++)
{
if(document.carForm[i].checked)
{
document.getElementById("carForm");
}
}*/
/*alert("You got" + cartype + rbutton + extras);*/
}
function hello()
{
alert("hi");
}
</script><!-- end of script-->
<body><!--start of body-->
<table border = "1" align = "center"><!--start of table-->
<tr><!-- start table row-->
<td><b>DURATION<br/>
<!-- start duration table column-->
<form name= "durationForm">
<input type="radio" name="duration" id= "One Day" value="One Day" checked="checked">One Day <br>
<input type="radio" name="duration" id= "Weekend"value="Weekend">Weekend <br>
<input type="radio" name="duration" id= "Weekly" value="Weekly">Weekly <br></b>
</form>
</td>
<td><b>VEHICLE TYPE</b><br/>
<!-- start Vehicle type table column-->
<form name = "carForm">
<input type="radio" name="car" value="Compact Car" checked="checked">Compact Car <br>
<input type="radio" name="car" value="Midsize">Midsize <br>
<input type="radio" name="car" value="Fullsized">Fullsized <br>
<input type="radio" name="car" value="Van">Van <br>
</form>
</td>
</tr><!-- end table row-->
<tr><!-- start table row-->
<td colspan = "2" align = "center"><b>EXTRA</b><br/>
<!-- start Extras table column-->
<table><!--check box table-->
<tr>
<td><input type= "checkbox" name = "A/C"/> A/C(+$10) </td>
<td><input type= "checkbox" name = "Working Brakes"/> Working Brakes(+$100)</td>
</tr>
<tr>
<td><input type= "checkbox" name = "Cruise Control"/>Cruise Control (+$20) </td>
<td><input type= "checkbox" name = "Baby Seat"/> Baby Seat(+$30) </td>
</tr>
</table><!--end of check box table-->
</td>
</tr><!-- end table row-->
<tr><!-- start table row-->
<td colspan = "2" align = "center">
<form name = "myForm">
<input type = "button" value = "Estimated Cost" onClick="checkData();">
<!-- start Estimated Cost button table column-->
</form>
</td>
</tr><!-- end table row-->
</table><!-- end table-->
</body><!-- end body-->
</html><!-- html file-->
I'm kinda new to HTML and Javascript. I'm not really sure whether the problem was in the scripting of the function checkData() or the radio buttons and checkboxes if anyone could help me it would be greatly appreciated.
2 answers
solution1
0 2014-02-21 19:16:23
You cannot do document.getElementById("durationForm[i]");
Your browser tries to find an element with that exact ID, not the i th child of the durationForm. You must iterate over the child nodes of durationForm. Using something like jQuery will also make your life much easier as you try to traverse children, etc..
solution2
0 2014-02-21 19:26:53
First avoid to use functions inside functions if you are a Javascript begginer, that kind of usage is more associate to javascript "classes".
Well, to solve your problem, I would recoment to set an ID for your forms to access it by the Web Standard getElementById document function.
Assuming that the your forms now have an id:
Html:
<form name= "durationForm" id="durationForm">
Javascript:
function checkData()
{
var frmDuration = document.getElementById('durationForm');
checkForm(frmDuration);
}
function checkForm(frmTarget)
{
for (i=0; i<frmTarget.length;i++)
{
if (frmTarget.elements[i].type == 'CHECKBOX')
{
alert(frmTarget.elements[i].value);
}
}
}
With that in mind you could also check for the multiple forms, like so:
function checkDataAll()
{
for (var i = 0; i < document.forms.length; i++)
checkForm(document.forms[i]);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.