Using JQuery AJAX and php to fetch data to a mysql database

Question

Im trying to insert data into my database with AJAX but dont working. I can verify that im connected to the database but when i click it doesnt insert the data. thanks

with a click function i take the 2 parameter that i wanna insert in my database.

$( "#q_answer1" ).click(function () {
      var q_no = $("#q_no").val(); 
      var main_no = $("#total_no").val();

      $.ajax({
         url: "server.php",
         type: "post",
         async: false,
         data: {
            "done": 1,
            "username": q_no,
            "comment": main_no

         }, 
         success: function(){
            $("#q_no").val('');
            $("#total_no").val('');
         }
      });
  });

And here is the php file, first connect to the ddbb and insert the 2 values with the mysql_query.

<?php
include("dbh.php");
if (isset($_POST['done'])) {
   $q_no = mysql_escape_string($_POST['username']);
   $total_no = mysql_escape_string($_POST['comment']);

   mysql_query("INSERT INTO variables(id, names) VALUES('{$q_no}', '{$total_no}')");
   exit();
}
?>

html is like this:

<div id="total_no">1</div>
<div id="q_answer1" class="btn left_b">yes</div>

PDO tutorial wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers — Junius L
– Junius L, Commented Apr 22, 2019 at 8:31

Junius L · Accepted Answer · 2019-04-22 09:11:20Z

1

I think you should use PDO, to connect to the database instead of the old driver, which PHP no longer supports. with PDO you can use prepared statements to prevent sql injections

PDO tutorial

filter_var() Constants

dbh.php

$servername = "localhost";
$username = "user";
$password = "pass";
$dbname = 'db';

try {

  $db = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  }
  catch(PDOException $e)
  {
    exit($e->getMessage());
  }

?>

serve.php

<?php

include("dbh.php");
if (isset($_POST['done'])) {

   $q_no = filter_var($_POST['username'], FILTER_SANITIZE_STRING);
   $total_no = filter_var($_POST['comment'], FILTER_SANITIZE_STRING);

try {

  $stmt = $db->prepare("INSERT INTO variables(id, names) VALUES(?, ?)");
  $stmt->execute(array($q_no, $total_no));

  echo json_encode(["message" => "success"]); // sends success response to front-end 

} catch (\Exception $e) {
  echo json_encode(["message" => $e->getMessage() ]); // sends error response to front-end
}


}
 ?>

in your ajax check if the data was inserted or not.

$("#q_answer1").click(function() {
  var q_no = $("#q_no").val();
  var main_no = $("#total_no").val();

  $.ajax({
    url: "file.php",
    type: "post",
    async: false,
    data: {
      "done": 1,
      "username": q_no,
      "comment": main_no

    },
    success: function(data) {

      const respose = JSON.parse(data);

      if (respose.message === 'success') { // data was inserted 

        $("#q_no").val('');
        $("#total_no").val('');

      }else {
        alert(respose.message); // some error has occured
      }
    }
  });
});

edited Apr 22, 2019 at 9:11

answered Apr 22, 2019 at 9:04

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

2 Comments

Jacofki Over a year ago

@junius-ln i got this error after implementing your code: SQLSTATE[HY000]: General error: 1366 Incorrect integer value: '' for column 'id' at row 1

Junius L Over a year ago

@Jacofki it means you tried to insert a string into integer column. stackoverflow.com/questions/29462919/…

Rohan Varma · Accepted Answer · 2019-04-22 07:10:15Z

0

You have to take value of div as mentioned below,

var q_no = $("#q_no").text(); 
var main_no = $("#total_no").text();

Pass data in key-value Pair, After pass first key-value data concate other data with & sign key.

$( "#q_answer1" ).click(function () {
          var q_no = $("#q_no").val(); 
          var main_no = $("#total_no").val();

          $.ajax({
             url: "server.php",
             type: "post",
             async: false,
             data: 'done=' + 1 + '&username=' + q_no + '&comment=' + main_no,
             success: function(){
                $("#q_no").val('');
                $("#total_no").val('');
             }
          });
      });

answered Apr 22, 2019 at 7:10

Rohan Varma

1017 bronze badges

Comments

Kunal Virk · Accepted Answer · 2019-04-22 07:11:00Z

0

You can't use val() on div. Try using text() and then check if your server.php is getting these value.

Thanks

answered Apr 22, 2019 at 7:11

Kunal Virk

1715 bronze badges

Comments

Rakesh Jakhar · Accepted Answer · 2019-04-22 07:11:56Z

0

You have typo error in jquery

$qAnswer1.click(function () {

Should be

$('#q_answer1').click(function () {

You can try following to test

$( "#q_answer1" ).click(function() {
  alert( "Handler for .click() called." );
});

Include the jquery at the top of your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Full working code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total_no">1</div>
<div id="q_answer1" class="btn left_b">yes</div>
<script type="text/javascript">
  $( "#q_answer1" ).click(function () {
    var q_no = $("#q_no").val(); 
    var main_no = $("#total_no").val();

  $.ajax({
     url: "ajax.php",
     type: "post",
     async: false,
     data: {
        "done": 1,
        "username": q_no,
        "comment": main_no

     }, 
     success: function(){
        $("#q_no").val('');
        $("#total_no").val('');
     }
  });
});
</script>

in your PHP file try to print $_POST to see its working.

edited Apr 22, 2019 at 7:11

answered Apr 22, 2019 at 6:51

Rakesh Jakhar

6,4082 gold badges13 silver badges20 bronze badges

5 Comments

Rakesh Jakhar Over a year ago

@Jacofki have you included jquery at the top ?

Rakesh Jakhar Over a year ago

@its working, if you click on yes , try the handler code

Jacofki Over a year ago

Thanks @rakesh-jakhar, after that change i get a 500 (Internal Server Error) in the server.php (for you ajax.php).

Rakesh Jakhar Over a year ago

make sure the path of server.php

Jacofki Over a year ago

is correct, and also i get this message: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org.

Collectives™ on Stack Overflow

Using JQuery AJAX and php to fetch data to a mysql database

4 Answers 4

2 Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related