使用 PHP 从动态表单提交多个数据

Question

我正在尝试以相同的通用形式提交使用 jQuery append() 方法生成的多个输入。我是 jquery 和 AJAX 的新手。

这个 HTML 表单是我的一个非常接近的例子。

<form id="dynamic_form" method="POST">
    <select name="account1" id="account1">
        <option>Choose option</option>
        <option>Option 1/option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select><br>
    <select name="task1" id="task1">
        <option>Choose option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select><br>
    <textarea name="note1" id="note1" required="required"></textarea><br>

    <button type="button" id="addbtn">Add</button>
    <button type="reset">Reset</button>
    <input type="Submit" id="submit" value="Submit"/>
</form>

这是我的 jquery 添加表单代码

$(document).ready(function(){
        var i = 1;
        $('#addbtn').click(function(){
            i++;
        $('#dynamic_form').append('<select name="account'+i+'" id="account'+i+'"><option>Choose option</option><option>Option 1/option><option>Option 2</option> //etc ...');
});

当点击添加按钮时，我会看到新的下拉菜单和带有递增 ID 的输入字段。

我不知道在我的情况下应该如何使用 AJAX 将我的数据发送到“submission.php”并将其提交到我的 sql server 数据库

Answer 1

您可以使用serialize() 方法构建form 中所有内容的查询字符串。然后，您可以将此信息提供给 $.ajax() 请求的 data 属性，以将信息发送到您的 PHP 逻辑。

还请注意，当您使用 PHP 时，您无需担心在运行时创建增量 name 和 id 属性。只需在每个字段名称后加上[]，PHP 就会将这些值解释为一个数组。反过来，这意味着所有帐户 select 元素都是相同的，因此您可以简单地 clone() 它们来代替。这使得 JS 更加整洁和简洁。

最后，您使用append() 到form 会将新内容放在按钮之后。您可能需要考虑选择最后一个 account[] 元素并改用 insertAfter()：

jQuery($ => {
  let $form = $('#dynamic_form').on('submit', function(e) {
    e.preventDefault();
    let data = $(this).serialize();
    console.log(data);

    /*
    $.ajax({
      url: 'yourpage.php',
      method: 'post',
      data: data,
      success: function() {
        console.log('It worked!');
      }
    });
    */
  });

  $('#addbtn').click(function() {
    let $last = $form.find('select[name="account[]"]:last');
    $last.clone().insertAfter($last);
  });
});

select,
textarea {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="dynamic_form" method="POST">
  <select name="account[]">
    <option>Choose option</option>
    <option>Option 1/option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
  </select>
  <select name="task[]">
    <option>Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <textarea name="note" required="required"></textarea>

  <button type="button" id="addbtn">Add</button>
  <button type="reset">Reset</button>
  <input type="Submit" id="submit" value="Submit" />
</form>