4

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 ダイアログ ボックスに 3 つのボタンが表示されます。ダイアログ ボックスの [はい] ボタンをクリックすると、フォームが自動的に送信されます。すべてが正常に機能しています。しかし、はいボタンをクリックしても機能しません。

4

3 に答える 3

9

submit_form 関数は、実際にフォームを送信しようとしていません。現在、「Click Me」ボタンにクリックイベントを追加しています。これを押すと、フォームが送信されます。

ダイアログの「はい」ボタンをクリックしてフォームを送信する場合は、次のようにします。

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

また、submi_form メソッドの名前が実際のコードではなく、ここでのタイプミスであることを確認してください...「t」がありません。

于 2012-12-04T16:53:17.220 に答える
3

まず第一に、コードは非常に絡み合っており、非常に整理されていません。これを言って申し訳ありません。改善のためのヒント:

1: javascirpt を別の js ファイルに保持し、可能な限り埋め込みコードを避けるようにしてください。ただし、埋め込みをまったく使用しないという意味ではありません。この場合、より整理しておく方がよいでしょう。

2: 必要な場所で load イベントをコードに呼び出すようにしてください。

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:はい、ここで再帰ロジックが発生したようで、フォームを送信できませんでした。

于 2012-12-04T17:14:34.223 に答える
0

これを試して：

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

于 2012-12-04T17:10:38.800 に答える