我试图在同一个通用表单中提交多个用jQuery append()方法生成的输入。 我是jquery和AJAX的新手。
这个HTML表单是我的一个近似例子。
Choose option
Option 1/option>
Option 2
Option 3
Option 4
Option 5
Choose option
Option 1
Option 2
Option 3
Add
Reset
这是我的jquery添加表单代码
$(document).ready(function(){
var i = 1;
$('#addbtn').click(function(){
i++;
$('#dynamic_form').append('Choose optionOption 1/option>Option 2 //etc ...');
});
当点击添加按钮时,我得到了新的下拉菜单和输入字段,ID不断增加。
我不知道在我的情况下,我应该如何使用AJAX将我的数据发送到 "submitment.php",并提交给我的 sql服务器 数据库
0
投票
你可以使用 serialize() 方法来建立一个包含所有内容的querystring。form. 然后你可以把这个提供给 data 的财产 $.ajax() 请求来发送信息到你的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;
}
Choose option
Option 1/option>
Option 2
Option 3
Option 4
Option 5
Choose option
Option 1
Option 2
Option 3
Add
Reset