title: jquery ajax form submit with twitter bootstrap modal
body: <p>i'm developing a chat and i want that the clients click on the button <strong>"Click here and start ur chat"</strong> and will open the form and after submit form <strong>"Start Chat"</strong>...</p>
  
  <p>But i can't submit using ajax, i checked the console log, nothing appears strange! </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Start Chat&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link type="text/css" rel="stylesheet" media="all" href="css/chat.css" /&gt;
      &lt;link type="text/css" rel="stylesheet" media="all" href="css/bootstrap.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;center&gt; 
  
              &lt;!-- Button trigger modal --&gt;
      &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
        Click here and start ur chat
      &lt;/button&gt;
  
          &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
            &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Write ur info below&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  &lt;form action="" method="POST" id="form"&gt;                    
                      &lt;table width="100%"&gt;
                          &lt;tr&gt;                        
                              &lt;td&gt;Name: &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="name" placeholder="Name"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                          &lt;tr&gt;                        
                              &lt;td&gt;Mail: &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="mail" placeholder="Mail"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" id="start"&gt;Start Chat&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
              &lt;!-- javascript:chatWith('3','Ronaldo') --&gt;
  
      &lt;/center&gt;
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/chat.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $(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');
                          }
  
  
                      });
  
                  });
              });     
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>