Need Js for radiobutton validation

rsmahaa · #1 (**permalink**) 11-15-09, 10:53 PM

my code is blow,,,
1. If i select the first option i have validate first txt box (should hav 11 char).
2. If i select the secondoption i have validate second txt box (not empty).
Someone Plz Help

HTML Code:

<table width="100%" height="56" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="24%" rowspan="2">Select Shipping Type </td>
              <td width="25%" valign="top"><div align="right">Blue Dart
                <input name="type" type="radio" value="B" />
              </div></td>
              <td width="2%" valign="top"><div align="center">:</div></td>
              <td width="49%" height="22"><input name="billno" type="text" id="billno" style="WIDTH: 130px" onfocus="this.value=''" 
onclick="javascript:clearbox();" value="Enter  Bill  No" size="10" maxlength="60" /></td>
            </tr>
            
            <tr>
              <td height="22"><div align="right">Hand Delivery
                <input name="type" type="radio" value="H" />
              </div></td>
              <td><div align="center">:</div></td>
              <td><input name="storeid" type="text" id="storeid" value="Enter Store Id" onfocus="this.value=''" onclick="javascript:clearbox();"/></td>
            </tr>
          </table>
            <p>&nbsp;</p></td>
        </tr>
        <tr>
          <td colspan="3" class="login_txt"><div align="center">
            <input name="rma" type="hidden" id="rma" value="<?php echo $rma; ?>" />
            <input type="submit" name="Submit" value="Submit" onclick="valbutton(myform);return false;" />
          </div></td>
          </tr>
      </table>
          <?php } ?>
      <p align="center">&nbsp;</p>
      </td>
  </tr></form>
</table>
</body>
</html>

rsmahaa · #2 (**permalink**) 11-16-09, 03:50 AM

Sorry correct code is here

HTML Code:

<table width="100%" height="56" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="24%" rowspan="2">Select Shipping Type </td>
<td width="25%" valign="top"><div align="right">Blue Dart
<input name="type" type="radio" value="B" />
</div></td>
<td width="2%" valign="top"><div align="center">:</div></td>
<td width="49%" height="22"><input name="billno" type="text" id="billno" style="WIDTH: 130px" onFocus="this.value=''" 
onclick="javascript:clearbox();" value="Enter Bill No" size="10" maxlength="60" /></td>
</tr>

<tr>
<td height="22"><div align="right">Hand Delivery
<input name="type" type="radio" value="H" />
</div></td>
<td><div align="center">:</div></td>
<td><input name="storeid" type="text" id="storeid" value="Enter Store Id" onFocus="this.value=''" onClick="javascript:clearbox();"/></td>
</tr>
</table>
<p>&nbsp;</p></td>
</tr>
<tr>
  <td colspan="3" class="login_txt">&nbsp;</td>
</tr>
</table>

wirehopper · #3 (**permalink**) 11-18-09, 09:26 PM

The radio buttons need to have the same name, then you can add an onclick event.

Go to W3Schools Online Web Tutorials for reference.

rsmahaa · #4 (**permalink**) 11-19-09, 03:45 AM

k thanks for reply

job0107 · #5 (**permalink**) 11-20-09, 05:38 AM

If you use the onfocus() event listener in your radio buttons, it won't let you select a radio button until you have entered a correct value in the associated text box.

Example:

HTML Code:

<html>
<head>
<script>
function validate(v)
{
 var textBox1 = document.getElementById("billno");
 var textBox2 = document.getElementById("storeid");
 if(v == "B")
 {
  if(textBox1.value == "Enter Bill No" || textBox1.value == "" || textBox1.value.length != 11){alert("Value entered is incorrect.");}
  }
 if(v == "H")
 {
  if(textBox2.value == "Enter Store Id" || textBox2.value == ""){alert("Value entered is incorrect.");}
  }
 }
</script>
</head>
<body>
<table width="100%" height="56" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="24%" rowspan="2">Select Shipping Type </td>
<td width="25%" valign="top"><div align="right">Blue Dart
<input name="type" type="radio" value="B" onfocus="validate(this.value)" />
</div></td>
<td width="2%" valign="top"><div align="center">:</div></td>
<td width="49%" height="22"><input name="billno" type="text" id="billno" style="WIDTH: 130px" onFocus="this.value=''"
onclick="javascript:clearbox();" value="Enter Bill No" size="10" maxlength="60" /></td>
</tr>

<tr>
<td height="22"><div align="right">Hand Delivery
<input name="type" type="radio" value="H" onfocus="validate(this.value)" />
</div></td>
<td><div align="center">:</div></td>
<td><input name="storeid" type="text" id="storeid" value="Enter Store Id" onFocus="this.value=''" onClick="javascript:clearbox();"/></td>
</tr>
</table>
<p>&nbsp;</p></td>
</tr>
<tr>
  <td colspan="3" class="login_txt">&nbsp;</td>
</tr>
</table>
</body>
</html>

khill07 · #6 (**permalink**) 05-07-10, 09:59 AM

The following script will do any type of validation you need, include radio buttons:
Validation Plugin