CODEWITHSUNDEEP
javascriptphpjqueryhtml
TotalNewbie
TotalNewbie

Reputation: 1024

Displaying Dynamic Content With JS

I have a dropdown on a Page as follows, when the user selects a dropdown - I need for a different form to be produced underneath eg:

<div id = 'drop'>
    <select name = 'option'>
        <option>Opt1</option>
        <option>Opt2</option>
        <option>Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
</div>

How could I load a different form into the new Content div for each different option a user selects?

to expand on the question say I had a form:

<form id ='TestForm'>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

how would I use this:

$('select[name="option"]').change(function() {
   $('#NewContent').html(this.value);
});

to add the form as seen above?

Upvotes: 0

Views: 58

Answers (4)

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

Try this way : Fiddle link

<div id = 'drop'>
    <select name = 'option'>
        <option value="form1">Opt1</option>
        <option value="form2">Opt2</option>
        <option value="form3">Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
   <div id="form1" style="display:none">Form1</div>
   <div id="form2"style="display:none">Form2</div>
   <div id="form3"style="display:none">Form3</div>
</div>

$('select[name="option"]').change(function() {
    $('#NewContent').find('*').hide();
   $('#'+$(this).val()).show();
});

Upvotes: 1

Jai
Jai

Reputation: 74738

As you mentioned in your post:

I need for a different form to be produced underneath

$('select[name="option"]').change(function() {
   $('#NewContent').find('#'+this.value).show().siblings('form').hide();
}).change();

and change the form id like this:

<form id ='Opt1'>...</form>
<form id ='Opt2'>...</form>
<form id ='Opt3'>...</form>

Fiddle

Upvotes: 0

Felix
Felix

Reputation: 38102

You can use .change() event:

$('select[name="option"]').change(function() {
   $('#NewContent').html(this.value);
});

Fiddle Demo

Upvotes: 0

Guns
Guns

Reputation: 2728

You can use $('#NewContent').html('Some New Content'); to change the content using JQuery

More information is available here.

Upvotes: 0

Related Questions