我如何使用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的對話框，其中顯示三個按鈕，我想，當有人點擊對話框中的「是」按鈕，表單自動提交。一切工作正常。但是當我點擊按鈕是的，它不起作用。

Answer 1

您的submit_form函數實際上並未嘗試提交表單。目前它正在向「Click Me」按鈕添加點擊事件，如果按下該按鈕，則會提交您的表單。

如果你想一下你的對話框的「Yes」按鈕提交表單，試試這個：

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

還要確保您的submi_form方法的名字只是一個錯字這裏，而不是在你的生活代碼...你錯過了一個「t」。

Answer 2

嘗試這種情況：

$("#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();"，並添加上述$("#myForm").submit()方法內的findUrls()代碼。 Fiddle

Answer 3

好吧，首先所有的代碼都非常糾結，組織得非常糟糕，抱歉說這個。一些改進建議：

1：將javascirpt保存爲單獨的js文件，儘量避免嵌入代碼儘可能多。但它並不意味着根本不使用嵌入。在這種情況下，最好讓它更有條理。

2：確保你調用加載事件到需要它的代碼中，在你的情況下，文檔準備好用在show_box（）裏面，這是完全不必要的。

3：功能submi_form（）不是從任何地方調用，所以在這一點上，你可以更好地使用文件準備好處理單擊事件

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(); 
    }; 
    //} 
}); 

UPD：是的，看起來你在這裏獲得遞歸邏輯，無法提交表單。