I am using http://jqueryvalidation.org/ for form validation
Can someone help with this:
I have two radios:
US/Canada State
Outside US/Canada
One of these radios are required, whataver is chosen then for “US/Canada State” another field will be required that is a drop down list of states, if the latter is chosen then instead of that drop-down list another text field will be required to enter the state.
I can set required for each individual element, but about this case, how can I do this?
Here is a script that does what you want. It opens with the USA-Canada radio button selected and the list of States showing as a drop-down box. When you click the “Other Places” radio button the States list disappears and a text box is made visible to allow you to enter the country required.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select state</title>
<script type="text/javascript">
var tBoxObj, dDownObj, usaCanObj, otherPlacesObj; // global
window.onload=function()
{ dDownObj=document.getElementById("dDown");
tBoxObj=document.getElementById("tBox");
usaCanObj=document.getElementById("usaCan");
usaCanObj.onclick=function(){radB(this)};
otherPlacesObj=document.getElementById("otherPlaces");
otherPlacesObj.onclick=function(){radB(this)};
}
//
function radB(obj)
{ var indx=obj.value;
dDownObj.style.visibility=(indx==1)? "hidden" : "visible";
tBoxObj.style.visibility=(indx==1)? "visible" : "hidden";
}
//
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:400px; height:500px; margin-left:50px; border:1px solid #CCC; }
#wrap p { margin:0px 0px 5px 0px; }
#dDown { visibility:visible; position:absolute; top:0px; right:0px; width:200px; }
#tBox { visibility:hidden; margin-top:10px; }
</style>
</head>
<body>
<div id="wrap">
<p>Choose a station</p>
<p><input id="usaCan" type="radio" name="radioGroup" value="2" checked>
US/Canada State</p>
<p><input id="otherPlaces" type="radio" name="radioGroup" value="1"> Outside
US/Canada</p>
<div id="tBox">
<p>Type in the country here<br>
</p>
<p><input type="text" name="aaa" value="bbbb" size="40"></p>
</div>
<div id="dDown">
<select name="aaa">
<option>Select a State </option>
<option>Arizona</option>
<option>Arkansas</option>
<option>Alberta</option>
<option>Manitoba</option>
</select>
</div>
</div>
</body>
</html>