添加新字段并更新隐藏字段

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进行硬编码，但这是一个快速和肮脏的解决方案。