使用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服务器数据库

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>