使用jquery對話框在提交之前進行確認

Question

我正在使用表單，並且我想在表單提交前進行確認。在我使用javascript確認之前，現在我想用jQuery的對話框UI替換它。我希望當用戶點擊按鈕「Valider」時，他可以通過點擊提交或取消選擇提交表單。我在jQuery中是begginer，這是我的代碼，但我不工作。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#valider').click(function(){ 
     $('#dialog').dialog({ 
      modal: true, 
      buttons:{ 
      "submit":function(){ 
       document.form1.submit(); 
      }, 
      "cancel":function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    }); 
     $('form#testconfirmJQ').submit(function(e){ 
      e.preventDefault(); 
      $('#dialog').dialog('open'); 
     }); 

}); 

</script> 
<form action="test.php" method="post" name="form1"> 
    <input type="submit" name="valider" class="valider" id="valider" value="valider"/> 
</form> 
    <div id="dialog" title="Confirmation"> 
    </div> 
</div> 

當我點擊「Valider」時，我簡要介紹了對話框，並提交了表單。我對我的代碼有點困惑。有人能告訴我我做錯了什麼嗎？提前致謝。

Answer 1

您的jQuery正在尋找$('form#testconfirmJQ')，所以它正在尋找一個form與編號testconfirmJQ。你沒有這樣的表單，所以jQuery找不到這個元素。您既可以從代碼中刪除ID，所以它看起來像$('form').submit(function(e){或ID添加到形式，所以它看起來像<form action="test.php" id="testconfirmJQ" method="post" name="form1">