...

View Full Version : drop down single default option



Kal
07-05-2007, 11:04 AM
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.




<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>






<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>

mcjwb
07-05-2007, 10:06 PM
Something like this?


<!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.

Kal
07-06-2007, 08:58 AM
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.

mcjwb
07-06-2007, 11:46 AM
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.

Kal
07-06-2007, 11:54 AM
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.)


/*
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() }
}





$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'];
}

mcjwb
07-06-2007, 03:20 PM
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.

Kal
07-06-2007, 04:12 PM
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.

Kal
07-06-2007, 04:49 PM
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?

Kal
07-09-2007, 10:54 AM
nobody have any ideas why the pipe character is displaying infront of the price?

mcjwb
07-09-2007, 01:04 PM
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;


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

Kal
07-09-2007, 01:34 PM
thanks for and for all your help, works great.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum