SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with JQuery form validator

    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?

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    	<!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>&nbsp; 
    	  US/Canada State</p>
    	  <p><input id="otherPlaces" type="radio" name="radioGroup" value="1">&nbsp; 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&nbsp;</option>
    	    <option>Arizona</option>
    	    <option>Arkansas</option>
    	    <option>Alberta</option>
    	    <option>Manitoba</option>
    	    </select>
    	  </div>
    	</div>
    	
    	</body>
    		
    	</html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •