Issue with form and Ajax

Question

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?

Welcome to Stack Overflow! You are not doing any error checking in your query. You *need* to do that after a `mysql_query()` call. Otherwise, your script will break if the query fails. How to do this is outlined in the [manual on `mysql_query()`](http://php.net/mysql_query) or in this [reference question.](http://stackoverflow.com/questions/6198104/reference-what-is-a-perfect-code-sample-using-the-mysql-extension) — Pekka, Dec 11 '11 at 18:09

score 3 · Accepted Answer · answered Dec 11 '11 at 18:10

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!"); },

score 1 · Answer 2 · answered Dec 11 '11 at 18:12

1

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

answered Dec 11 '11 at 18:12

Kevin Ji

10,479
4
40
63

Thanx!!! Thats was the problem! But cant I just write : success: function () { console.log("success!") }, ???? – Dec 11 '11 at 18:16
1

@blop Yes. Usually, though, you might want access to the data (for success), or the error thrown (for error), so I left the parameters if you needed them. – Kevin Ji Dec 11 '11 at 18:19

score 0 · Answer 3 · answered Dec 11 '11 at 18:09

0

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.

answered Dec 11 '11 at 18:09

john

1,322
11
22

I'm pretty sure jQuery takes care of the event handlers fine. – Kevin Ji Dec 11 '11 at 18:10
Nope. If you don't add the return false, it won't work properly. I just had the same issue the other day. – john Dec 11 '11 at 18:13
That has never been an issue with me, at least. – Kevin Ji Dec 11 '11 at 18:14
@mc10 I think I may now why it is an issue some places and not others (I haven't tested the theory but it makes sense). If you have the action in the form then you'd need the `return false` but if you don't then the page won't do anything without the ajax call anyway so you wouldn't need the `return false`. – john Dec 11 '11 at 18:25

Issue with form and Ajax

3 Answers3