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 11 of 11
  1. #1
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drop down single default option

    Hi

    i have the following script, which is a triple dynamic drop down, using a combination of ajax, js, php and mysql.

    i have it all working but i am struggling to make a slight modification.

    basically when you select a manufacturer in the first drop down, it populates the second drop down with product models and the third drop down shows the price for that model.

    but i would like the third drop down to be a text box as there will only ever be one price and so a drop down is not needed.

    any help on this would be great.

    thanks.

    Code:
    <script type="text/javascript">
    
    function getfirst(dd1)
    	{
    		clearSelect = document.getElementById('thirdbox'); 
    		clearSelect.options.length = 1;  
    	//above code clears the third select box when re-clicking the first select box
    
    		var idx = dd1.selectedIndex;
    		var first = dd1[idx].text;
    		var par = document.forms["order_form"];
    		var parelmts = par.elements;
    		var prezsel = parelmts["secondbox"];
    	
    			if (first != "Please Select A Phone Manufacturer")
    				{
     				Http.get(
    					{
    						url: "./alpha.php?alpha=" + first + "%",
    						callback: fillPrez,
    						cache: Http.Cache.Get
    					}, [prezsel]);
    				}
    	}
    
    function getsecond(dd1)
    	{
    	  var idx = dd1.selectedIndex;
    	  var second = dd1[idx].text;
    	  var par = document.forms["order_form"];
    	  var parelmts = par.elements;
    	  var prezsel = parelmts["thirdbox"];
      
    		if (second != "Please Select A Phone Model")
    		  {
    			Http.get(
    				{
    				url: "./beta.php?model=" + second,
    				callback: fillPrez,
    				cache: Http.Cache.Get
    				}, [prezsel]);
    		  }
    	}
    
    function fillPrez(xmlreply, prezelmt)
    	{
    		if (xmlreply.status == Http.Status.OK)
    			{
    				var prezresponse = xmlreply.responseText;
    				var prezar = prezresponse.split("|");
    				prezelmt.length = 1;
    				prezelmt.length = prezar.length;
    			
    					for (o=1; o < prezar.length; o++)
    						{
    						  prezelmt[o].text = prezar[o];
    						  prezelmt[o].value = prezar[o];
    						}
    			}
    		else
    			{
    				alert("Cannot handle the AJAX call.");
    			}
    	}
    
    function getthird(dd1,dd2) 
    	{
    		var idx = dd1.selectedIndex;
    		var third = dd1[idx].text;
    		
    			if (third != "Handset Price")
    				{
    					Http.get(
    						{
    							url: "./final.php?model=" + dd2 + "&handset_price=" + third,
    							callback: getit,
    							cache: Http.Cache.Get
    						});
    				}
    	}
    
    function getit(xmlreply)
    	{
    		
    		if (xmlreply.status == Http.Status.OK)
    			{
    				document.getElementById("final").innerHTML= xmlreply.responseText;
    			}  
    		else
    			{
    				alert("Cannot handle the AJAX call.");
    			}
    	}
    
    </script>
    Code:
    <select name="firstbox" onChange="getfirst(this);">
    <option>Please Select A Phone Manufacturer</option>
    <option>Nokia</option>
    <option>Samsung</option>
    <option>Sony Ericsson</option>
    </select>
    
    
    <select name="secondbox" onChange="getsecond(this);">
    <option>Please Select A Phone Model</option>
    </select>
    
    <select id="thirdbox" name="thirdbox" size="2" onChange="getthird(this, document.order_form.secondbox.options[document.order_form.secondbox.selectedIndex].value);">
    <option>Handset Price</option>
    </select>

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Something like this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    
    function getfirst(dd1){
    	clearSelect = document.getElementById('thirdbox'); 
    	clearSelect.options.length = 1;  
    //above code clears the third select box when re-clicking the first select box
    
    	var idx = dd1.selectedIndex;
    	var first = dd1[idx].text;
    	var par = document.forms["order_form"];
    	var parelmts = par.elements;
    	var prezsel = parelmts["secondbox"];
    
    	if (first != "Please Select A Phone Manufacturer"){
    	Http.get(
    		{
    			url: "./alpha.php?alpha=" + first + "%",
    			callback: fillPrez,
    			cache: Http.Cache.Get
    		}, [prezsel]);
    	}
    }
    
    function getsecond(dd1){
    	var idx = dd1.selectedIndex;
    	var second = dd1[idx].text;
    	var par = document.forms["order_form"];
    	var parelmts = par.elements;
    	var prezsel = parelmts["third"];
    
    	if (second != "Please Select A Phone Model"){
    		Http.get(
    			{
    			url: "./beta.php?model=" + second,
    			callback: getPrice,
    			cache: Http.Cache.Get
    			});
    		}
    }
    
    function fillPrez(xmlreply, prezelmt){
    	if (xmlreply.status == Http.Status.OK){
    		var prezresponse = xmlreply.responseText;
    		var prezar = prezresponse.split("|");
    		prezelmt.length = 1;
    		prezelmt.length = prezar.length;
    	
    		for (o=1; o < prezar.length; o++){
    			prezelmt[o].text = prezar[o];
    			prezelmt[o].value = prezar[o];
    		}
    	}
    	else{
    		alert("Cannot handle the AJAX call.");
    	}
    }
    
    function getPrice(xmlreply){
    	if (xmlreply.status == Http.Status.OK){
    		document.getElementById("lastTextBox").value= xmlreply.responseText;
    	}  
    	else{
    		alert("Cannot handle the AJAX call.");
    	}
    }
    
    </script>
    </head>
    
    <body>
    <select name="firstbox" onchange="getfirst(this);">
    <option>Please Select A Phone Manufacturer</option>
    <option>Nokia</option>
    <option>Samsung</option>
    <option>Sony Ericsson</option>
    </select>
    
    
    <select name="secondbox" onchange="getsecond(this);">
    <option>Please Select A Phone Model</option>
    </select>
    
    Price: <input type="text" name="lastTextBox" id="lastTextBox" value="">
    
    </body>
    </html>
    Not tested, obviously, as I don't know what format your xml responses are, etc.

  • #3
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i had a long play around with trying to do it your way but not had any luck the second drop down stops working.

    i have been trying to just only allow one drop down option for the third drop down, but there always seems to be a blank one first, dont understand why.

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    can you be abit more specific about "the second drop down stops working"? How do you expect it to work and what is actually happening?
    You could post some sample xml reponses, that might help diagnose the problem.

  • #5
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On the first drop down you select a manufacturer which populates the second with a list of models, the third should show a price.

    But the second has doesn't populate at all now. (Have put the code back to how it was.)

    Code:
    /* 
    	XmlHttpRequest Wrapper
    	Version 1.2.2
    	29 Jul 2005 
    	adamv.com/dev/
    */
    
    var Http = {
    	ReadyState: {
    		Uninitialized: 0,
    		Loading: 1,
    		Loaded:2,
    		Interactive:3,
    		Complete: 4
    	},
    		
    	Status: {
    		OK: 200,
    		
    		Created: 201,
    		Accepted: 202,
    		NoContent: 204,
    		
    		BadRequest: 400,
    		Forbidden: 403,
    		NotFound: 404,
    		Gone: 410,
    		
    		ServerError: 500
    	},
    		
    	Cache: {
    		Get: 1,
    		GetCache: 2,
    		GetNoCache: 3,
    		FromCache: 4
    	},
    	
    	Method: {Get: "GET", Post: "POST", Put: "PUT", Delete: "DELETE"},
    	
    	enabled: false,
    	logging: false,
    	_get: null,	// Reference to the XmlHttpRequest object
    	_cache: new Object(),
    	
    	Init: function(){
    		Http._get = Http._getXmlHttp()
    		Http.enabled = (Http._get != null)
    		Http.logging = (window.Logging != null);
    	},
    	
    	_getXmlHttp: function(){
    	/*@cc_on @*//*@if (@_jscript_version >= 5)
    		try { return new ActiveXObject("Msxml2.XMLHTTP"); } 
    		catch (e) {} 
    		try { return new ActiveXObject("Microsoft.XMLHTTP"); } 
    		catch (e) {} 
    	@end @*/
    		try { return new XMLHttpRequest();}
    		catch (e) {}
    
    		return null;
    	},
    
    /*
    	Params:
    		url: The URL to request. Required.
    		cache: Cache control. Defaults to Cache.Get.
    		callback: onreadystatechange function, called when request is completed. Optional.
    		method: HTTP method. Defaults to Method.Get.
    */
    	get: function(params, callback_args){	
    		if (!Http.enabled) throw "Http: XmlHttpRequest not available.";
    		
    		var url = params.url;
    		if (!url) throw "Http: A URL must be specified";
    				
    		var cache = params.cache || Http.Cache.Get;
    		var method = params.method || Http.Method.Get;
    		var callback = params.callback;
    		
    		if ((cache == Http.Cache.FromCache) || (cache == Http.Cache.GetCache))
    		{
    			var in_cache = Http.from_cache(url, callback, callback_args)
    
    			if (Http.logging){
    				Logging.log(["Http: URL in cache: " + in_cache]);
    			}
    
    			if (in_cache || (cache == Http.Cache.FromCache)) return in_cache;
    		}
    		
    		if (cache == Http.Cache.GetNoCache)
    		{
    			var sep = (-1 < url.indexOf("?")) ? "&" : "?"	
    			url = url + sep + "__=" + encodeURIComponent((new Date()).getTime());
    		}
    	
    		// Only one request at a time, please
    		if ((Http._get.readyState != Http.ReadyState.Uninitialized) && 
    			(Http._get.readyState != Http.ReadyState.Complete)){
    			this._get.abort();
    			
    			if (Http.logging){
    				Logging.log(["Http: Aborted request in progress."]);
    			}
    		}
    		
    		Http._get.open(method, url, true);
    
    		Http._get.onreadystatechange =  function() {
    			if (Http._get.readyState != Http.ReadyState.Complete) return;
    			
    			if (Http.logging){
    				Logging.log(["Http: Returned, status: " + Http._get.status]);
    			}
    
    			if ((cache == Http.Cache.GetCache) && (Http._get.status == Http.Status.OK)){
    				Http._cache[url] = Http._get.responseText;
    			}
    			
    			if (callback_args == null) callback_args = new Array();
    
    			var cb_params = new Array();
    			cb_params.push(Http._get);
    			for(var i=0;i<callback_args.length;i++)
    				cb_params.push(callback_args[i]);
    				
    			callback.apply(null, cb_params);
    		}
    		
    		if(Http.logging){
    			Logging.log(["Http: Started\n\tURL: " + url + "\n\tMethod: " + method + "; Cache: " + Hash.keyName(Http.Cache,cache)])
    		}
    		
    		Http._get.send(params.body || null);
    	},
    	
    	from_cache: function(url, callback, callback_args){
    		var result = Http._cache[url];
    		
    		if (result != null) {
    			var response = new Http.CachedResponse(result)
    			
    			var cb_params = new Array();
    			cb_params.push(response);
    			for(var i=0;i<callback_args.length;i++)
    				cb_params.push(callback_args[i]);
    							
    			callback.apply(null, cb_params);
    				
    			return true
    		}
    		else
    			return false
    	},
    	
    	clear_cache: function(){
    		Http._cache = new Object();
    	},
    	
    	is_cached: function(url){
    		return Http._cache[url]!=null;
    	},
    	
    	CachedResponse: function(response) {
    		this.readyState = Http.ReadyState.Complete
    		this.status = Http.Status.OK
    		this.responseText = response
    	}	
    }
    
    Http.Init()
    
    function json_response(response){
    	var js = response.responseText;
    	try{
    		return eval(js); 
    	} catch(e){
    		if (Http.logging){
    			Logging.logError(["json_response: " + e]);
    		}
    		else{
    			alert("Error: " + e + "\n" + js);
    		}
    		return null;
    	}
    }
    
    function getResponseProps(response, header){
    	try {
    		var s = response.getResponseHeader(header || 'X-Ajax-Props');
    		if (s==null || s=="")
    			return new Object()
    		else
    			return eval("o="+s)
    	} catch (e) { return new Object() }
    }
    PHP Code:
    $result mysql_query("SELECT DISTINCT handset_price from mobiles where `model`= '".$_GET['model']."' order by handset_price");

    while (
    $row mysql_fetch_array($result)) {
    echo 
    "|" $row['handset_price'];


  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Just noticed I left some code referencing the third selectbox in the getfirst function in code I posted, hopefully you spotted that and removed it. Perhaps this is why the second selectbox isn't updating?

    I'm not familiar with JSON so can't really comment on that code.

  • #7
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah thanks for that, i got it to work, still got a couple of small problems, as those lines in the first function cleared the third drop down if you re-selected something from the first drop down, so i'm just trying to implement the same but clear the text box instead.

    also when a price is shown a '|' is shown infront of the price, suppose previously it would act as a delimiter in a drop down list.

  • #8
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just managed to fix one of my problems, but when a price is shown in the text box the '|' is always shown before the price.

    is there any way of removing this?

  • #9
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nobody have any ideas why the pipe character is displaying infront of the price?

  • #10
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    I see the pipe character is something to do with JSON.
    The pipe character was previously being stripped out by the split() method, see the fillPrez function.
    I would argue that since you are returning only one value the pipe character is unnecessary but as I said I don't know a lot about JSON.
    Anyway if you want to get rid of the pipe character you could use the same method as the fillPrez function or you could simply use the replace method;

    Code:
    xmlreply.responseText.replace("|",""))

  • #11
    Kal
    Kal is offline
    Regular Coder
    Join Date
    Dec 2005
    Posts
    309
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for and for all your help, works great.


  •  

    Posting Permissions

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