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