Html 未发送 Jquery UI 对话框中的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1611687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input inside Jquery UI Dialog not being sent?
提问by neil
The input fields in my dialog box aren't being posted, and i'm not sure why...
我的对话框中的输入字段没有发布，我不知道为什么......
i've tested it on mac firefox and safari, and windows IE & firefox with the same results, so i don't think it's the browser, and the fields post fine if I disable the dialog box.
我已经在 mac firefox 和 safari 以及 windows IE 和 firefox 上测试过它，结果相同，所以我认为它不是浏览器，如果我禁用对话框，字段会很好。
I've re-read the jquery ui docs and can't find what i'm doing wrong... It seems unlikely that the dialog box wouldn't support input.
我重新阅读了 jquery ui 文档，但找不到我做错了什么......对话框似乎不太可能不支持输入。
here's a condensed version of the code i'm using:
这是我正在使用的代码的精简版本：
<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>
Nothing out of the ordinary, right? Why won't this work for me!?
没什么不正常的吧？为什么这对我不起作用！？
thanks!
谢谢！
回答by krishna
When JQuery opens the dialog box , it moves it outside the form.
当 JQuery 打开对话框时，它将它移到表单之外。
Here's the solution for that:
这是解决方案：
jQuery UI Dialog with ASP.NET button postback
带有 ASP.NET 按钮回发的 jQuery UI 对话框
basically in your case:
基本上在你的情况下：
var dlg = $("#dialog").dialog({
autoOpen: false,
buttons: {
"OK": function() {
$(this).dialog('close');
}
}
});
dlg.parent().appendTo($("#yourformId"));
should fix it.
应该修复它。
回答by Jecho Jekov
I know this is an old question, but for anyone who have the same issue there is a newer and simpler solution: an "appendTo" option has been introduced in jQuery UI 1.10.0
我知道这是一个老问题，但对于任何有同样问题的人来说，有一个更新更简单的解决方案：jQuery UI 1.10.0 中引入了“appendTo”选项
http://api.jqueryui.com/dialog/#option-appendTo
http://api.jqueryui.com/dialog/#option-appendTo
$("#dialog").dialog({
appendTo: "form"
....
});
回答by Alex Sexton
I'm pretty sure jQuery UI breaks out the Dialog section from its normal place in the dom and then moves it to a different place. That would take your input element out of the form parent element. You can't submit a form without a form element, so that's why it fails.
我很确定 jQuery UI 将 Dialog 部分从 dom 中的正常位置分离出来，然后将其移动到不同的位置。这将使您的输入元素脱离表单父元素。没有表单元素就不能提交表单，这就是它失败的原因。
I would suggest rewriting the html as:
我建议将 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>
If the publishSettings button needs to not be in the popup, then you could move it out of the form and just capture its value on the submit event and add it as a hidden input element before anything gets submitted.
如果 publishSettings 按钮不需要出现在弹出窗口中，那么您可以将它移出表单并在提交事件中捕获它的值，并在提交任何内容之前将其添加为隐藏的输入元素。
Best of luck.
祝你好运。
回答by macl
On html5 compliant browsers (not IE, but latest ff, chrome and safari support it), you can set the "form" attribute on your input fields, and doing so lets you place them wherever you want. I suffered this problem too and took some time to figure out why ie did not send dialog inputs.
在符合 html5 的浏览器（不是 IE，但最新的 ff、chrome 和 safari 支持它）上，您可以在输入字段上设置“表单”属性，这样做可以让您将它们放置在您想要的任何位置。我也遇到了这个问题，花了一些时间才弄清楚为什么 ie 没有发送对话框输入。
回答by Hugo Goyet
I had the same issue and the solution was (like user2100025 said) to add the "appendTo = '#yourform'," in your code. Here my code and it's working fine.
我遇到了同样的问题，解决方案是（如 user2100025 所说）在您的代码中添加“appendTo = '#yourform'”。这是我的代码，它工作正常。
I hope it helo someone :)
我希望它能帮助某人:)
<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>