'result of my js calculation is not stored in mysql

Good day,

I experimented with a simple JS math calculation. this calculation works as expected, but additionally I wanted to store the math calculation in a database where all values (the input fields and the result .textContent) should be stored. Afterwards the calculation should be named and populated by a dropdown menu, but that's a different story.

So, I added some nice ajax code, see this: https://phppot.com/php/php-mysql-inline-editing-using-jquery-ajax/

Everything works as expected, the only issue I have is that I don't get the result of the math automatically updated into the database, so if I change the math input fields or refresh the site, the result is lost.

I put up an live example with mysql backened to show you exactly what I mean:

http://90.153.105.10:8888/djdp42Bjjr39399nfjjj39xleit832991vnJ39921/live/test.php

dbcontroller.php:

<?php
class DBController {
    private $host = "ip";
    private $user = "root";
    private $password = "thepassword";
    private $database = "the database";
    private $conn;
    
    function __construct() {
        $this->conn = $this->connectDB();
    }
    
    function connectDB() {
        $conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
        return $conn;
    }
    
    function runQuery($query) {
        $result = mysqli_query($this->conn,$query);
        while($row=mysqli_fetch_assoc($result)) {
            $resultset[] = $row;
        }       
        if(!empty($resultset))
            return $resultset;
    }
    
    function numRows($query) {
        $result = mysqli_query($this->conn,$query);
        $rowcount = mysqli_num_rows($result);
        return $rowcount;   
    }
    function executeUpdate($query) {
        $result = mysqli_query($this->conn,$query);        
        return $result;     
    }
}
?>

saveedit.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$result = $db_handle->executeUpdate("UPDATE database_table set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);;
?>

test.php

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script>

        function showEdit(editableObj) {
            $(editableObj);
        } 
        
        function saveToDatabase(editableObj,column,id) {
            $(editableObj);
            $.ajax({
                url: "saveedit.php",
                type: "POST",
                data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
                success: function(data){
                    $(editableObj);
                }        
           });
        }
        
        </script>
        
   </head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>}
</style>
<body>

<table class="tbl-qa">

<tr>
    <td >DESCRIPTION:</td>
                      
        <td contenteditable="true" id="Event" onBlur="saveToDatabase(this,'event','0')" onClick="showEdit(this);">This is a simple stored description for the following math. As you can see, the result and math values are editiable. But the RESULT is not beeing stored nor will it get calculated when refreshing the site :/<br></td>
            
                 
        </table>
<hr>
<table class="tbl-qa">
      <tr>
    <td>VALUE 1:</td>
                      
        <td contenteditable="true" id="Tank" size="2" oninput="output();output2();output3();" onBlur="saveToDatabase(this,'Tank','0')" onClick="showEdit(this);">10</td>
            
         
    <td>VALUE 2:</td>
                      
        <td contenteditable="true" id="Spritverbrauch" size="2" oninput="output();output3();" onBlur="saveToDatabase(this,'Spritverbrauch','0')" onClick="showEdit(this);">2</td>
            
         
   </tr>
   <tr>
  <p></p>
<td>RESULT: </td>
                                  
        <td contenteditable="true" size="2" id="StintlangeRd" oninput="output();output3();" onBlur="saveToDatabase(this,'StintlangeRd','0')" onClick="showEdit(this);"></td>
            
         
    </tr>
</table>
<script type="text/javascript">

function output(){

    var value2 = document.getElementById('Tank').textContent;
    var value3 = document.getElementById('Spritverbrauch').textContent;
    document.getElementById('StintlangeRd').innerHTML = (parseFloat(value2) / parseFloat(value3)).toFixed(2);

}

</script>

<script type="text/javascript">
   setTimeout(function(){
       location.reload();
   },60000);
</script>


</body>
</html>
javascripthtmlajax


Solution 1:[1]

After updating try to run a query with 'COMMIT' to confirm the update on mysql database!

Solution 2:[2]

You could check if the values arrive at your update script. I think the problem may lie within your AJAX call:

function saveToDatabase(editableObj,column,id) {
            $(editableObj);
            $.ajax({
                url: "saveedit.php",
                type: "POST",
                data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
                success: function(data){
                    $(editableObj);
                }        
           });
        }

Inside this function, you set the data by passing a query string. Instead of a query string, you should use a plain old javascript object.

data: {
    column : column,
    editval : editableObj.innerHTML,
    id : id
},

Solution 3:[3]

Change Ajax Post Data you are sending data in GET method and trying to get data by POST Method

function saveToDatabase(editableObj,column,id) {
  $.ajax({
    url: "saveedit.php",
    type: "POST",
    data: {
      column : column,
      editval : editableObj.innerHTML, // just check it or use $(editableObj).html() if necessary
      id : id
    },
    success: function(data){
      // you will get your response here which is sent from server
    }        
   });
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Micolho
Solution 2 Toine H
Solution 3

Related Questions