jquery函數沒有正確調用表單提交

當輸入電子郵件地址並單擊提交按鈕時，alert('jquery');被執行，我看到警報。 但我沒有看到'提交表單'的提醒，並立即提供request.php頁面。我究竟做錯了什麼？jquery函數沒有正確調用表單提交

HTML片段：

<form class="form-signin" role="form" id="emailform" action="request.php" method="post" 
    name="emailform"> 
    <input type="email" id="email" name="email" required="" /> <button name="submit" 
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button> 
</form>

jQuery的片段：

<script> 
    $(document).ready(function() { 
     alert('jquery'); // this alert is called properly 
     $("#emailform").submit(function(event) { 

      alert('submitting the form'); // this is not getting called on click of the submit button 
      event.preventDefault(); 

      var $form = $(this), 
       url = $form.attr('action'); 
      alert(url); 
      $.post(url, { 
        param1: $("#email").val() 
       }) 
       .success(function(data) { 
        if (data == "found") {} 
       }); 
     }); 
    }); 
</script>

編輯：我上面使用的措辭是不正確的，我因此改變它，感謝@PeterKA

「加載頁面時會執行alert('jquery');，並看到警報。但是，當輸入電子郵件地址並點擊提交按鈕時，alert('submitting the form');未被執行「

來源

2014-11-17 spiderman

你的頁面加載後產生的HTML？ – dashtinejad

@Kartikeya，同意，但按鈕是'type =「submit」'。所以表單提交發生在點擊按鈕時，是否正確？ – spiderman

嘗試'$（document.body）.on（'submit'，'＃emailform'，function（event）{}）' –

您的代碼沒有任何問題;只有您錯誤地報告了什麼時候會觸發警報，請參閱以下注釋演示，運行演示，以確認您的代碼運行正常。

$(document).ready(function() { 
 
     
 
     //THIS ALERT FIRES WHEN THE PAGE LOADS 
 
     //NOT WHEN A BUTTON IS CLICKED 
 
     alert('jquery'); 
 
     
 
     $("#emailform").submit(function(event) { 
 
      
 
      //THIS ALERT FIRES WHEN THE SUBMIT BUTTON IS CLICK 
 
      //OR WHEN THE SUBMIT EVENT IS TRIGGERED THROUGH SOME OTHER MEANS 
 
      alert('submitting the form'); 
 
      
 
      event.preventDefault(); 
 

 
      /*var $form = $(this), 
 
       url = $form.attr('action'); 
 
      alert(url); 
 
      $.post(url, { 
 
        param1: $("#email").val() 
 
       }) 
 
       .success(function(data) { 
 
        if (data == "found") {} 
 
       });*/ 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="form-signin" role="form" id="emailform" action="request.php" method="post" 
 
    name="emailform"> 
 
    <input type="email" id="email" name="email" required="" /> <button name="submit" 
 
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button> 
 
</form>

來源

2014-11-17 05:09:10 PeterKA

謝謝你的努力。那是我的壞 – spiderman

不客氣。 – PeterKA

 <!DOCTYPE HTML> 
     <html> 
     <title>Tester</title> 
     <head> 
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> 





<script type="text/javascript"> 

$(document).ready(function() { 
     alert('jquery'); // this alert is called properly 
     $("#emailform").submit(function(event) { 
      alert("hello this ready for submit"); 
      return false; 
     }); 
    }); 

</script>   


     </head> 
     <body> 

      <form class="form-signin" role="form" id="emailform" action="request.php" method="post" 
    name="emailform"> 
    <input type="email" id="email" name="email" required="" /> <button name="submit" 
    class="btn btn-lg btn-primary btn-block" type="submit">Get New Code</button> 
</form> 

     </body> 
     </html>

來源

2014-11-17 05:15:54

jquery函數沒有正確調用表單提交

回答

相關問題