Question

我的对话框中的输入字段未发布，我不知道为什么......

我已经在mac firefox和safari以及windows IE＆amp; firefox具有相同的结果，所以我认为它不是浏览器，如果禁用对话框，字段会很好。

我已经重新阅读了jquery ui docs并且无法找到我做错的事情......对话框似乎不太可能不支持输入。

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

<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>

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

谢谢！

Answer 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"));

应该修复它。

Answer 2

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

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

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

Answer 3

我很确定jQuery UI会从dom中的正常位置突出Dialog部分，然后将其移动到其他位置。这将把你的输入元素从形式父元素中取出。你不能提交没有表单元素的表单，这就是它失败的原因。

我建议将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按钮不需要在弹出窗口中，那么您可以将其移出窗体并在submit事件上捕获它的值，并在提交任何内容之前将其添加为隐藏的输入元素。

祝你好运。

Answer 4

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

Answer 5

我遇到了同样的问题，并且解决方案是（如user2100025所说）添加＆＃34; appendTo =＆＃39; #yourform＆＃39;，＆＃34;在你的代码中。在这里我的代码和它的工作正常。

我希望有人这样：）

＆＃13;

<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>

＆＃13;

Jquery UI对话框内的输入没有被发送？

5 个答案: