Update mySql based specific onChange

Question

I have a page that present a big table in my SQL DB, and every cell is an HTML input. The goal is to make a editable sql table that update my SQL DB based on changed in specific cell in big table form. I tought about making a script that trigger a JS function when a cell-change occurs, that update the specific change. Is it possible? Any other idea?

This is a draft of my idea. The issue is the While loop that present the table

 <script>
 $(document).ready(function(){
    $('#testnum').on('change', 'input', function(){
          $.post("getter.php",{###Don't know what to put here###);
    });
 });
  </script>


 <?php
    while($res=mysqli_fetch_array($result))
        {
         echo "<tr>
         <td onchange='changeit(fin)'>
         <div name='fin' style='display:none;'> ".$res['first'] ."</div>
         <input type='int' value=".$res['first'].">
        </td>
        <td onchange='changeit(sta)'>
            <div name='sta' style='display:none;'>".$res['second']."</div>
            <input type='int' value=".$res['second'].">
            </td>
            <td>";
    ?>

EDIT

For example - how can I pass David's ID if I change his city? (This table printed with WHILE statement)

ID    name     city
-------------------
1     David    NY
--------------------
2     John     LA
-------------------
3     Adam     NJ

if I change David's city to "London" for example I want to send 3 things:

1) The ID - so I know which specific row. (in this case - "1")

2) The column name - so I can know which column has changed. (in this case - "city")

3) The data after change - so I know what to update. (in this case - "London")

You'll need to send some data in the $.post, check this api.jquery.com/jquery.post . And which is the query of the result, is well written? Returns data? In the post callback, you can put something like $('#somediv').html(data); — Salvador P.
– Salvador P., Commented Aug 30, 2016 at 7:51
Yeah I know.. The issue is that I want to change for example David name but if I send the new name how can I know which row to change? I want to send the ID but it in other cell. — Dvir Naim
– Dvir Naim, Commented Aug 30, 2016 at 7:54
I'll need to check but maybe, you can use a class for each row, like <td class="name-row"> and then use the $(this) operator to change only the affected row. — Salvador P.
– Salvador P., Commented Aug 30, 2016 at 7:56

Salvador P. · Accepted Answer · 2016-08-30 09:24:13Z

1

Hi you can use something similar to this, you'll need to adapt it to your code and needs.

HTML FILE:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Check</title>
</head>

<body>

<table>
  <tbody>
    <tr class="row">
      <td class="col id"><input class="txtdata" name="id" value="1"></td>
      <td class="col name"><input class="txtdata" name="name" value="Jhon"></td>
      <td class="col city"><input class="txtdata" name="city" value="NY"></td>
    </tr>
    <tr class="row">
      <td class="col id"><input class="txtdata" name="id" value="2"></td>
      <td class="col name"><input class="txtdata" name="name" value="Jane"></td>
      <td class="col city"><input class="txtdata" name="city" value="LA"></td>
    </tr>
  </tbody>
</table>

</body>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
</html>

<script>
$(document).ready(function($) {
  $('.txtdata').on('change', function(){
    var parent = $(this).parent('.col').parent('.row');
    var id = $(parent).find('.id').find('input').val();
    var name = $(parent).find('.name').find('input').val();
    var city = $(parent).find('.city').find('input').val();
    var attribChanged = $(this).attr('name');
    data = {id: id, name: name, city: city, attribChanged: attribChanged};
    $.post('getter.php', data, function(data){
      $(parent).html(data);
    });
  });
});
</script>

PHP FILE:

<?php 
$name = $_REQUEST['name'] . '(mod)';
$id = $_REQUEST['id'] . '(mod)';
$city = $_REQUEST['city'] . '(mod)'; 
echo '<td class="id"><input class="txtdata" name="id" value="'.$id.'"></td>
      <td class="name"><input class="txtdata" name="name" value="'.$name.'"></td>
      <td class="city"><input class="txtdata" name="city" value="'.$city.'"></td>';
?>

edited Aug 30, 2016 at 9:24

answered Aug 30, 2016 at 8:10

Salvador P.

1,48920 silver badges17 bronze badges

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

6 Comments

Dvir Naim Over a year ago

I tried this now...doesn't work... Read the edit I made - this is what you tought I ment?

Salvador P. Over a year ago

Ok so you need to send the ID of the row to change it in the DB too, and update the table with the new name. Basically reflect in the DB any change you do to the table. is that what you want?

Dvir Naim Over a year ago

precisely, if I change David's city to "London" for example I want to send 3 things: 1) The ID - so I know which specific row. (in this case - "1") 2) The column name - so I can know which column has changed. (in this case - "city") 3) The data after change - so I know what to update. (in this case - "London")

Salvador P. Over a year ago

Hi check the answer, I've just updated it. I think it's what you need, but you'll have to adapt it to your code. Now is sending the ID, Name and City.

Salvador P. Over a year ago

Now sends the attribute which has been changed in an extra parameter "attribChanged"

|

Phi Huynh · Accepted Answer · 2016-08-30 09:52:16Z

PHP file:

<?php
  echo '<table>';
  while($res=mysqli_fetch_array($result)){
    echo '<tr>';
      echo '<td>$res['id']</td>';
      echo '<td onchange="changeit($res['id'], \'name\', this)"><input type="text" value="$res['name']"/></td>';
      echo '<td onchange="changeit($res['id'], \'city\', this)"><input type="text" value="$res['city']"/></td>';
    echo '</tr>';
  }
  echo '</table>';

Jquery:

function changeit(id, field, element){
  var newVal = element.find('input').val();
  $.post("getter.php",{
    "id": id,
    "field": field,
    "newVal": newVal
  }, function(result){
     if(result == 'success'){
       alert('id: '+ id);
       alert('column: '+ field);
       alert('what change: '+ newVal);
     }
  });
}

PHP file getter.php:

$id = $_POST['id'];
$field = $_POST['field'];
$newVal = $_POST['newVal'];
$sql = mysql_query("UPDATE table_name SET $field = $newVal WHERE id = $id");
if($sql) echo 'success'; else echo '0';

Hope helpful for you.

Collectives™ on Stack Overflow

Update mySql based specific onChange

EDIT

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related