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 text to the webmaster (instead of an email). So I have my index.php file

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


<form id="contact-form" method="post">
    <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>
        <input type="submit" value="Submit" id="submit-button" name="submit" />
        *indicates a required field 
    </div>

</form>

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

And this is my jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(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;
        }); 

    });
</script>

The script does not work. If I put action = sendtext.php in the <form> it will work perfectly but it will take me to sendtext.php and echo the message.

What I want is to show the echo in the <div class="result"></div>.

Again thank you for your help.

---

UPDATE # 1 After a few comments...

this is what I have so far...

<script>
    $(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;
        }); 

    });
</script>

---

Update 2

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 form and submit.

Again, I appreciate all your time you put to help me out. Thank you!

Answer 1

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 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

Change:

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

to:

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

Answer 5

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")}