Load Different Div using Ajax depending on Select Option

Question

I want to create a contact page that has a select box at the top and below a div containing a standard form.

However when the user selects a different option, the div containing the form changes to another form.

Something like this:

<select>
    <option value="form1">Initial Form</option>
    <option value="form2">Form 2</option>
    <option value="form3">Form 3</option>
    <option value="form4">Form 4</option>
</select>


<div class="contactFormContainer">
    Initial Form Here
</div>

Then on the external page with all the forms i guess it would look like this.

<div class="form1">FORM content 1</div>
<div class="form2">FORM content 2</div>
<div class="form3">FORM content 3</div>
<div class="form4">FORM content 4</div>

Does this make any sense?

Thankyou

why use ajax? just get the all the data that has to be stored in all the above mentioned divs and show one div and hide the rest 3 divs at a time — Robin, Sep 15 '15 at 06:45

score 0 · Answer 1 · answered Sep 15 '15 at 07:07

You can use $.load to load only element required from separate html page into the div as below.

$('select').on('change',function(){
    var value=$(this).val(); //value would be form1, form2, form3 etc.,
    var url="yourhtmlpagename.html ."+value;
    $(".contactFormContainer").load(url,function(){
       //anything you want to do after form is loaded
    })
});

Load Different Div using Ajax depending on Select Option

1 Answers1