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

以下代码假设您有某种带ID的添加按钮，只需将“addButton”名称更改为您用于添加字段的按钮的ID。

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

Answer 2

添加新框

首先制作一个容器来设置要克隆的地方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

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

2 个答案: