如何使用jqueryui对话框按钮提交表单。

Question

我想使用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>

当一个人在文本区域中放置一个链接并提交表单时，jQuery对话框会出现三个按钮。我希望当有人点击对话框上的“是”按钮时，表单可以自动提交。目前一切都运行良好，但是当我点击“是”按钮时，它不起作用。

- Gopa Soft

---

首先，您正在调用submit_form()函数，但是您定义了submi_form()函数。如果您正在使用jQuery，为什么要使用var formSubmit = document.getElementById('formSubmit');？为什么不使用$('#formSubmit')？ - mittmemo

findUrls() 或 show_box() 函数哪一个没有起作用？ - palaѕн

@kdg123 现在我在"Yes"按钮中使用了$('#myForm').submit();，但是它没有起作用。 - Gopa Soft

@PalashMondal 两个都可以工作，但是submit_form()不起作用。但是我将其更改为$('#myForm').submit();。它也不起作用。 - Gopa Soft

Answer 1

您的submit_form函数实际上并没有尝试提交表单。目前，它正在向“点击我”按钮添加单击事件，如果按下该按钮，则会提交您的表单。

如果要通过单击对话框的“是”按钮提交表单，请尝试以下操作：

function submit_form(){
    $('#myForm').submit();
}

同时请确保您的submit_form方法的名称只是这里的一个小错误，而不是在您的实际代码中...您错过了一个"t"。

- purgatory101

---

尝试这样做：从你的表单中移除onsubmit事件。将你的“发送”按钮更改为只有type="button"的输入框。在该按钮上添加一个onclick事件，调用findUrls()函数。 - purgatory101

最终问题与此相关：https://dev59.com/Hmct5IYBdhLWcg3wk-Zq。现在你需要做的就是将按钮移出表单，这样表单就可以适当地提交了。您还可以考虑在文本区域上放置一个名称。这是一个例子：http://jsfiddle.net/SzMCF/。 - purgatory101

Answer 2

首先，代码非常混乱且组织得非常糟糕，很抱歉这么说。以下是一些改进的建议：

1：将JavaScript保留到单独的js文件中，尽量避免嵌入式代码。但这并不意味着完全不使用嵌入式。在这种情况下，更好的做法是保持更有条理。

2：确保您在需要的代码中调用load事件，在您的情况下，document ready被用于show_box()中，这是完全不必要的。

3：函数submi_form()未从任何地方调用，因此此时最好使用document ready来处理click事件

4：findUrls()，很抱歉无法理解您在此部分中尝试实现的内容，因此只能跳过它。确保保持简单，幸福就会到来）

尝试在尽可能接近您的风格的情况下修复代码，因此这里是http://jsbin.com/idetub/1/edit

仅供考虑的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();
    };
  //}
});

更新：是的，看起来您在这里使用了递归逻辑，这使得表单无法提交。

- dmi3y

---

你试过这个例子了吗？（http://jsbin.com/idetub/1/edit）现在它可以通过“是”按钮提交表单。 - Gopa Soft

Answer 3

试试这个：

$("#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;
});​

同时从表单中删除 onsubmit="return findUrls();"，并将 findUrls() 代码添加到上面的 $("#myForm").submit() 方法中。 Fiddle

- palaѕн