Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Posts
    131
    Thanks
    5
    Thanked 0 Times in 0 Posts

    custom *smart* form and selects

    I want to create a custom 'smart' form that changes according to what the user is selecting. Currently, I have it refresh everytime the user selects an option but that method is really slow. I noticed that
    http://www.cars.com/go/index.jsp
    has a form that does not refresh. I'm not sure how they do what they did. Any help??

    Thanks in advance..

    Tony
    ---------
    Client / Server Side Programmer II

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Tony:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	
    	var zipCodes =[]; 
    	zipCodes["counties"] = ["Summit","Jefferson"];
    	zipCodes["Summit"] = ["44101","44107","44116","44135","44147"];
    	zipCodes["Jefferson"] = ["44221","44266","44270"];
    	
    	function fillSelect(isValue,isNext){
    
    		isNext.length = 1;
    		var curr = zipCodes[isValue];
    		for (each in curr)
    			{
    			 var nOption = document.createElement('option'); 
    			 var isData = document.createTextNode(curr[each]); 
    			 nOption.setAttribute('value',curr[each]); 
    			 nOption.appendChild(isData); 
    			 isNext.appendChild(nOption); 
    			}
    	}
    
    	function init(){
    
    		fillSelect('counties',document.forms[0]['county']);
    	}
    	
    	onload=init;
    
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:350px;margin:auto}
    	 fieldset {background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
    	 select {font-family:times;font-size:10pt;margin:10px}
    	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    
    </style>
    </head>
    <body>
    	<form method="post" action="">
    	   <fieldset>
    		<legend>Zip Code</legend>
    			<select name='county' onchange="fillSelect(this.value,this.form['zipCode'])">
    				<option selected>Select Your County</option>
    			</select>
    			<select name='zipCode'>
    				<option selected >Select Your Zip Code</option>
    			</select>
    		<input type='submit' name='submit' value="Submit" class='submitBtn'>
    	   </fieldset>
    	</form>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Sep 2006
    Posts
    131
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thank you!! exactly what I was looking for
    ---------
    Client / Server Side Programmer II

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    You're welcome, Tony. I appreciate your courtesy.


  •  

    Posting Permissions

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