選択とクローンからの値を取得フォームの回数

Question

私は選択ボックスを持っている、私は値を選択して取得した後、ユーザーが "1"を選択したように、選択した値に従ってページに値のフォームが追加されますフォームが追加され、ユーザーが「10」10フォームを選択した場合。何も指定されていない場合、または表示されないフォームが選択されていない場合も同様です。それは私のjsの問題であるようです、それはフォームを追加しますが、私が期待していない他のフォームも追加します。

<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

<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); 
} 

} 

Answer 2

希望はこれでいいですね。

$(function() { 
 
\t $("#travellersNumber").on('change', function() { 
 
\t \t var traveller = $(this); 
 
\t \t var form = $("#original"); 
 
\t \t var heading = $('.bookForm-heading'); 
 
\t \t var travellerValue = parseInt(traveller.val()); 
 
\t \t $("#original").hide(); 
 

 
\t \t $("[id*='original_']").not("#original").remove(); //Remove all forms except original form 
 

 
\t \t for (i = 0; i < travellerValue; i++) { 
 
\t \t \t if (i == 0) { 
 
\t \t \t \t heading = heading.html('Traveller 1 Information'); 
 
\t \t \t \t $("#original").show(); 
 
\t \t \t } 
 
\t \t \t else 
 
\t \t \t { 
 
\t \t \t \t var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail"); 
 
\t \t \t \t cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information'); 
 
\t \t \t } 
 
\t \t  
 
\t \t } 
 
\t }); 
 
});

<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> 
 
\t .bookForm { 
 
\t \t display: none; 
 
\t } 
 
</style> 
 

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

 
<div class="bookForm" id="original"> 
 
\t <div class=col-xs-12> 
 
\t \t <h3 class="bookForm-heading">Submit your details</h3> 
 
\t </div> 
 
\t <div class="col-xs-12 col-md-3"> 
 
\t \t <div class=form-group> 
 
\t \t \t <label>First Name</label> 
 
\t \t \t <input class=form-control name=firstName> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div id="travellersDetail"></div>

Answer 3

問題は、あなたが追加した古い形式を削除していないことです。

$(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>