Question

我遇到了一个问题，我正在使用的表单中的输入字段只能在特定条件下显示。我选择使用jQuery的dialog()方法显示它。但是，在调用dialog()方法之后，对jQuery的serialize()方法的任何后续调用都将从生成的字符串中省略该输入字段。我怀疑这是由于dialog()从表单中移除元素或沿着这些行的某些东西，但我似乎无法找到修复。

以下是重现问题的HTML和JS：

HTML：

<form id="form">
    <div id="dialog" style="display: none;">
        <input type="text" name="foo" value="bar" />
    </div>
    <!-- Other form inputs here -->
</form>

JS：

alert($('#form').serialize()); // "foo=bar"
$('#dialog').dialog({
    buttons: {
        OK: function() {
            alert($('#form').serialize()); // Should be "foo=bar", but is "" instead?
            $(this).dialog('close');
            alert($('#form').serialize()); // Still "".
            setTimeout(function() {
                alert($('#form').serialize()); // Still "".
            }, 0);
        }
    }
});

修改

表单中还有其他几个输入不应显示在对话框中，因此将form标记放在对话框div中对我来说不是一个选项。

Answer 1

是的，这是因为对话框改变了标记，因为它可以在对话框中包含表单标记

<div id="dialog" style="display: none;">
    <form id="form">
        <input type="text" name="foo" value="bar" />
    </form>
</div>

编辑 - 如果你不能把表格标签你必须使用隐藏字段并保持与jquery同步，我害怕

<form id="form">
    <div id="dialog" style="display: none;">
        <input type="text" name="foo_dialog" class='dialog' value="bar" />
    </div>
    <input type="hidden" name="foo" value="" />
    <!-- Other form inputs here -->
</form>

JS

$('input.dialog').keyup(function(){
    var name = this.name.replace('_dialog', '');
    $('input:hidden[name='+name+']').val(this.value);
});

Answer 2

当我用Ajax加载的form内容填充对话框并将其序列化时，我遇到了类似的问题。

form被序列化如下：

var form = $('#encuesta').serialize();
function genera() {

    $.ajax({
        type: "POST",
        url: "genera_encuesta.php",
        data: form,
        success: function(datos) {
        $('#res1').html(datos);
        }
    });

}

我解决了这个问题：

function genera() {
    var form = $('#encuesta').serialize();
    $.ajax({
        type: "POST",
        url: "genera_encuesta.php",
        data: form,
        success: function(datos) {
             $('#res1').html(datos);
        }
    });     
}

...

希望它可以帮助别人不浪费很多时间。

Answer 3

@NicolaPeluchetti提供了一个可能的解决方案，但我发现这个解决方案不那么麻烦了：

在dialog()来电选项中，我添加了以下内容：

close: function() {
    $(this).appendTo('#form');
}

基本上，当对话框关闭时，它会将#dialog重新绑定到#form。如果您需要在对话框打开时将输入作为表单的一部分，这将无济于事，但在我的情况下，我只需要在对话框关闭后才能使用它。

jQuery对话框/序列化冲突？

3 个答案: