Submit a php form and display its result on div without reloading page

Question

First of all, thank you for your kind help.

I have tried almost everything I found on stackoverflow but I cannot get this to work.

I created a form to send a te

Answer 1

Your appendTo in success callback is backward. In your example, you are trying to append the .result element to the response variable. Should be:

success: function(response){ response.appendTo(".result")}

Answer 2

Can you try this,

 $(".result").html(response);

instead of

 $(".result").appendTo(response)

Jaavscript:

$(document).ready(function(){
    $('#contact-form').submit(function() {             
        $.ajax({ 
            type:"POST",
            url:"sendtext.php",
            data: $("#contact-form").serialize(),
            success: function(response){
                 $(".result").html(response);
            }

        });
        return false;
    });        
});

Answer 3

Use the the preventDefault() function so that the form doesn't do the redirection on submit. After that, use append() instead of appendTo()

$('#contact-form').submit(function(e) {

e.preventDefault();

Answer 4

The problem is that when you add sendText.php as the action, your jQuery will execute because the form is submitted so that will work... BUT it will also take you to the page of the form's action field. What you want to do is not call submit but just make a button instead and have the jQuery listen to a click on that button.

Instead of:

<input type="submit" value="Submit" id="submit-button" name="submit" />

Change it to a regular button:

<button id="submit-button">Submit</button>

Then in your jQuery, change the line

$('#contact-form').submit(function() {

to

$('#submit-button').click(function() {

Also, change appendTo to html and then the result should show up in your result div.

----EDIT----

This worked for me:

<style>
  .result{
    padding: 20px;
    font-size: 16px;
    background-color:  #ccc;                                                                                                                                                                                                                                                    
    color: #fff;                                                                                                                                                                                                                                                                
  }
</style>

<div id="contact-form" >
<div>
    <input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>

<div>
    <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
</div>

<div>
    <textarea  id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off"  ></textarea>
</div>

<div>
  <button id="submit-button">Submit</button>
    *indicates a required field
</div>

</div>

<div class="result"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $('#submit-button').click(function() {
         $.ajax({
               type:"post",
               url:"sendText.php",
               data:  $("#contact-form").serialize(),
               success: function(response){
                   $(".result").html(response);
               }
         });
      });
   });
</script>

Answer 5

Change:

$(".result").appendTo(response)

to:

$(".result").append(response)