Question

我正在为表单进行内部编辑。我有两个div，其中一个持有显示元素，另一个持有输入形式。

单击编辑数据时，从显示div移动到输入表单。当我使用val（文本）时，我看到了更改，但是当我将表单序列化为json时，元素是旧的。

我需要一些帮助来理解这里的问题是什么？

以下是一些代码：

function editForm2(){
    $("#editLink").click(function() {
        if (this.text == 'Edit') {
            console.log('editing');
            $("#display div.edit").each(function(i) {
                var e = $("#input :input")[i];
                $(e).val($(this).text());
            });
            $("#display").hide();
            $("#input").show();
            $(this).text('Save');
        }
        else if (this.text =='Save') {
            // problem is here... When I serialize the form I got nothing ?!
            console.log('saving');
            console.log($("#form1 :input")); // old values

            var json_form = $('#form1').serializeObject();
            console.log(json_form); // old values?
            $(this).text('Edit');

            $("#display").show();
            $("#input").hide();
        }
    });

    console.log(this);
}

$(document).ready(function() {
    editForm2();
});

这里是html

<div class="editSection" id="display" >
    <div id="person_firstName" class="edit" width="200">
        Hello
    </div>
    <div id="person_lastName" class="edit">
        World
    </div>
</div>

<div class="editSectionEdit" id="input" >
    <form id="form1">
        <input name="person_firstName_in" type="text" class="edit" value="123" >
        <input name="person_lastName_in" type="text" class="edit" value="456" >
    </form>
</div><br/>

<div id="buttons">
    <a href="#" id="editLink">Edit</a>
    <a href="#" id="cancelLink">Cancel</a>
</div><br>

<pre id="result"></pre>

Answer 1

问题是.serializeObject()被萤火虫报告为未定义。

这是您的解决方案

var json_form = $('#form1').serialize();

Check here

jquery问题将数据从div复制到输入文本

1 个答案: