populate combo via AJAX.

Hi,

I already know a bit AJAX, but i got confused with this one...

I have 2 combos, combo1 and combo2,
I want to populate combo2 based on the selected item value of combo1.

How exactly do i accomplish this via AJAX, do i put combo2 on an external PHP page and populate the data there?

And then show the AJAX result via innerhtml ?

Need help guys.. thanks in advance.

 

you are correct in what you need to do here - there are two ways to do this - assuming that you are referring to select dropdowns as 'combos' here...

attach an event to dropdown 1 / whatever. onchange -> ajax to a php script that produces a list based on the parameter. if you decide to go with changing the innerHTML, then the PHP script needs to produce the whole element.

in reality, you are looking at something like:

<select id="combo1" name="combo1">
<option value="1">choice one</option>
<option value="2">choice two</option>
</select>

<div id="combo2parent">
<select id="combo2" name="combo2">
<option value="0">Please select combo 1</option>
</select>
</div>

HTML:

have the PHP script produce the whole element like so:

<select id="combo2" name="combo2">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
...  loop your DB results. 
</select>

HTML:

and then have your js oncomplete update the innerHTML of your parent element for 2, eg. document.getElementById("combo2parent").innerHTML = this.response.text;

a select element does not have innerHTML in the sense we usually apply, although options are html elements...

there is another cleaner way of doing things - return the list as json data or an array, for example:

[{
    option: "combo 2 choice 1", 
    value: "1"
},{
    option: "combo 2 choice 2", 
    value: "2",
    selected: "true"
}, ... ]

PHP:

you then evaluate and jsonDecode the object and use the data to build the options as children of combo2 - but only take this route if you have a decent framework to hand that can deal with json and loop them / hashes... certainly more elegant.

 

dimitar!

Thanks for the reply... im working on it the way i thought it would be.

Once every thing is loaded correctly. Would my form work like a normal form?

Thanks again.

 

yes it would. it will become a part of the DOM and upon submit, the browser gathers the same data as it would if it were built at time of rendition via php/html. just make sure the output has name="element2" if you rely on $_POST to be there.

 

Got it, that's great... and i managed to work it out
can you please explain the second part of your post?

"just make sure the output has name="element2" if you rely on $_POST to be there."

Thanks.

 

well - when you deal with small forms etc via ajax, you often tend to reference things via their IDs or css selectors - and neglect using the name=blah property, which is what arrives as the array key as a part of the $_POST array, that's all. if you <input name=foo id=foo value=blah>, you effectively assign $_POST['foo'] = 'blah'; whereas <input id=foo value=blah> allows you to read and use the value via js but upon a normal form submission, $_POST['foo'] will be null.

when i ajaxify forms, I tend to build a big array of json data like {foo: 'blah'} with the verified/trimmed/washed variables that I pass on to the ajax processor in a 'clean' way, although this approach can prevent functionality w/ javascript disabled... but we are not 1999 anymore - you want to go places, you put petrol in your car.

 

got it got it !!
Thanks so much for the explanation.. rep comming towards you way !!

 

A nice example about this: http://www.koolphp.net/support/demos/#koolajax.example_dynamic_combobox

 

This was already done a long time ago.. thanks any way.