jquery .serialize() 不適用於動態加載的表單

Question

我有一個通過圖像點擊觸發的ajax提交的表單，提交表單后它被返回並重新加載。 但是 .serialize() 已停止工作。

這是一些代碼：

<form id="myForm" action="/someFormSubmitPage.do">
    <div id="myFormQuestions">
        <input type="text" name="fred"/>
        <!--more inputs-->
    </div>
 <img id="submitButton" src="some/path">
</form>

提交按鈕的圖像通過 .click 在 jquery 下面的函數中觸發

var serializedForm = $("#myForm").serialize();
$.post("/someFormSubmitPage.do", serializedForm, function( data ) {
    //do some stuff with the data
    $( "#myFormQuestions" ).html(data);
});

這在第一次提交時工作正常，但在第二次提交時，盡管用戶重新填充了輸入，但 var 序列化的表單最終還是一個空字符串

編輯：我現在已經包含了一個JSFiddle ，但是，我不確定如何使用 ajax tesing echo 的東西。

Answer 1

你能看看回復的回復嗎？ 因為我認為這是DOM元素識別的問題。 問題可能是這樣的：

你有兩個匹配$('#myForm')選擇器的元素，jQuery丟失了。 嘗試使用$('form#myForm')修改此選擇器。 嘗試一下，然后在這里發布您的回復。

現在，我已經檢查過它是否正常工作，代碼是：

<div>
    <form id="myForm">
        <div id="inputs">
            <input name="some" type="text" />
        </div>
        <input type="button" id="my-form-submit" value="submit" />
    </form>

</div>
<script type="text/javascript">
    $('input#my-form-submit').on('click', function(e) {
        var data = $('form#myForm').serialize();
        $.post('/test.php', data, function(response) {
            $('div#inputs').html($(response).find('div#inputs'));
        });
    });
</script>

這樣做工作正常，每次提交頁面發布到自己，然后在響應中搜索輸入並將輸入放入表單輸入目錄。

Answer 2

順便說一句，雖然我已經看過JSFiddle幾次但不知道它是什么，我跟着鏈接和WOW，這是一個很棒的開發輔助工具！ 我絕對是把這個添加到我的工具箱中！

我修改了代碼以動態地將另一個文本輸入字段添加到表單中，每次單擊提交按鈕時，您將獲得另一個動態添加的輸入（動態名稱為“name”和id），並且警報報告表單中的所有命名元素。

我不知道你需要為要序列化的項定義name屬性！

這是我的小提琴： jsfiddle動態形式和序列化

在aspx頁面中：

<form id="myForm" action="">
<div id="myQuestions">
    <input type="text" name="entryOne"/>
</div>

單擊徽標以提交表單

在JQuery Enabled JavaScript中：

var counter = 0;

$(function(){
    $("#submitImage").click(function(){
        startAjaxFormSubmit();
    });
    //there is also another even that calls startAjaxFormSubmit
});


function startAjaxFormSubmit() {
    alert("startAjaxFormSubmit");
    var serializedForm = $("#myForm").serialize();
    alert("serializedForm is:\n=====\n"+serializedForm +"\n=====");

    $.post("/echo/html", serializedForm, function(data) {
        //do something with the data
        $("#myQuestions").append(data);

    });

    var div = $("#myQuestions");
    var $dynalabel = $('<br/>"<label>').text("Dynamic Input " + counter + ": ");
    div.append($dynalabel);
    var $dynaInput = $('<input type="text" name="dynaName_' + counter + '" id="id_' + counter + '"/>');
    div.append($dynaInput);
    counter++;
}

Answer 3

我有同樣的問題並通過調用“刪除”，然后“appendTo”修復它

var serializedForm = $ ("# myForm").serialize();
$ .post ("/someFormSubmitPage.do" serializedForm, function (data) {
    
     $ ("#myFormQuestions").remove();
     $ (data).appendTo('#myFormQuestions');
});

Answer 4

我添加這個是為了幫助其他人，引導程序示例通常不使用輸入字段中的名稱標簽。 這引起了我的注意，我想知道為什么我不能從我的表單中序列化數據。 簡單地說，確保您的輸入字段中有名稱標簽。

Answer 5

那么，我想在Ajax請求時，完整的表單會被更新的HTML替換掉？ 在這種情況下，您可以重新加載表單所在的整個div，以便在重新加載表單時再次綁定事件處理程序。 例如：

<div id="myFormDiv">
     <form id="myForm" onsubmit="myAjaxCall(this)">
     <!-- inputs-->
     </form>
     <img onclick="$('#myForm').submit()"/>
</div>

<!-- javascript-->
function myAjaxCall(form){
     serializedForm = $(form).serialize();
     $('#myFormDiv').load('/submitpage.php'),{formdata:serializedForm}, function(data)(){});
}

或者，當然，如果你說它沒有在提交時完成，你可以做<img onclick="myAjaxCall($('#myForm'))"

Answer 6

如果'type =“text'之后缺少的雙引號不僅僅是你帖子中的拼寫錯誤，而且還是你服務器響應中的實際HTML（雖然自第一次調用serialize（）以來就不是真正的HTML頁面，但是它是可能是什么導致了這個問題。

---

添加雙引號的小提琴：

http://jsfiddle.net/dCDwB/

---

沒有它：

http://jsfiddle.net/dCDwB/2/

（見控制台，它發送“fred + value％3D =”而不是“fred =”）