2016-10-27 7 views
1

フォームを持つダイアログを開こうとしていますが、このフォームのデータをチェックしたいと思っています。データが検証されたら、私はそれを提出したい。私はローカルでダウンロードされたPHPを持っていないので、私は警告ボックスを追加しましたが、私はそれを送信すると何も起こりません。ダイアログが閉じません。データを検証した後にフォームを送信するにはどうすればいいですか?

私は新しいので、私は$('#dialog-form form')私はサブミット機能を適用することができるはずですクエリを私の理解からです。

EDIT:フォームアクションをaction = "javascript:alert( 'Success!')に変更しました。問題はjquery $("#dialog-form form").submit();にあると思います。フォームは、有効なデータが提出された後にそれを閉じることを許さないものを提出しません。

function addUser() { 
 
    var valid=true; 
 
    if (valid) { 
 
\t \t \t $("#dialog-form form").submit(); 
 
\t \t \t $(this).dialog("close"); 
 
     \t \t } 
 
     \t \t return valid; 
 
} 
 
dialog=$("#dialog-form").dialog({ 
 
\t \t autoOpen: false, 
 
\t \t closeOnEscape: true, 
 
\t \t height: 500, 
 
\t \t width: 400, 
 
\t \t title: "title", 
 
\t \t modal:true, 
 
\t \t open: function() { 
 
     \t \t $('.ui-widget-overlay').addClass('custom-overlay'); 
 
    \t \t }, 
 
\t \t buttons: { 
 
\t \t \t "Sign up": addUser, 
 
\t \t \t Cancel: function(){ 
 
\t \t \t \t dialog.dialog("close"); 
 
\t \t \t } 
 
\t \t }, 
 
\t \t close: function() { 
 
\t \t \t form[ 0 ].reset(); 
 
     \t allFields.removeClass("ui-state-error"); 
 
\t \t \t tips.removeClass("ui-state-highlight"); 
 
\t \t \t tips.text("text."); 
 
\t \t }, 
 
\t \t show: { effect: "drop", direction: "up", duration: 800 } 
 
\t \t 
 
\t }); 
 
\t form = dialog.find("form").on("submit", function(event) { 
 
     \t \t event.preventDefault(); 
 
     \t \t addUser(); 
 
    \t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dialog-form"> 
 
\t \t \t <p class=""></p> 
 

 
\t \t \t <form action="javascript:alert('Success!')"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <input type="text" id="fname"> 
 
\t \t \t \t \t <input type="text" id="lname"> 
 
\t \t \t \t \t <input type="text" id="eid"> 
 
\t \t \t \t \t <input type="email" id="email"> 
 
\t \t \t \t \t <input type="password" id="pwd"> 
 
\t \t \t \t \t <input type="password" id="conf-pwd"> 
 
\t \t \t \t </fieldset> 
 
\t \t \t </form> 
 
\t \t </div>

+0

:[。jQueryのハンドラ 'ループを'](http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack -size-exceeded) –

答えて

0

action=その値ではなく、プレーンなJavaScriptなどのURLを取ります。それを次のように変更してみてください:

<form action="javascript:alert('Success!')"> 
+0

これは役に立ちません。データが検証されたら、私はそのフォームを提出します。クエリステートメントが機能していないようです。 –

0

コードを再生した後で私の答えが更新されました。これを試してみてください:この問題は、このリンクを訪問し解決することができます

function addUser() { 
    var valid=true; 
    if (valid) { 
      $("#dialog-form form").submit(); 

      } 

} 
dialog=$("#dialog-form").dialog({ 
     autoOpen: true, 
     closeOnEscape: true, 
     height: 500, 
     width: 400, 
     title: "title", 
     modal:true, 
     open: function() { 
       $('.ui-widget-overlay').addClass('custom-overlay'); 
      }, 
     buttons: [{ 
      text: "Sign Up", 
      click: function() { 
      addUser(); 
      $(this).dialog("close"); 
      } 
     }], 
     close: function() { 
      form[ 0 ].reset(); 
      allFields.removeClass("ui-state-error"); 
      tips.removeClass("ui-state-highlight"); 
      tips.text("text."); 
     }, 
     show: { effect: "drop", direction: "up", duration: 800 } 

    }); 
+0

私はそれを変更しました。私は問題がjqueryステートメントと関数submit()にあると思います –

+0

編集を表示して、これがあなたの後になっているかどうかを確認してください。 – LegenJerry

+0

does not work私は開発者ウィンドウを開いて、最大コールスタックサイズが「 –

関連する問題