Trying to save value from ajax/jquery submit form in database - php

Question

I have CSS Pie chart which when I click on one of the pies, it opens a simple submit form.
The problem is that when I click submit button nothing goes into the database. Just shows thank you message and this is it. Nothing in the console.
I have put the pie chart front part here: https://jsfiddle.net/096hgmqd/. When you click on Button 1 it opens the form below.
Here is the jquery/ajax part
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://res.cloudinary.com/positionrelativ/raw/upload/v1492377595/jquery.rwdImageMaps_lq5sye.js'></script>
<script src="script.js"></script>
<script>
// validate form on keyup and submit
var formData = new FormData(form);
$("#loadingmessage").show();
$.ajax({
url: "submit.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data) {
if(data == 'success') {
$("#loadingmessage").hide();
$("#sucessmsg").show();
}
if(data == 'error') {
$("#loadingmessage").hide();
$("#errormsg").show();
}
},
error: function(){}
});
</script>
And the PHP part - submit.php
$connect = new PDO("mysql:host=localhost;dbname=MYDBNAME", "DBUSERNAME", "DBPASSWORD");
$message = '';
if(isset($_POST["saveAnswers"])) {
$query = "INSERT INTO clarity (name) VALUES (:name)";
$user_data = array( ':name' => $_POST["name"] );
$statement = $connect->prepare($query);
if($statement->execute($user_data)) {
$message = '<div class="alert alert-success"> Registration Completed Successfully </div>';
} else {
$message = '<div class="alert alert-success"> There is an error in Registration</div>';
}
}
Can anyone help here?
UPDATE: current code:
$( document ).ready(function() {
$('form').on('submit',function(e){
e.preventDefault();
$.ajax({
url: "submit.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data) {
if(data.result == 'success') {
$("#loadingmessage").hide();
$("#sucessmsg").show();
} else if(data.result == 'error') {
$("#loadingmessage").hide();
$("#errormsg").show();
}
},
error: function(){}
});
});
});
And PHP
if(isset($_POST["saveAnswers"]))
{
sleep(5);
$query = "INSERT INTO clarity (name) VALUES (:name)";
$user_data = array(
':name' => $_POST["name"]
);
$statement = $connect->prepare($query);
$response = 'error';
if($statement->execute($user_data)) {
$response = 'success';
}
echo json_encode(array('result' => $response));
}
HTML form
<form class="form-wrapper" action="" method="post" id="submitForm1">
<fieldset class="section is-active">
<h3>What is your name?</h3>
<input type="text" name="name" id="name" placeholder="Your Name">
<button type="submit" class="button" name="saveAnswers" id="saveAnswers">Submit</button>
</fieldset>
</form>

Answer 1

you need to submit your form.Your ajax request will fire as soon as the page loads not on form submit.
$('form').on('submit',function(e){
e.preventDefault();
$.ajax({
url: "submit.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data) {
if(data == 'success') {
$("#loadingmessage").hide();
$("#sucessmsg").show();
}
if(data == 'error') {
$("#loadingmessage").hide();
$("#errormsg").show();
}
},
error: function(){}
});
});

Answer 2

For the DB problem, you first need to fix the communication between PHP and JS. Also, you can debug the data with console.log(form) in JS. You can also debug at the server-side, you can return the debugging data, especially the $_POST like this:
$debug = var_export($_POST, true);
echo json_encode(array('debug' => $debug);
And you can view the response in the Developer Console of your browser, to see whether the information is received by the PHP or not.
Your PHP does not return anything. You just saved the output to a variable named $message. In your jQuery AJAX call, you expect there are some data returned, either success or error, but your PHP script does not provide these.
Try to change the PHP if-else clause to:
$response = 'error';
if($statement->execute($user_data)) {
$response = 'success';
}
echo json_encode(array('result' => $response));
and add the following line to the very first line of PHP:
header('Content-Type: application/json');
Last, in your jQuery call, change the if-else clause in the success handler to:
if(data.result == 'success') {
$("#loadingmessage").hide();
$("#sucessmsg").show();
} else if(data.result == 'error') {
$("#loadingmessage").hide();
$("#errormsg").show();
}

Answer 3

You have mentioned that you don't see anything on the Network tab. This means that there is "no connection" between your Ajax/jQuery and PHP parts and I believe that the actual problem is in your Ajax part. You can try like this. (I have tested it and it works just fine).
HTML part
<p id="show_message" style="display: none">Form data sent.</p>
<span id="error" style="display: none"></span>
<form class="form-wrapper" action="" method="post" id="submitForm1">
<fieldset class="section is-active">
<h3>What is your name?</h3>
<input type="text" name="name" id="name" placeholder="Your Name">
<button type="submit" class="button" name="saveAnswers" id="saveAnswers">Submit</button>
</fieldset>
</form>
Ajax part
<script type="text/javascript">
$(document).ready(function($){
// hide messages
$("#error").hide();
$("#show_message").hide();
// on submit...
$('#submitForm1').submit(function(e){
e.preventDefault();
$("#error").hide();
// if name is required
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// ajax
$.ajax({
type:"POST",
url: "submit.php",
data: $(this).serialize(), // get all form field value in serialize form
success: function(){
$("#show_message").fadeIn();
}
});
});
return false;
});
</script>