Get value from select and clone form number of times

Question

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.

<div class="form-group">
                                        <label>Number of travellers</label>
                                        <select class="form-control" id="travellersNumber">
                                            <option value="0">Select Numbers Of Travellers</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>

<div class=bookForm>

<div class=col-xs-12>

<h3 class=bookForm-heading>Submit your details</h3>

</div>

<div class="col-xs-12 col-md-3">

<div class=form-group>

<label>First Name</label>

<input class=form-control name=firstName>

</div>
</div>
</div>

.bookForm{
    display:none;
  }

function bookFormToggle(){
    var traveller = $("#travellersNumber");
    var form = $(".bookForm");
    var heading = $('.bookForm-heading');
    function unhideForm(){
        var travellerValue = parseInt(traveller.val());
        for(i=0;i<travellerValue;i++){
                heading = heading.html('Traveller '+ (i+1) +' Information');
                form.clone().insertAfter(form);
        }
    }
    traveller.on("change",unhideForm);
    unhideForm();
}
bookFormToggle();

Answer 1

Hope this is what you want.

 $(function () { $("#travellersNumber").on('change', function () { var traveller = $(this); var form = $("#original"); var heading = $('.bookForm-heading'); var travellerValue = parseInt(traveller.val()); $("#original").hide(); $("[id*='original_']").not("#original").remove(); //Remove all forms except original form for (i = 0; i < travellerValue; i++) { if (i == 0) { heading = heading.html('Traveller 1 Information'); $("#original").show(); } else { var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail"); cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information'); } } }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .bookForm { display: none; } </style> <div class="form-group"> <label>Number of travellers</label> <select class="form-control" id="travellersNumber"> <option value="0">Select Numbers Of Travellers</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="bookForm" id="original"> <div class=col-xs-12> <h3 class="bookForm-heading">Submit your details</h3> </div> <div class="col-xs-12 col-md-3"> <div class=form-group> <label>First Name</label> <input class=form-control name=firstName> </div> </div> </div> <div id="travellersDetail"></div> 

Answer 2

The problem is that you are not removing the old forms that you have added.

 $(document).ready(function(){ var traveller = $('select[name="trav"]'); traveller.change(function(){ $('.bookForm').not('.bookForm:first').remove(); var travellerValue = traveller.val(); var form = $('.bookForm:first'); for(i=travellerValue;i>1;i--){ var newAdd = form.clone().insertAfter(form); newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information'); } $('.bookForm').show(); }); }); 

 .bookForm{ background-color:green; padding:5px; margin:5px; } #travellersNumber{ width:150px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label>Number of travellers</label> <select class="form-control" id="travellersNumber" name="trav"> <option value="0">Select Numbers Of Travellers</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="bookForm row"> <div class="col-xs-12"> <h3 class="bookForm-heading">Submit your details</h3> </div> <div class="col-xs-12"> <div class="form-group"> <label>First Name</label> <input class="form-control" name="firstName"> </div> </div> </div> 

Answer 3

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>

function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}

}