[英]Adding dynamic form data to ajax post request
Say i have a form in html with the following content 说我在html中有以下内容的表格
<form>
<div id="si-main">
<button id="si-btn">Add new content</button>
<div class="si-content">
<input type="text" class="si-input" name="content">
</div>
</div>
<input type="submit" id="si-submit" value="Submit">
</form>
Now i wanna append the ".si-content" div when i click the "#si-btn" i do that using this script in JS 现在,当我单击“#si-btn”时,我想附加“ .si-content” div,我在JS中使用此脚本执行此操作
$('#si-btn').click(function() {
$('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content"></div>')
})
I then submit the form like this in JS 然后,我在JS中提交这样的表单
$('form #si-submit').click(function() {
var data_to_send = {}
$('form').find('.si-input').each(function() {
if ($(this).hasClass('si-input')) {
data_to_send[$(this).attr('name')] = $(this).val()
}
})
//NEXT I SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})
Now the problem is each i append it adds a new "si-content" div. 现在的问题是,每个我追加的内容都会添加一个新的“ si-content” div。 But when i send the data it only sends the content of the first div. 但是,当我发送数据时,它只发送第一个div的内容。 Can someone tell me what would be the best way add the data in this case ? 有人可以告诉我在这种情况下添加数据的最佳方法是什么?
try: 尝试:
$('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content[]"></div>');
$('form #si-submit').click(function() {
var data_to_send = $(this).parent('form').serialize();
//NEXT SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.