...

View Full Version : HTML Radio Buttons and JavaScript



websteve
09-06-2010, 02:19 AM
Can anyone tell me how I can use JavaScript to check to see if a radio button is checked. I tried the code below, but that doesn't work.

<script type="text/javascript">
function hideAll() {
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
}
</script>
<script type="text/javascript">
function doIt() {
var q = document.getElementsByName('q');
for(var i = 0; i < q.length; i++){
if(q[0].checked == true){
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
window.location="cust-query2.php?cust_id=0";
}
else if(q[1].checked == true){
document.getElementById("existing").style.display="";
document.getElementById("delivery").style.display="none";
}
else if(q[2].checked == true){
document.getElementById("delivery").style.display="";
document.getElementById("existing").style.display="none";
}
}
}
</script>
</head>

<body onLoad="hideAll()">
<div align="center">
<table width="70%" border="0">
<tr valign="top">
<th scope="row"><h2 align="left">Please Select an Option:</h2>
<form name="myform" onSubmit="doIt()" action="">
<p align="left" class="indent">
<input type="radio" name="q" value="0">
<label>New Customer</label>
<br />
<input type="radio" name="q" value="1">
<label>Existing Customer</label>
<br />
<!--<input type="radio" id="q" value="s">
<label>Customer Search</label>
<br />-->
<input type="radio" name="q" value="2">
<label>Print Delivery Information</label>
<br /><br />
<input type="submit" value="Submit" />
</form>
</p>
<div id="existing" align="left" class="indent">
<form action="cust-query2.php" method="post">
Enter Phone Number:
<input type="text" name="cust_id" />
<input name="submit" type="submit" />
</p>
</form>
</div>
<div id="delivery" align="left" class="indent">
<form method="post" action="search_delivery_by_date1.php">
Enter Date: <input type="text" name="date" />
Enter Time:
<select name="ampm">
<option>AM</option>
<option>PM</option>
</select>
Enter City:
<select name="city">
<option>Boro Park</option>
<option>Flatbush</option>
<option>Williamsburg</option>
</select>
<input type="submit" value="Print Delivery Information">
</form>
</div>
</td>
</tr>

Old Pedant
09-06-2010, 04:34 AM
Ummm...you are not changing WHAT gets displayed until the <form> is submitted...and then you do change the display, but the form *immediately* get submitted so the user never sees that change.

K.I.S.S.


<head>
<script type="text/javascript">
function show(which)
{
document.getElementById("existing").style.display = which==1 ? "block" : "none";
document.getElementById("delivery").style.display = which==2 ? "block" : "none";
}
</script>
</head>
<body>
<div align="center">
<table width="70%" border="0">
<tr valign="top">
<th scope="row">
<form name="myform" action="">
<h2 align="left">Please Select an Option:</h2>
<p align="left" class="indent">
<label><input type="radio" name="q" onclick="show(0);" checked>New Customer</label>
<br />
<label><input type="radio" name="q" onclick="show(1);">Existing Customer</label>
<br />
<label><input type="radio" name="q" onclick="show(2);">Print Delivery Information</label>
<br /><br />
</p>
</form>

<div id="existing" align="left" class="indent" style="display: none;">
... your stuff ...
</div>
<div id="delivery" align="left" class="indent" style="display: none;">
... your stuff ...
</div>
</td><!-- how can a /td match up with a th ???? illegal HTML -->
</tr>
...

websteve
09-06-2010, 12:56 PM
Ah! That did it. I knew there was something I wasn't thinking clearly about.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum