Unable to submit a form using Ajax

Question

I'm trying to submit a form and process it with php. Here's what I do (it simplified but still not working...)

here my index :

<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>
        $().ready(function(){
        $("#addemail").click(function(){
        var email=$("#email").val();
        $.ajax({
            type: "POST",
            url: "addemail.php",
            data: "email="+email,
            success: function(){
                console.log("success! ")
                },   
            error:  console.log("error!! ")    
            });        
        }); 
    });
    </script>
</head>
<body>        
    <div id="wrapper">        
          <h2>Mon form...</h2>
          <form action="">
              <table>
                <tr><td><label>Email:</label></td>
                    <td><input type="text" id="email" name="email" /></td>
                    <td><input type="submit" id="addemail" value="Add" /></td>
                </tr>  
               </table>                   
          </form>               
    </div>
</body>

Here's my php file:

<?php
$connection =  mysql_connect('localhost', 'XXX', 'XXX');
$db=  mysql_select_db('mydb', $connection);
$email= $_REQUEST["email"];
$query  = "INSERT INTO users(email) VALUES ('$email')";
mysql_query($query);

?>

What Am I doing wrong (probably not the php because if i give it to action in my form it s working but in php not ajax...) Thanx in advance

Define `not working`. Do you get errors? What does the console tell you? — PeeHaa, Dec 11 '11 at 16:24
@PeeHaa : Well, yes I only have the 'error!!' logged in the console...How can I better debug jquery? — , Dec 11 '11 at 16:34
@SLaks : How can I prevent this? (I'm newbie with php and Jquery....) — , Dec 11 '11 at 16:35
In Chrome you have the network tab in the developer toolbar. Something like that is also available in Firebug to see exactly what is being send to what URL. And also what is returned. — PeeHaa, Dec 11 '11 at 16:40

score 1 · Accepted Answer · answered Dec 11 '11 at 16:36

1

 $email= $_REQUEST["email"];
 $query  = "INSERT INTO users(email) VALUES ('$email')";
 mysql_query($query);

SQL Injection Vulnerability!

 $email= mysql_real_escape_string(stripslashes($_POST["email"]));

Also, wouldn't you need to add semicolons?

 success: function(){
     console.log("success!");
 },

And put the error inside an anonymous function?

 error: function(){
     console.log("error!");
 }

Also your form should be as complete as possible:

<form id="formContact" method="post" action="addemail.php">
    <input type="text" name="email" id="email" />
    <input type="submit" id="addemail" value="Add"/>
</form>

answered Dec 11 '11 at 16:36

Fabián Heredia Montiel

1,687
1
16
30

http://stackoverflow.com/questions/1522313/php-mysql-real-escape-string-stripslashes-leaving-multiple-slashes If Magic Quotes is on, then you could end up with horrible chains of \\ slashes. – Fabián Heredia Montiel Dec 11 '11 at 16:42
Thanx but if I do action="addemail.php" et goes on this page (wich is blank...) and do not execute ajax... why? – Dec 11 '11 at 17:15
jquery-1.7.1.min.js must be included! You must have it in your path. – Fabián Heredia Montiel Dec 11 '11 at 17:19

score 0 · Answer 2 · answered Dec 11 '11 at 16:33

Give that a try, I use this and looking at your code in your form looks like your missing your method=post, also in your php you use $_POST not request..

$(document).ready(function () {
        $("#formContact").submit(function(event) {
        /* stop form from submitting normally */
        //event.preventDefault(); 
        $.post("sendemail.php", $("#formContact").serialize());
        return false;
    });
});


<form id="formContact" method="post" action="/">
<input type="text" name="name" id="name" />
<input type="submit" name="submit" value="send"/>
</form>

Well, there's improvement but still not working as I want... If I give the php to the target of the form it will go on this page and not execute Ajax... When I dont give anything in the action, now it write into the db BUT I can't see my logs when I put a breakpoint after Ajax... — , Dec 11 '11 at 17:01

dku.rajkumar · Answer 3 · 2011-12-11T18:38:19.003

I am not sure if this is the problem but you can give a try.. document is misssing in ready statement and also give the data in hash format and also you should write a function for error too. Please try below code:

<script type="text/javascript">
        $(document).ready(function(){
        $("#addemail").click(function(){
        var email=$("#email").val();
        $.ajax({
            type: "POST",
            url: "addemail.php",
            data: {
            email:email
            },
            success: function(){
                console.log("success! ")
                },   
            error:  function(){
              console.log("error!! ")    }
            });        
        }); 
    });
    </script>

Unable to submit a form using Ajax

3 Answers3