Form, AJAX and PHP - 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

Answer 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

Answer 2

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!