Form, AJAX and PHP

Question

I have a simple Subscribe form that I want to get the contents of an 'email' input to post to a MySQL db using AJAX. This is successfully creating a record with the date and time but not inserting the email address.

Can anyone see what's wrong with the following please?

form.php

<form id="subscribe" action="?action=signup" method="post" data-abide>
  <div class="row collapse">
    <div class="large-10 large-centered columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
    <div class="email-field">
          <input type="email" name="email" id="email" placeholder="Your Email Address" required>
      <small style="padding-left:10px; "class="error">Please enter a valid email address</small>
        </div>
    </div>
        <div class="small-3 columns">

      <input type="submit" id="button" class="button success postfix" value="Subscribe">
        </div>
      </div>
    </div>
  </div>
</form>

<span style="display:none;" id="message"><small><i class="fa fa-check" aria-hidden="true"></i> Subscribed</small></span>

<script type="text/javascript">
$(document).ready(function(){
    $('#subscribe').submit(function(){

        var data = $(this).serialize();

            $.ajax({
                type: 'post',
                url: 'subscribe_insert.php',
            data: data,
                success: function(data) {
            $("#message").fadeIn(250);
                }
            });
        return false;
   });
});
</script>

subscribe_insert.php

<?php

   include($_SERVER["DOCUMENT_ROOT"]."/dbconnect.php");

   $email = mysql_real_escape_string($_POST['email']);
   $date_time = date("Y-m-d H:i:s");

   $sql  = "INSERT INTO subscribe 
            (email,
            date)
            VALUES
            ('$email',
            '$date_time')"; 

   if ($conn->query($sql) === TRUE) {
    echo "";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

?>

Thanks,

John

don't use deprecated version of mysql_* .Use mysqli_* or PDO with prepared statements.Easy to use, prevent all security loop-holes — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jun 26, 2017 at 9:35
where do I place the var_dump($_POST) command? I won't see the results if it's in the ajax called php file. — John Higgins
– John Higgins, Commented Jun 26, 2017 at 9:41
You can place it right in the file where you insert the data, To see the var_dump results, send the form as it is now (using ajax) but be sure to have the console opened before sending it. In chrome you have to also have the keep "Log XMLHttpRequests" checkbox checked, then when you see the request that your ajax call made click the php file and go to response, there you'll see the var_dump results — Heriberto Juarez
– Heriberto Juarez, Commented Jun 26, 2017 at 9:43

Reuben Gomes · Accepted Answer · 2017-06-26 10:41:56Z

1

$(document).ready(function(){
    $('#subscribe').submit(function(e){
e.preventDefault();
        var data = $(this).serialize();
console.log(data)
            $.ajax({
                type: 'post',
                 dataType: 'JSON',
                url: 'subscribe_insert.php',
            data: data,
                success: function(data) {
            $("#message").fadeIn(250);
                }
            });
        return false;
   });
});

replace your code with this then open your browser console and check if the data s getting posted

if you can see the your email there then check if the data is at the server

in you php page copy all the contents from the page and replace

<?php 
 echo json_encode($_POST)
?>

and once again check console this time you should see data from the server

if both are correct put your original php code back it

answered Jun 26, 2017 at 10:41

Reuben Gomes

8629 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

John Higgins Over a year ago

I did as you said and I could see the email address fine. Unfortunately, still not inserting the email address into the db. I am now guessing its something with the following line: $email = mysqli_real_escape_string($_POST['email']);

Reuben Gomes Over a year ago

in your db is your email data type set to string?

John Higgins Over a year ago

It's set to a varchar

Reuben Gomes Over a year ago

hmm if its still not working replace mysql_real_escape_string($_POST['email']) with a string abc see if that adds to db

Reuben Gomes Over a year ago

w3schools.com/php/php_mysql_prepared_statements.asp refer to this site for prepared statments

|

Heriberto Juarez · Accepted Answer · 2017-06-26 10:07:21Z

Check in your database that email has the correct attributes:

For exaple check that you have at least x characters allowed to be stored, check for the type of the field:

It could be int when it it really should be something like varchar

var_dump details:

form.php is ok for this purpose. But we are going to modify the php file temporarily to check for "post" error in the email field:

<?php

   include($_SERVER["DOCUMENT_ROOT"]."/dbconnect.php");

   $email = mysql_real_escape_string($_POST['email']);
   var_dump($email);  //dump email value
   /* comment this peace
   $date_time = date("Y-m-d H:i:s");

   $sql  = "INSERT INTO subscribe 
            (email,
            date)
            VALUES
            ('$email',
            '$date_time')"; 

   if ($conn->query($sql) === TRUE) {
      echo "";
   } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
   }
  */

?>

Now follow the next steps:

Open chrome
Open your webpage
Hit F12
Check the "Log XMLHttpRequests" checkbox
Send your form and you will se something in the console like: XHR finished loading: POST http://localhost//folder/subscribe_insert.php
Click the logged url of your console
You may see a list of resources (depends of your project)
Click the one that has the subscribe_insert.php title
To your right you will see some tabs click response

If there was some error or some data was echoed from that file (In this case our var_dump) you will see it there.

If you see the email actually printing out It might be a database problem as I started tellong you.

I know there are too many steps but it's very fast to do it, I hope I have helped you, greeting!

Collectives™ on Stack Overflow

Form, AJAX and PHP

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related