表格，AJAX和PHP

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

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:

1. Open chrome
2. Open your webpage
3. Hit F12
4. Check the "Log XMLHttpRequests" checkbox
5. Send your form and you will se something in the console like: XHR finished loading: POST http://localhost//folder/subscribe_insert.php
6. Click the logged url of your console
7. You may see a list of resources (depends of your project)
8. Click the one that has the subscribe_insert.php title
9. 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!

$(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