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>

提交按钮的图像通过jquery中的.click触发以下函数

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

这在第一次提交时工作正常，但在第二次提交时，尽管用户重新填充了输入，但var序列化形式最终仍为空字符串

修改我现在已经包含了JSFiddle，但是，我不知道如何使用ajax测试回声。

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 dynamically form and serialize

在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

所以，我想在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 5

如果'type =“text'之后缺少的双引号不仅仅是你帖子中的拼写错误，而且还是你服务器响应中的实际HTML（不是第一次调用serialize（）后的初始页面HTML似乎工作），这可能是导致问题的原因。

添加双引号小提琴：

http://jsfiddle.net/dCDwB/

没有它：

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

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

jquery .serialize（）不适用于动态加载的表单

5 个答案: