未发送 Jquery UI 对话框中的输入？答案

【问题标题】：Input inside Jquery UI Dialog not being sent?未发送 Jquery UI 对话框中的输入？
【发布时间】：2010-12-09 08:40:12
【问题描述】：

我的对话框中的输入字段没有发布，我不确定为什么...

我已经在 mac firefox 和 safari 以及 windows IE 和 firefox 上进行了测试，结果相同，所以我认为它不是浏览器，如果我禁用对话框，字段会正常发布。

我重新阅读了 jquery ui 文档，但找不到我做错了什么……对话框似乎不太可能不支持输入。

这是我正在使用的代码的精简版：

<script type="text/javascript">
 $(document).ready(function(){
  $("#dialog").dialog({
   autoOpen: false,
   buttons: {
    "OK": function() {
     $(this).dialog('close');
    }
   }
  });
  $("#publishSettings").click(function(){
   $("#dialog").dialog('open');
  });
 });
</script>

<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
 <div id="dialog">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 </div>
 <input type="submit" name="pubArticle" value="Publish">
</form>

没有什么不寻常的，对吧？为什么这对我不起作用！？

谢谢！

【问题讨论】：

标签： html forms jquery-ui post

【解决方案1】：

当 JQuery 打开对话框时，它会将它移到表单之外。

解决方案如下：

jQuery UI Dialog with ASP.NET button postback

基本上在你的情况下：

var dlg =  $("#dialog").dialog({ 
   autoOpen: false, 
   buttons: { 
    "OK": function() { 
     $(this).dialog('close'); 
    } 
   } 
  }); 
dlg.parent().appendTo($("#yourformId"));

应该修复它。

【讨论】：

棘手！我看到了那个问题，但没有读完，因为我认为它是特定于 asp.net 的。哎呀。谢谢！！
从 jQuery UI v1.10.0 开始，您可以直接使用 appendTo 属性 - api.jqueryui.com/dialog/#option-appendTo
这很愚蠢。 Jquery 应该使它更容易。不过感谢您的帮助。
appendTo 的问题是，如果您的对话框在大多数情况下是隐藏的。即使对话框未打开，对话框中的输入字段也会显示在表单的底部。我通过添加 $(this).appendTo($('#$strHostForm')); 解决了这个问题到对话框关闭按钮处理程序，而不是将其放在定义中 - 我的关闭处理程序然后发布表单，因此用户看不到字段出现

【解决方案2】：

我知道这是一个老问题，但对于任何有同样问题的人来说，有一个更新和更简单的解决方案：在 jQuery UI 1.10.0 中引入了一个“appendTo”选项

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});

【讨论】：

【解决方案3】：

我很确定 jQuery UI 会将 Dialog 部分从 dom 中的正常位置拆分出来，然后将其移动到不同的位置。这将使您的输入元素脱离表单父元素。没有表单元素就无法提交表单，这就是它失败的原因。

我建议将 html 重写为：

<div id="dialog">
<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 <input type="submit" name="pubArticle" value="Publish">
</form>
</div>

如果 publishSettings 按钮不需要出现在弹出窗口中，那么您可以将其移出表单并在提交事件中捕获其值并将其添加为隐藏的输入元素，然后再提交任何内容。

祝你好运。

【讨论】：

【解决方案4】：

在兼容 html5 的浏览器上（不是 IE，但最新的 ff、chrome 和 safari 支持它），您可以在输入字段上设置“form”属性，这样您就可以将它们放置在任何您想要的位置。我也遇到了这个问题，花了一些时间弄清楚为什么 ie 没有发送对话输入。

【讨论】：

【解决方案5】：

我遇到了同样的问题，解决方案是（如 user2100025 所说）在您的代码中添加“appendTo = '#yourform'”。这是我的代码，它工作正常。

我希望它能帮助某人:)

<script>
    $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      resizable: false,
      modal: true,
      appendTo: '#myform',
      buttons: {
        "Yes"function() {
            $( '#myform' ).submit();
        },
        'No' function() {
            $(this).dialog('close');
        }
      }
    });

    $( "#button" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

【讨论】：