添加新字段並更新隱藏字段

Question

高中學生可以爲他們完成的每個年級添加GPA成績。
但學生需要重新提交表格，如果他們想要添加多個年級。
我想讓他們用一個jQuery腳本在同一個表單中添加新的字段。
我在網上找到了一些，但他們沒有解決我的需求;我必須在字段名稱末尾添加數字，例如每當用戶添加一個框時，請輸入classYEAR1,classYEAR2,gpa1,gpa2。並且應將總條目數添加到totalGRADES字段中。否則我的後端代碼不工作...
我不知道我是否設法正確解釋它，我一直在嘗試使它從今天早晨起工作......

期待您的幫助。

   <form action="?Process=UpdateGrades" method="post" class="frm grades-form"> 
        <fieldset> 
         <p> 
          <label>class year</label> 
          <select name="classYEAR"> 
           <option value="12">12th grade</option> 
           <option value="11">11th grade</option> 
           <option value="10">10th grade</option> 
           <option value="9">9th grade</option> 
          </select>          
         </p>                   
         <p> 
          <label>GPA</label> 
          <input type="text" name="gpa" size="55" value="" /> 
         </p> 
         <p> 
          <input type="hidden" name="totalGRADES" value="1"> 
          <input type="hidden" name="x" value="p"> 
          <input type="submit" name="submıt" value="gönder" class="btn submit"> 
         </p> 
        </fieldset> 
       </form>  

Answer 1

添加新框：

首先做一個容器設置要克隆class="clone"的地方，並提供新的箱子的地方出現id="container"

<div id="container"> <!--# Unique id //--> 
    <div class="clone"> <!--# Class, after cloning it is duplicated, so id should not be used //--> 
    <p> 
     <label>class year</label> 
     <select name="classYEAR"> 
     <option value="12">12th grade</option> 
     <option value="11">11th grade</option> 
     <option value="10">10th grade</option> 
     <option value="9">9th grade</option> 
     </select>          
    </p> 
    <p> 
     <label>GPA</label> 
     <input type="text" name="gpa" size="55" value="" /> 
    </p> 
    </div> 
</div> 

然後，下面結合代碼到具有克隆功能的添加按鈕：

$('#addButton').click(function() { 

    count = $('div.clone').length; 
    # Counts the total number of boxes. Modify with +1 or something as you need 

    $('div.clone:first') 
    .clone() # Clone the code 
    .find('select') 
     .attr('name', 'classYEAR' + count) # Modify the select name with a number subfix 
     .end() # Back to parent 
    .find('input') 
     .attr('name', 'gpa' + count) # Modify the input name with a number subfix 
     .end() # Back to parent  
    .appendTo('#container'); # Put in container 
}); 

向上日期totalGRADES，先添加一個id更容易搜索

<input id="totalGRADES" type="hidden" name="totalGRADES" value="1"> 

然後綁定這的onsubmit

var count = $('div.clone').length; # This counts the total number of boxes 
$('#totalGRADES').val(count); # This updates the value of the hidden input 

Answer 2

下面的代碼假定您有某種添加按鈕，一個id，只是改變到任何按鈕的ID您使用添加字段是「Add按鈕」的名字。

$('#addButton').click(function() { 
    var count = parseInt($('[name="totalGrades"]').val()); 
    count = count + 1; 
    $('fieldset').append('<p><label>class year</label><select name="classYEAR'+count+'">{{options}}</select></p>{{GPA Fields}}'); 
    $('[name="totalGrades"]').val(count); 
}); 

第一行添加一個動作偵聽器添加按鈕，當點擊時觸發其中的功能。接下來的兩行讀取當前的條目數並將其增加1。之後的下一行將html代碼附加到fieldset元素，並在相關的增量計數器中替換以設置名稱屬性。第二行到最後一行用新計數更新頁面上隱藏的totalGrades字段。

有可能是一個更優雅的解決方案，不需要你使用.clone（）或類似的代碼在javascript中對HTML進行硬編碼，但這是一個快速和骯髒的解決方案。