How to save html values to MySQL using ajax?

Question

I'm trying to make an HTML table dynamically. I'm just testing with sample, but It's not working as well as I expected. So, I'm asking this question. Let me show you this simple table, it is MySQL database. and I create HTML table.

What I want to do is when I click some node, like a '250', this number will be editable. Edited data will be saved to the MySQL database. So I use the contenteditable="true" attribute value, and when this node loses focus, run some JavaScript function that new data will be saved.

But... It's not working well. Honestly I don't know what the problem is exactly. Google chrome spit up "Uncaught Syntax Error, Unexpected token } ", But I couldn't find what the actual problem is. I'm newbie on this... Could you some guys help me?

sample.html

<body>
<?php

require_once("db_connect.php");
$sql = "SELECT * FROM test";
$result = $conn->query($sql);
?>

<table border="1" style="border-collapse:collapse;">
<thead>
<tr><th>name</th><th>price</th></tr>
</thead>

<tbody>
<?php
    while($row = $result->fetch_assoc()){
        echo
        "<tr>
        <td contenteditable='true' onBlur='saveToDatabase(this,'name','$id')'>{$row['name']}</td>
        <td contenteditable='true' onBlur='saveToDatabase(this,'price','$id')'>{$row['price']}</td>
        </tr>\n";
      }
?>
</tbody>
</table>


<script>
function saveToDatabase(editableObj, column, id) {
    $.ajax({
        url: "saveedit.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        } 
   });
}
</script>



</body>

</html>

saveedit.php

<?php

require_once("db_connect.php");
$result = mysql_query("UPDATE test SET ". $_POST["column"]. " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);

?>

I don't think onBlur works on `td` elements. Anyway the way you called it, by using `onBlur='saveToDatabase(this,'name','$id')'` will not work.You have either to escape the single quotes inside the onBlur call, or to use escaped double quotes to surround the `saveToDatabase` call. It should be something like this: `onBlur=\"saveToDatabase(this, 'name', '$id')\"` P.s.: you are extremely exposed to SQLinjections anyway. — Niccolò Campolungo, Dec 02 '15 at 10:05
Read this: http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php?rq=1 — miken32, Dec 04 '15 at 00:32

score 0 · Answer 1 · answered Dec 03 '15 at 21:10

You made it contenteditable but PHP needs an parameter. For example

<input type="text" name="parameter">

will send as $_POST['parameter'] but in your code <td> elements don't have a name. So PHP doesn't know if there is a parameter or what name is.

Maybe you can write your own editable function in Javascript like this:

    function doTextArea(i) {
document.getElementById(i).innerHTML="<input type='text' name='table_value'>ssss.";

}

and your php loop can be like this ( I assume it is for loop):

 for ($i = 1; $i <= 10; $i++) {
        echo
        "<tr>
        <td><p id=$i ondblclick='doTextArea($i)'> sadasdasdasd</p></td>
        </tr>\n";
      }

How to save html values to MySQL using ajax?

1 Answers1