validating using jquery on a hidden text field revealed by a radio button

vikela · June 5, 2009

how can i have jquery validate a field that would have been revealed through a radio button.I have two radio buttons and depending on what a user select a textarea is shown for them to put info.how then can i validate the info that a user would have put using jquery?

the code i have is as follows and is working fine except the validation of the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"><!--
if(document.all && !document.getElementById) { //IE4 support
  document.getElementById = function(id) { return document.all[id]; }
}
function dss_addLoadEvent(fn) {
  if(typeof(fn)!="function")return;
  var tempFunc=window.onload;
  window.onload=function() {
    if(typeof(tempFunc)=="function")tempFunc();
    fn();
  }
}
dss_addLoadEvent(function() {
  if(!document.getElementById) return;
  var f = document.getElementById('form1');

  //f.onsubmit = function(){ return false; }
  // hide the textarea and its parent label
  document.getElementById('demo_radio_ta_label').style.display = 'none';
  document.getElementById('demo_radio_ta_label1').style.display = 'none';
  // get a reference to the radio button group
  var rads = f.elements['demo_radio'];
  for(var i=0;i<rads.length;i++) {
    // we add the event handler to each button in the group
    rads[i].onkeyup=rads[i].onclick=function(){
      if(!this.checked) return;
      var el = document.getElementById('demo_radio_ta_label');
      el.style.display = (this.value=="yes")?'':'none';
 var el1 = document.getElementById('demo_radio_ta_label1');
      el1.style.display = (this.value=="no")?'':'none';
    }
    // in case, for any reason, one of the radio buttons is already checked
    rads[i].onclick();
  }
});
// -->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Category For Registration Form</title>
</head>

<body>
<form id="form1" action="#">
<legend>Choose your category?</legend>

  <label for="rad1"><input type="radio" name="demo_radio" id="rad1" value="yes"
  > Trustee</label><br>
  <label for="rad2"><input type="radio" name="demo_radio" id="rad2" value="no"
  > Broker</label>

<div class="label" id="demo_radio_ta_label"><label
>Trustee Name:</label>
<input type="text" name="trustee"></div>
<div class="label" id="demo_radio_ta_label1"><label
>Broker:</label>
<input type="text" name="broker"></div>
</form>
</body>
</html>
</body>
</html>

Sign In

validating using jquery on a hidden text field revealed by a radio button

Recommended Posts

vikela

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information