jQueryモーダルダイアログボックスが自分のフォームを送信していません

Question

jQueryモーダルダイアログボックスを使用して、フォームを送信するかどうかをユーザーに尋ねます。

ダイアログボックスの[送信]ボタンをクリックすると、フォームは送信されません。

フォームの送信ボタンをもう一度クリックすると、送信されます。

私はこれが範囲の問題であると推測していますが、私はそれについて他の投稿を見ましたが、運がないまま多くの時間を過ごしました。どのようにこれを解決するための任意のアイデアですか？

Javascriptを

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
}); 

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="submit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div> 

Answer 1

変更するには '提出' からご送信ボタンのname属性 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" /> 

で '＃' を交換してくださいアクション属性を空白または他の有効なURLに変換します。

Answer 2

解決策は単純に...あなたのボタン名です。なぜ聞くの？私はあなたを見せます！

これを取るとと私は少しだけ変更を加えたことに注意してください。私はjsfiddle互換性 ためのjavascriptのコールされるアクションを変更

1. ：javascriptのは、私は2つの変更を加えただけのHTML

   HTML

   <form id="myform" action="javascript:alert('Success!')" method="post"> 
       <input type="text" name="check_me" /> 
       <input type="submit" name="btnSubmit" value="Go!" /> 
   </form> 
   <div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 
   

   を変更していません

2. ボタン名をsubmit以外のものに変更しました

$（ '＃myform'）を呼び出すために＃2を実行する必要がありました。submitメソッドはsubmitメソッドではなく、ボタンを参照していました.jQueryにはあらゆる種類の混乱があります。あなたのボタンの名前を変更することで、$（ '＃myform'）submitは予期したjQueryサブミット関数のままで、誰もが幸せです。

私はこれを、いくつかの繰り返しを経て見つけました。これは、私が後世のために残してきたものです。

幸運を祈る！========

BELOW

=======オリジナルのポストあなたがしたいすべてが、 "この問題を解決する" である場合は、次のようにリファクタリングすることができます：

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

JavaScriptが

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() { 
     $("#confirm").dialog('open'); 
    }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } 
    }); 
});​ 

奇妙なことに、下記の作品よくね：

HTML

<form id="myform" action="javascript:alert('success!');" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

はJavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       $('#myform').submit(); 
       //submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
});​ 

私はここで変更唯一のものは、送信ボタンを除去し、100％は、jQueryを経由して提出します。

Answer 3

on submit eventフォームにはさまざまな種類のイベントがあります。

onsubmit="return confirm('Please confirm that you want to submit')" 

このEDITを参照してください、今、あなたはtrueまたはfalseを返すモーダルダイアログで一つの関数を作成して変更することができます。