[英]ajax send value of dynamically created input boxes
I would like to send the values of dynamically generated input boxes to the php page. 我想将动态生成的输入框的值发送到php页面。 I got the below code which appends input box on click from another question and was wondering how could I be able to pass the values as an array to php page. 我得到了下面的代码,该代码在单击另一个问题时附加了输入框,并且想知道如何将值作为数组传递给php页面。 can someone help me out? 有人可以帮我吗?
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<button class='sbn'>Add</button><!--this adds input boxes-->
<button class=submit">submit</button>a
$(document).ready(function() {
$(".sbn").click(function() {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
var fName = $("<input type='text' class='fieldname form-control xd'/>");
var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$('.submit').click(function(){
$.ajax({
method:'POST',
url:'test.php',
data:{},
success:function(response){
//
}
});
});
});
Corrected many items in the code. 更正了代码中的许多项目。 Here is the form (with proper form tags added) - 这是表格(添加了适当的表格标签)-
<form name="myForm" action="" method="post">
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
</form>
<button class='sbn'>Add</button>
<!--this adds input boxes-->
<button class="submit">submit</button>
Here is the jQuery - 这是jQuery-
$(".sbn").click(function () {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
var fName = $("<input name='foo[]' type='text' class='fieldname form-control xd'/>"); // name added to element
var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
removeButton.click(function () {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$('#buildyourform').append(fieldWrapper);
});
$('.submit').click(function () {
var formValues = $('.fieldname').serialize(); // gathers all of the form data from the elements with the class fieldname
$.ajax({
method: 'POST',
url: '/echo/html/', // this is for the jsfiddle test, change to your URL
data: formValues, // put the variable here
success: function (response) {
//
}
});
});
Most notably here is the addition of a name to the input fields and serializing only the ones that we want. 最值得注意的是,在输入字段中添加了一个名称,并仅序列化了我们想要的名称。 You cannot post an input without a name, it just fails silently. 您不能发布没有名称的输入,它只会静默失败。 Here is a working example Open the browsers console to see the posted data. 这是一个工作示例。打开浏览器控制台以查看发布的数据。
Try this: 尝试这个:
HTML: HTML:
<form>
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<button class='sbn'>Add</button><!--this adds input boxes-->
<button class="submit">submit</button>
</form>
JS: JS:
$(document).ready(function() {
$(".sbn").click(function(e) {
e.preventDefault();
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class='fieldwrapper' id='field" + intId + "'>");
var fName = $("<input name='test" + intId + "'' type='text' class='fieldname form-control xd'/>");
var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$('form').submit(function(e) {
e.preventDefault();
var postdata = $(this).serializeArray();
$.post('test.php', postdata , function (response) {
console.log(response);
//
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.