CODEWITHSUNDEEP
javascriptjqueryformsonchange
Harsh Gupta
Harsh Gupta

Reputation: 173

jQuery dynamic form display on select option

I'm using the following jQuery function to show a specific form on selection of a value in a select box.

<script>
$("#selectCategory").on("change", function() {
    $("#" + $(this).val()).show();
})
</script>

The select option value is matched with the form id. The problem I'm facing is that on the first onchange event, the code works alright. But on subsequent onchange events, the new form is appended onto the existing form. For instance, if I select #xyz option, then the #xyz form is rendered. But now if I change my select option to #abc, the #abc form is appended to the #xyz form.

If a user changes his selection, the original form should be removed and then the new form should be rendered. For example, if I choose #abc option after choosing #xyz option, the #xyz form should be removed, and the #abc form should be displayed in its place.

<select id="selectCategory" name="category" style="width:100%;" tabindex="1">
        <option value=""></option>
        <option value="book">Textbooks/Course Material</option>
        <option value="compexam">Entrance Exam Books</option>
</select>

<form class="upload" id="book" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none">
<form class="upload" id="compexam" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none" >

I hope this was comprehensible!

Upvotes: 0

Views: 2529

Answers (5)

Timon
Timon

Reputation: 2702

Take a look at this solution:

https://jsfiddle.net/g2cdygd0/

JS:

$("#selectCategory").on("change", function() {
    $('.formShownBySelect').hide();
    $("#" + $(this).val()).show();
});

HTML: 

<select id="selectCategory">
     <option value="xyz">XYZ</option>
     <option value="abc">ABC</option>
</select>

<form id="xyz" class="formShownBySelect">
     <label>I'm form XYZ</label>
</form>

<form id="abc" class="formShownBySelect">
    <label>I'm form ABC</label>
</form>

CSS:

#xyz, #abc {
     display: none;
}

Hope it helps!

Upvotes: 0

Christoph
Christoph

Reputation: 2053

$("#selectCategory").on("change", function() {
  $(".showable").hide();
  $("#" + $(this).val()).show();
})
div {
  width: 40px;
  height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="showable" id="div1" style="background-color: #f00; display: none;"></div>
<div class="showable" id="div2" style="background-color: #0f0; display: none;"></div>
<div class="showable" id="div3" style="background-color: #00f; display: none;"></div>
<br>
<select id="selectCategory">
  <option value="">-- please choose --</option>
  <option value="div1">Red</option>
  <option value="div2">Green</option>
  <option value="div3">Blue</option>
</select>

Upvotes: 0

Joshua Arvin Lat
Joshua Arvin Lat

Reputation: 1039

Solution

You can hide all the other forms first then show only the specific target form after the event like this:

<script type="text/javascript">
    $("#selectCategory").on("change", function() {
        $("form").hide();
        $("#" + $(this).val()).show();
    });
</script>

Upvotes: 1

Vinod Kumar
Vinod Kumar

Reputation: 981

You should hide the other forms then...

<script>
$("#selectCategory").on("change", function() {
    $("form").hide(); //Hide all forms first
    $("#" + $(this).val()).show(); //Show only what you want
})
</script>

Hope this helps...

Upvotes: 1

Code Lღver
Code Lღver

Reputation: 15603

Try this:

<script>
$("#selectCategory").on("change", function() {
    $("form").hide();
    $("#" + $(this).val()).show();
})
</script>

First you need to hide the form and then show form which you want.

In your case, You are only showing the forms means each time one form will display and will append with other.

Upvotes: 1

Related Questions