Holding user's search criteria on reloaded page in dynamically generated drop boxes

Discussion in 'JavaScript' started by r.r@wheretobuycarsfrom.co, Oct 12, 2007.

  1. #1
    Hello,

    I do hope i can get this niggling issue solved here so good luck as its eluded our programmer!!

    I have a search for used cars which has 'Make' and 'Model' selcetion boxes. The contents of the 'Model' selection box is generated dynamically by the selection made in the 'Make' selection box using the following script http://www.wheretobuycarsfrom.com/list.js (sorry for just placeing the url but the script is too long to post and i'm restricted as a new used)

    If you go and perform a car search @ http://www.wheretobuycarsfrom.com/buyacar.asp you will find the results page does not hold your selections in the 'Make' and 'Model' fields and they return to the default selected settings (although the 'Model' drop box is actually blank until you select a 'Make'!!):confused:

    i have implemented the following asp snippet within the make selection tags:

    <select class="fieldmake" NAME="Make" onChange="SelectsubCat();"
    <% if request.querystring("Make") <> "" then response.write " value = """ & request.querystring("Make") & """" %> size="1">
    <Option>Any Make</option>
    </select>
    </td>
    <td class="formtablecell">
    <select class="fieldmodel" id="Model" NAME="Model">
    <Option value="Any Model">Any Model</option>
    </select>
    
    Code (markup):
    Followed by this script; ('drop_list' is the name i gave the search form)

    <script type="text/javascript">
    	drop_list.Make.value = "<% = request.querystring("Make") %>"
    	drop_list.Model.value = "<% = request.querystring("Model") %>"
    	drop_list.D3.value = "<% = request.querystring("D3") %>"
    	drop_list.D1.value = "<% = request.querystring("D1") %>"
    	drop_list.D2.value = "<% = request.querystring("D2") %>"
    	drop_list.search_postcode.value = "<% = request.querystring("search_postcode") %>"
        </script>
    
    Code (markup):
    unfortunately it only works in the non dynamic fields i.e. max price, postcode etc. and we need it to work on all of them to cut down on the need for a users input.

    Please please please could someone help with this? Any help would be appreciated...a work arround even or new scripts for the dynamic drop boxes. Any light on this would be great.

    Thank you so much in advance.
     
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Also see, my code here:

    http://ajaxforums.net/index.php?topic=858.0

    Dependent Select List:
    
    <!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 cities =[]; 
    	cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"];
    	cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"];
    	cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburgh"];
    	
    	function fillSelect(isValue,isNext){
    
    		isNext.length = 1;
    		var curr = cities[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); 
    			}
    	}
    
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:330px;margin:auto}
    	 fieldset {width:330px;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:tahoma;font-size:10pt;width:125px;margin-left:27px}
    	.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
    
    </style>
    </head>
    <body>
    	<form method="post" action="">
    	   <fieldset>
    		<legend>Data</legend>
    			<select name='states' onchange="fillSelect(this.value,this.form['cities'])">
    				<option value="">Select Your State</option>
    				<option value="CA">California</option>
    				<option value="OH">Ohio</option>
    				<option value="PA">Pennsylvania</option>
    			</select>
    			<select name='cities'>
    				<option value="">Select Your City</option>
    			</select>
    		<input type='submit' name='submit' value="Submit" class='submitBtn'>
    	   </fieldset>
    	</form>
    </body>
    </html>
    
    Code (markup):
     
    Mike H., Oct 12, 2007 IP