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

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 > Registration Completed Successfully </div>';
    } else {
        $message = '<div > 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  action="" method="post" id="submitForm1">
    <fieldset >
      <h3>What is your name?</h3>
      <input type="text" name="name" id="name" placeholder="Your Name">
      <button type="submit"  name="saveAnswers" id="saveAnswers">Submit</button>
    </fieldset>
  </form>

CodePudding user response：

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(){}             
});
});

CodePudding user response：

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();
}