Ajax发送动态创建的输入框的值

Question

我想将动态生成的输入框的值发送到php页面。 我得到了下面的代码，该代码在单击另一个问题时附加了输入框，并且想知道如何将值作为数组传递给php页面。 有人可以帮我吗？

<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){
            //
        }
    });

 });
 });

Answer 1

更正了代码中的许多项目。 这是表格（添加了适当的表格标签）-

<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>

这是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) {
            //
        }
    });
});

最值得注意的是，在输入字段中添加了一个名称，并仅序列化了我们想要的名称。 您不能发布没有名称的输入，它只会静默失败。 这是一个工作示例。打开浏览器控制台以查看发布的数据。

Answer 2

尝试这个：

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：

$(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);
                  //
            });
        });
    });