0

高中学生可以为他们完成的每个年级添加年级 GPA。
但是，如果学生想添加多个年级，则需要重新提交表格。
我想允许他们使用 jQuery 脚本在同一个表单中添加新字段。
我在网上找到了一些，但它们不能满足我的需求；每次用户添加一个框时，我都必须在字段名称的末尾添加数字，例如classYEAR1, 。并且应该将条目总数添加到该字段中。否则我的后端代码不起作用...... 我想知道我是否能够正确解释它，从今天早上开始我一直在努力让它工作......classYEAR2gpa1gpa2totalGRADES

期待您的帮助。

                <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>
4

2 回答 2

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

第一行向添加按钮添加了一个动作侦听器，该按钮在单击时触发其中的函数。接下来的两行获取当前条目数并将其加一。之后的下一行将 html 代码附加到 fieldset 元素，并在与设置名称属性相关的地方替换为递增的计数器。倒数第二行使用新计数更新页面上隐藏的 totalGrades 字段。

可能有一个更优雅的解决方案，它不需要您使用 .clone() 等在 javascript 中对 HTML 进行硬编码，但这是一个快速而肮脏的解决方案。

于 2013-05-30T04:09:30.960 回答
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
于 2013-05-30T04:11:47.830 回答