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>
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.
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.
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.
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.
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;
Before you post, read our: 
