CODEWITHSUNDEEP
phpjavascriptajaxjquery
Geocrafter
Geocrafter

Reputation: 145

Form submit using AJAX is not working

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

Upvotes: 0

Views: 957

Answers (4)

Eric Di Bari
Eric Di Bari

Reputation: 3867

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');
    });
});

Upvotes: 0

ianace
ianace

Reputation: 1635

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

Upvotes: 1

Shyju
Shyju

Reputation: 218892

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');
     });
 });

Upvotes: 0

uzyn
uzyn

Reputation: 6693

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

Upvotes: 0

Related Questions