title: Submit a php form and display its result on div without reloading page
body: <p>First of all, thank you for your kind help. </p>
  
  <p>I have tried almost everything I found on stackoverflow but I cannot get this to work.</p>
  
  <p>I created a form to send a text to the webmaster (instead of an email). So I have my index.php file </p>
  
  <pre><code>    &lt;style&gt;
      .result{
          padding: 20px;
          font-size: 16px;
          background-color:  #ccc;
          color: #fff;
      }
  &lt;/style&gt;
  
  
  &lt;form id="contact-form" method="post"&gt;
      &lt;div&gt;
          &lt;input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" /&gt;    
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /&gt; 
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  &gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;input type="submit" value="Submit" id="submit-button" name="submit" /&gt;
          *indicates a required field 
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;div class="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this is my jquery</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function(){
  
          $('#contact-form').submit(function() { 
              $.ajax({ 
                  type:"POST",
                  url:"sendtext.php",
                  data: $("#contact-form").serialize(),
                  success: function(response){$(".result").appendTo(response)}
  
              });
              //return false;
          }); 
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The script does not work. If I put   <code>action = sendtext.php</code> in the <code>&lt;form&gt;</code> it will work perfectly but it will take me to sendtext.php and <code>echo</code> the message.</p>
  
  <p>What I want is to show the <code>echo</code> in the <code>&lt;div class="result"&gt;&lt;/div&gt;</code>.</p>
  
  <p>Again thank you for your help.</p>
  
  <hr>
  
  <p><strong>UPDATE # 1</strong>
  After a few comments...</p>
  
  <p>this is what I have so far...</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
  
          $('#contact-form').submit(function(e) { 
              e.preventDefault();
              $.ajax({ 
                  type:"POST",
                  url:"sendtext.php",
                  data: $("#contact-form").serialize(),
                  success: function(response){$(".result").append(response)}
  
              });
              //return false;
          }); 
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update 2</strong></p>
  
  <p>After reading all the comments and try different options, no success just yet! I did what @guy suggested, and it worked but I want to use <code>form</code> and <code>submit</code>.</p>
  
  <p>Again, I appreciate all your time you put to help me out. Thank you!</p>