Form submit using AJAX is not working

Question

PHP/Ajax newbie here...I am trying to save the contents of a textarea into MySQL via Ajax. Although the data IS being saved correctly, Ajax isn't quite working. Basically, the page is "reloaded/refreshed" after the data is saved, unlike Ajax. Can you please tell me what is that I am doing wrong?

index.html:

<form action="save.php" method="post" id="source-form">
<span><input type="submit" value="Save" /></span>
<div>
<textarea id="editor" name="editor" >

</textarea>
</div>
</form>

javascript:

 $(document).ready(function() {

    $("#source-form").submit(function(){
    $.ajax({
        url:"save.php",
        type:"post",
        data:$(this).serialize(),
        success: alert('saved');
    });
});

save.php

<?php

// connect to the database
include('connect-db.php'); 

// get form data, making sure it is valid
$submit_date = date('Y-m-d H:i:s');
$content = mysql_real_escape_string(htmlspecialchars($_POST['editor']));

//build query
mysql_query("INSERT source SET submit_date='$submit_date',content='$content'")
or die(mysql_error());

header('Location: index.html');

?>

Any help on this is appreciated. Thank you.

EDIT: For folks running into the same issue or something similar...here's a great solution from: http://jquery.malsup.com/form/#getting-started

Answer 1

change your <form action="save.php" method="post" id="source-form">

to <form method="post" id="source-form">

remove the action you already declared your url in the ajax

remove header('Location: index.html'); since your should not redirect since your are using ajax. remember that if you are using ajax you dont need to refresh the page just let it receive a confirmation that the result was successful

Answer 2

Add a return false; to forum submit so that the form submit is cancelled:

$("#source-form").submit(function(){
    $.ajax({
        url:"save.php",
        type:"post",
        data:$(this).serialize(),
        success: alert('saved');
    });

    return false;
});

Answer 3

You have to stop the default behavior of the submit button (form posting).Otherwise the form will be submitted again and you will see the page loading again. You use the preventDefault function

$("#source-form").submit(function(e){
     e.preventDefault();
     $.ajax({
        url:"save.php",
        type:"post",
        data:$(this).serialize(),
        success: alert('saved');
     });
 });

Answer 4

If you're only using the form for a ajax submit, I would suggest removing the form from the HTML completely and using a click event. I've stripped things down to a minimum in the HTML:

HTML

<input id="save-text" type="submit" value="Save" />
<textarea id="editor" name="editor" ></textarea>

JavaScript

$(document).ready(function() {

    $("#save-text").click(function(){
    $.ajax({
        url:"save.php",
        type:"post",
        data: $("#editor").serialize(),
        success: alert('saved');
    });
});