jquery ajax表單提交與引導模式

我正在開發一個聊天，我希望客戶點擊按鈕「點擊這裏，並開始你的聊天」，並將打開表格並在提交表格後「開始聊天「 ...jquery ajax表單提交與引導模式

但我無法使用ajax提交，我檢查了控制檯日誌，沒有出現任何奇怪的事情！

<!DOCTYPE html> 
<html> 
<head> 
    <title>Start Chat</title> 
    <meta charset="utf-8"> 
    <link type="text/css" rel="stylesheet" media="all" href="css/chat.css" /> 
    <link type="text/css" rel="stylesheet" media="all" href="css/bootstrap.css" /> 
</head> 
<body> 
    <center> 

      <!-- Button trigger modal --> 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Click here and start ur chat 
    </button> 

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Write ur info below</h4> 
       </div> 
       <div class="modal-body"> 
       <form action="" method="POST" id="form">      
        <table width="100%"> 
         <tr>       
          <td>Name: </td> <td><input type="text" name="name" placeholder="Name"></td> 
         </tr> 
         <th>&nbsp;</th> 
         <tr>       
          <td>Mail: </td> <td><input type="text" name="mail" placeholder="Mail"></td> 
         </tr> 
        </table> 
       </form> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="start">Start Chat</button> 
       </div> 
      </div> 
      </div> 
     </div> 
      <!-- javascript:chatWith('3','Ronaldo') --> 

    </center> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript" src="js/chat.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $("#start").click(function(){ 
       $("#form").submit(function(e){ 

        $.ajax({ 

         url: "dateRecd.php", 
         type: "POST", 
         data: $(this).serialize(), 

         success: function(data){ 
          alert(data); 
         // chatWith('9','name'); 
         } 


        }); 

       }); 
      });  
     }); 
    </script> 
</body> 
</html>

來源

2014-01-17 TMoraes

如果您使用Ajax表單，您肯定需要預防默認設置。另外現在您只需分配提交處理程序。它不被執行 – mplungjan

做了你的模式是這樣的：開始（點擊）=>顯示模式=>點擊提交聊天; ？ – Faytraneozter

我的模式是它！ – TMoraes

只是刪除＃開始點擊

$(document).ready(function(){ 

     //$("#start").click(function(){ // that will done a double verification 
      $("#form").submit(function(e){ 

       $.ajax({ 

        url: "dateRecd.php", 
        type: "POST", 
        data: $(this).serialize(), 

        success: function(data){ 
         alert(data); 
        // chatWith('9','name'); 
        } 


       }); 

      }); 
     //});  
    }); 
</script>

來源

2014-01-17 17:44:48 Faytraneozter

什麼也沒有發生，控制檯日誌是明確 – TMoraes

更改此 <按鈕類型= 「按鈕」類= 「BTN BTN-主」 ID = 「開始」>開始聊天對此開始聊天把它放在

不應該放async：false？ – CrabbyPete

而是提交表單，請與「點擊」行動嘗試。

$(document).ready(function(){ 

     $("#form").click(function(e){ 

      $.ajax({ 

       url: "dateRecd.php", 
       type: "POST", 
       data: $(this).serialize(), 

       success: function(data){ 
        alert(data); 
       // chatWith('9','name'); 
       } 


      }); 

     }); 
    //});  
});

來源

2014-07-08 05:42:24 Thiru

事實上，當你點擊「開始」按鈕，會發生什麼？當您添加一個單擊處理程序的「開始」按鈕，如下：

$("#form").submit(function(e){ 
//... 
}

你添加形式的透過處理程序，當你點擊按鈕。沒有更多，沒有提交，沒有Ajax行動。

爲了得到你想要的東西，有2點簡單的方法：

，刪除表單提交處理程序，並做了ajax提交，像什麼@Thiru說;
刪除按鈕點擊處理程序，使用表單提交處理程序，如@Faytraneozter propoese。

但第二種方式不起作用。爲什麼？

首先，你的頁面有4個按鈕，你的頁面如何知道點擊哪個按鈕應該觸發提交動作？您應該將 type="submit" 添加到按鈕，以便您的頁面知道當您單擊此按鈕時，您的意思是提交表單。其次，當你觸發表單的提交動作時，它是通過HTML提交的，不是 ajax。您應該添加行e.preventDefault以防止通過HTML提交。這裏是https://stackoverflow.com/a/1357151/1165178這個答案很好解釋e.preventDefault。

來源

2015-02-05 17:25:40 Qianyue

jquery ajax表單提交與引導模式

回答

相關問題