jQuery的追加輸入不傳送數據到服務器

Question

在我div與classsets，我要動態地追加到最後一個元素另一套reps和kilos輸入字段，使用戶可以添加他需要儘可能多的。我已經使用下面的jQuery代碼完成了該操作，但是當我提交輸入數據時遇到了問題。只有原始input字段的值纔會發送到服務器。

我怎麼能寫我的jQuery代碼，以便新的div的輸入數據也被提交？

HTML表單：

<!-- Main body of page --> 
    <main role=」main」> 
     <div id="description"> 
      <p>Fill in your workout and then click <i>Save Workout</i> when you are done.</p> 
      <p>To add an extra group for <strong>reps</strong> and <strong>kg's</strong>, click the <i class="fa fa-plus-circle"></i> sign on your screen.</p> 
     </div> 

     <div id="forms"> 
      <form id="workout-form" name="workout-form" action="newworkout/workout" method="POST" enctype="application/x-www-form-urlencoded"> 

       <div class="workouts"> 
        <label for="exercise" class="labels"><strong>Exercise</strong></label> <input type="text" name="exercise" id="exercise" placeholder="Which exercise?" autofocus /> 
        <label for="musclegroup" class="labels"><strong>Muscle-Group</strong></label> <input type="text" name="musclegroup" id="musclegroup" placeholder="Which muscle-group?" /> 

        <div class="sets"> 
         <label for="reps" class="labels">Reps</label> <input type="text" name="reps" id="reps" class="reps-column" placeholder="How many reps?" /> 
         <label for="kilos" class="labels">Kg's</label> <input type="text" name="kilos" id="kilos" class="kilos-column" placeholder="How much Kg?" /> 
        </div> 
        <hr> 
       </div> 

       <button id="add-set"class="add-buttons" type="button"><i class="fa fa-plus-circle fa-2x"></i></button> 
       <button id="submit-workout" type="submit"><strong>Save Workout</strong></button> 
      </form> 
     </div> 

    </main> 

jQuery的：

$(document).ready(function() { 
    console.log('Document ready'); 

    // function to add sets to specific exercise 
    $('#add-set').on('click', function() { 
    console.log ('Button add-set clicked'); 

     var htmlSets = '<div class="sets">' + 
      '<label for="reps" class="labels">Reps</label><input type="text" id="reps" class="reps-column" placeholder="How many reps?" />' + 
      '<label for="kilos" class="labels">Kg\'s</label><input type="text" id="kilos" class="kilos-column" placeholder="How much Kg?" />' + 
     '</div>'; 

    $('div.sets:last').append(htmlSets); 
    }); 

}); 

Answer 1

的問題是，該元素沒有名字。它是name屬性，用於確定發送到服務器的值的密鑰，因此只有具有名稱的字段才能發送到服務器。

名稱添加到要素：

var htmlSets = '<div class="sets">' + 
    '<label for="reps" class="labels">Reps</label><input type="text" name="reps" id="reps" class="reps-column" placeholder="How many reps?" />' + 
    '<label for="kilos" class="labels">Kg\'s</label><input type="text" name="kilos" id="kilos" class="kilos-column" placeholder="How much Kg?" />' + 
'</div>'; 

您還創建具有相同ID，這可能會造成問題，如果你真的嘗試使用ID爲未來的某事的多個元素。