Save the data from editable form to database

Question

I have an editable form that allows me to change data when i click on a specific field, but i am not able to save the new data in database.(code @fiddle )

html code

<table>
  <tr>

    <td><span>text</span>
      <input type='text' name='text' value='text' class='toedit' readonly='readonly' />
    </td>

  </tr>

</table>

script

$("table").on("focus", "input, select", function() {
  $(this)
    .prop("readonly", false)
    .removeClass("toedit");
});

$("table").on("blur", "input, select", function() {
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
});

$("table").on("click", "td", function() {
  $(this).children().focus();
});

Edit query would be something like this, but don't know how to fetch value from script and add it to the below query

   $sql1="UPDATE `table_name` set name='".$text."' WHERE id='".$tableid."' ";
if(!mysqli_query($con,$sql1))
    {
        die('Error:' . mysqli_error($con));
    }

Table structure of table_name is something like this

id  name
1    N1
2    N2

Answer 1

Do it as

HTML

  <form name="frm" method="POST" action="">
  <input type="text" name="id" id="id" value="" />
     <input type="text" name="name" id="name" value="" />
     <input type="submit" name="Update" id="update" value="Update" />
    </form>

jQuery

    $("#update").click(function(e) {
      e.preventDefault();
var name = $("#id").val(); 
      var name = $("#name").val(); 
      $.ajax({
        type:'POST',
        data:dataString,
        url:'update.php',
        success:function(data) {
        }
      });
    });

The update.php page

 <?php
      $name = $_POST['name'];
      $id= $_POST['id'];
      $sql1="UPDATE `table_name` set name='".$name."' WHERE id='".$id."' ";
    if(!mysqli_query($con,$sql1))
        {
            die('Error:' . mysqli_error($con));
        }
    ?>

Answer 2

2 ways to do this. 1) Create a server side script which will store all the table data and call that script through Ajax. 2) Or call the server side page on the form submit.

Answer 3

In your $("table").on function, add AJAX to update your SQL.

Here is an AJAX tutorial to begin with https://phpseason.wordpress.com/2013/02/15/ajax-add-retrieve-mysql-records-using-jquery-php/ .

Pass the updated text and a reference (which uniquely identifies your record or row) using ajax to a PHP script. In that PHP script, update your SQL tables. After updating your table, echo a success message to AJAX, which will show a success message to user.

EDIT

use the code below;

$("table").on("blur", "input, select", function() {
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
  var dat = $(this).val();
  $.ajax({
    type:"post",
    url:"process.php",
    data:"data="+dat+"&key="+uniquekey,
    success:function(result){
      if(result == "true"){
        alert("data updated successfully");
      }else{
        alert("try again");
      }
    }
  });
});

here, uniquekey must be something, which identifies your row / entry in the table. Send it along with the data. dat is the updated text of input. Create a file called process.php and in that file, you may catch the contents using $_POST["data"] and $_POST["key"] .

Update your table with $_POST["data"] using the key / reference $_POST["key"] . After successful update, echo true in your php file, else echo something else. If the echo is true , then you will get an alert like data updated successfully , else, you will get an alert like try again .

Here is the fiddle: https://jsfiddle.net/blasteralfred/gss4vv6k/ .