CODEWITHSUNDEEP
phphtmlajaxformsjquery
Celestino Reyes
Celestino Reyes

Reputation: 13

Ajax form, 2 drop downs with external source

is there a way once I select from a drop down list on a form that it will select all models from the first dropdown in a second drop down

Here is my code

        <form>
            <div class="landing_quote_left">
                <table cellpadding="0" cellspacing="8" border="0">
                    <tr>
<td>
                            <label for="ajax_make_id" class="landing_quote_label">Make:</label>
                        </td>
                        <td>
                            <span id="ajax_make_select"><select name="2f_make_id" id="ajax_make_id" style="width: 170px;" onchange="Landing.getMakeFace(this.value);"><option value="999">Select a Make</option><option value="1">Acura</option><option value="2">Audi</option</select></span>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="ajax_model_id" class="landing_quote_label">Model:</label>
                        </td>
                        <td>
                            <span id="ajax_model_select">

                                <select name="2f_model_id" id="ajax_model_id" style="width: 170px;" onchange="Landing.getModelFace(this.value);">
                                    <option value="">Loading...</option>
                                </select>
                            </span>
                        </td>
                    </tr>
                </table>
            </div><!-- END landing_quote_left -->
        </form>

So if I select Acura, the second drop down will show a list of all models ie MDX RDX RL TL TSX ZDX

If possible, how would I have both dropdowns load from different files. {php or xml or whatever else is possible}

Thanks for your time!

Upvotes: 0

Views: 155

Answers (1)

aziz punjani
aziz punjani

Reputation: 25796

Here's some rough code on how to accomplish this.

On page load, populate dropdown1. 

$(function(){
    $.get('file1.php', function(data){
       $('#dropdown1').html( data ); 
    });

    // on change of dropdown1 populate dropdown2 with the respective data 
    $('#dropdown1').change(function(){
        $.get('file2.php',{ make: $(this).val() }, function(data){
            $('#dropdown2').html( data ); 
        }); 
    }); 
});

So in your file2.php you can check the $_GET array for the make variable passed in, then you can send back all the options for that model. You could also send back json instead of html but this gives you a rough idea of how to do it and i think it's best to keep it simple at first.

Upvotes: 1

Related Questions