Im trying to submit a form with Ajax here's my simplified code My index:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#addemail").click(function(){
var email=$("#email").val();
$.ajax({
type: "POST",
url: "addemail.php",
data: "email="+email,
success: console.log("success!"),
error: console.log("error!")
});
});
});
</script>
</head>
<body>
<div id="wrapper">
<h2>Email:</h2>
<form action="" method="post">
<table>
<tr>
<td><label>Années:</label></td>
<td><input type="text" id="email" name="email" /></td>
<td><input type="submit" id="addemail" value="Ajouter" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
And Here my php file
<?php
$connection = mysql_connect('localhost', 'XXX', 'XXX');
$db= mysql_select_db('mydb', $connection);
$email= $_POST["email"];
$query = 'INSERT INTO users(email) VALUES ("'.mysql_real_escape_string($email).'")';
mysql_query($query);
?>
My problem is it's not working... BUT if I put a breakpoint after the ajax it works, it write well the email in the db BUT then I ve the two console log (success! and error! )... Also if I add action="addemail.php" to the form, it wont execute Ajax and going to the php page (wich is blank ofc but write well in the db...)
Anyone to help me?
After the $.ajax({}) you need to put
return false;
Otherwise, even if the ajax is successful, it'll keep executing and go to the php page.
This is wrong:
success: console.log("success!"),
that way, you are executing the log call straight away, and assigning its result to success.
What you want is to create two anonymous functions that will get executed when the event happens:
success: function() { console.log("success!"); },
error: function() { console.log("error!"); },
Success and error need to be wrapped as functions:
success: function (data, textStatus, jqXHR) { console.log("success!") },
error: function (jqXHR, textStatus, errorThrown) { console.log("error!") }