jQuery对话框/序列化冲突？

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中对我来说不是一个选项。

- FtDRbwLXw6

---

尝试使用类似于 var myForm = $('#form').serialize(); 的代码，并在 OK 中使用它？ - dotoree

@dotoree：如果我这样做了，那么输入的新值就不会被使用。 - FtDRbwLXw6

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

- Nicola Peluchetti

---

谢谢，但我不能在对话框中包含表单标签，因为它包含许多其他不应该显示在其中的字段。我会将此添加到我的问题中；很抱歉没有提及。 - FtDRbwLXw6

尼古拉，更明确地说，您的意思是因为#form在标记中位于#dialog之外，所以$('#dialog')对象无法引用$('#form')对象，对吗？ - user92254225

@AdamHoke 我的意思是，通过创建对话框，其中的元素被插入到新的标记中并从原始位置分离。我在对话框内使用表单，但整个表单都在对话框内，我不确定您是否可以仅在对话框内放置一个字段。 - Nicola Peluchetti

如果是这种情况，我可能需要考虑创建一个单独的表单，并对它们进行serialize()和合并。 - FtDRbwLXw6

@drrcknlsn 我想你可能需要使用一些隐藏字段的技巧，恐怕我更新了我的答案。 - Nicola Peluchetti

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

希望这能帮助某些人节省大量时间。

- Aurelio Tapia

Answer 3

@NicolaPeluchetti提供了一种可能的解决方案，但我发现这个方案更加简便：

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

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

基本上，当对话框关闭时，它会将#dialog重新插入到#form中。如果您需要输入内容在对话框打开时也作为表单的一部分，那么这种方式就不适用了。但在我的情况下，我仅需要在对话框关闭后才能使用该内容。

- FtDRbwLXw6