Javascript 我如何使用 jqueryui 对话框按钮提交表单，
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13707716/
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
How do i submit a form with jqueryui dialog button,
提问by Gopa Soft
I want to submit a form using jqueryui button. I had some code but it doesn't work. Here is the code:
我想使用 jqueryui 按钮提交表单。我有一些代码，但它不起作用。这是代码：
<script type="text/javascript">
function findUrls()
{
var text = document.getElementById("text").value;
var source = (text || '').toString();
var urlArray = [];
var url;
var matchArray;
// Regular expression to find FTP, HTTP(S) and email URLs.
var regexToken = /\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig;
// Iterate through any URLs in the text.
if( (regexToken.exec( source )) !== null )
{
show_box();// this will show jquery dialog..
return false;
}
}
</script>
<div id="dialog" title="Dialog Title">
<p>Dialog box text.....Dialog box text....Dialog box text</p>
<button id="formSubmit">Click me</button>
</div>
<form name="myForm" id="myForm" action="http://www.bing.com" method="post" onsubmit="return findUrls();">
<textarea id="text"></textarea>
<input type="submit" name="submit" value="send" />
</form>
<script type="text/javascript">
function show_box(){
$(document).ready(function(){
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Yes",
click: function() {
submit_form();
}
},
{
text: "No",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
$( "#dialog" ).dialog( "open" );
});
}
function submi_form(){
var myForm = document.forms['myForm'];
var formSubmit = document.getElementById('formSubmit');
formSubmit.onclick = function(){
myForm.submit();
}
}
</script>
When a person puts a link in text area and submit the form, the jquery dialog box appear with three buttons, I want that when some one click the "Yes" button on dialog box, the form automatically submit. Everything is working fine. But When i click the button yes, it doesn't work.
当一个人在文本区域中放置一个链接并提交表单时，jquery 对话框会出现三个按钮，我希望当有人单击对话框上的“是”按钮时，表单自动提交。一切正常。但是当我单击按钮时，它不起作用。
回答by purgatory101
Your submit_form function is not actually trying to submit the form. It is currently adding a click event onto the "Click Me" button which if pressed will then submit your form.
您的 submit_form 函数实际上并未尝试提交表单。它目前正在向“单击我”按钮添加一个单击事件，如果按下该按钮，则会提交您的表单。
If you want clicking the "Yes" button of your dialog to submit the form, try this:
如果您想单击对话框的“是”按钮提交表单，请尝试以下操作：
function submit_form(){
$('#myForm').submit();
}
Also make sure the name of your submi_form method is just a typo here rather than in your live code...you are missing a "t".
还要确保您的 submi_form 方法的名称在这里只是一个错字，而不是在您的实时代码中……您缺少一个“t”。
回答by dmi3y
okay the very first of all code is very tangled and really badly organized, sorry for saying this. Some tips for improvement:
好吧，最开始的代码非常混乱，而且组织得非常糟糕，很抱歉这么说。一些改进建议：
1: keep javascirpt into separate js file, try to avoid embedded code as much as it possible. But yet it does not mean do not use embeds at all. in this case it is better keep it more organized.
1：将javascipt保存在单独的js文件中，尽量避免嵌入代码。但这并不意味着根本不使用嵌入。在这种情况下，最好让它更有条理。
2: make sure you call load event into the code where it is needed, in your case document ready was used inside show_box() which is totally unnecessary.
2：确保在需要它的代码中调用 load 事件，在你的情况下，在 show_box() 中使用了文档就绪，这是完全不必要的。
3: function submi_form() is not called from anywhere, so at this point you may better use document ready to handle click event
3：函数submi_form()不是从任何地方调用的，所以此时你最好使用document ready来处理click事件
4: findUrls(), sorry was not able to get what you trying to accomplish in this part, so just bypass it. Make sure you keep things simple and happiness will come)
4：findUrls()，抱歉在这部分无法得到你想要完成的事情，所以绕过它。确保你保持简单，幸福就会到来）
Was tried to fix code keeping your style as close as it possible, so here we are http://jsbin.com/idetub/1/edit
试图修复代码，使您的风格尽可能接近，所以我们在这里http://jsbin.com/idetub/1/edit
and just javascript for your consideration
和只是 javascript 供您考虑
function findUrls() {
show_box(); // this will show jquery dialog..
return false;
// some broken logic below ...
var text = document.getElementById("text").value;
var source = (text || '').toString();
var urlArray = [];
var url;
var matchArray;
// Regular expression to find FTP, HTTP(S) and email URLs.
var regexToken = /\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig;
// Iterate through any URLs in the text.
if ((regexToken.exec(source)) !== null) {
show_box(); // this will show jquery dialog..
return false;
}
}
function show_box() {
//$(document).ready(function(){ // no needs for that
$("#dialog").dialog({
autoOpen: false,
width: 400,
buttons: [{
text: "Yes",
click: function () {
submit_form();
}
}, {
text: "No",
click: function () {
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
$("#dialog").dialog("open");
//});
}
$(document).ready(function(){
//function submi_form() { remove this as no accual call for submit_form nowhere
var myForm = document.forms['myForm'];
var formSubmit = document.getElementById('formSubmit');
formSubmit.onclick = function () {
myForm.submit();
};
//}
});
UPD: and yes, looks like you get reccursive logic here, which unabled to make form submitted.
UPD：是的，看起来你在这里得到了递归逻辑，无法提交表单。
回答by pala?н
Try this:
尝试这个：
$("#myForm").submit(function() {
var text = $('#text').val;
var source = (text || '').toString();
var urlArray = [];
var url;
var matchArray;
// Regular expression to find FTP, HTTP(S) and email URLs.
var regexToken = /\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig;
// Iterate through any URLs in the text.
if ((regexToken.exec(source)) !== null) {
show_box();// this will show jquery dialog..
alert('ss');
return false;
}
return false;
});?
Also remove the onsubmit="return findUrls();"from the form and add the findUrls()code inside the $("#myForm").submit()method above. Fiddle
还要onsubmit="return findUrls();"从表单中删除并findUrls()在$("#myForm").submit()上面的方法中添加代码。小提琴
