how to use onchange to update mysql automatically when change the value - php

Question

I am editing a code which supposed to update database when value is change, however it doesn't work, hope someone could help me fix it.
I am using DISTINCT to get the data and need to update a few data at the same time. it can display the value, but it can't save in database.
for example, I will using DISTINCT to get a few data which with the same date and I will change values among those data at the same time by using that code.
index.php
<script>
window.onload = function() {
$(".cal_amount").change(function() {
var auto_array = {};
//Step 1- On change use The closest() method to get the all input elements value of selected element row.
form_data = $(this).closest('tr').find('input, select');
//Step 2- On change Use map to store input elements value with name as key in the array.
var myArray = $.map(form_data, function(element) {
auto_array[element.name] = element.value;
//return {name: element.name, value: element.value};
});
form_data = $(this).closest('tr').find('input,select').serialize();
$.ajax({
data: {
action: 'update_price',
form_data: form_data,
},
url: 'updates_ok.php',
type: 'post',
beforeSend: function() {
},
success: function(data) {
if(data == 1){
alert('update sucessful')}
}
});
});
};
</script>
<script>
window.onload = function() {
$(".day_record").change(function() {
var auto_array = {};
//Step 1- On change use The closest() method to get the all input elements value of selected element row.
form_data = $(this).closest('tr').find('input, select');
//Step 2- On change Use map to store input elements value with name as key in the array.
var myArray = $.map(form_data, function(element) {
auto_array[element.name] = element.value;
//return {name: element.name, value: element.value};
});
form_data = $(this).closest('tr').find('input,select').serialize();
$.ajax({
data: {
action: 'update_data',
form_data: form_data,
},
url: 'updates_ok.php',
type: 'post',
beforeSend: function() {
},
success: function(data) {
if(data == 1){
alert('update sucessful');}
}
});
});
};
</script>
update.php
<?php
if($_POST['action'] == 'update_price'){
//parse the serialize data
parse_str($_POST['form_data'], $my_form_data);
/*echo "<pre>";
print_r($my_form_data);*/
$id = $my_form_data['id'];
$gp_name = $my_form_data['gp_name'];
$price = $my_form_data['price'];
$cost = $my_form_data['cost'];
$sql= $query = $finalquery = $sqlresult = '';
if($cost){
$sql.="cost='$cost',";
}
if($price){
$sql.="price='$price',";
}
$finalquery = rtrim($sql,',');
$query="UPDATE `gp_info` SET $finalquery where id=$id";
$sqlresult=mysql_query($query);
if($sqlresult){
$reback=1;
}else{
$reback=0;
}
echo $reback;
}
if($_POST['action'] == 'update_data'){
//parse the serialize data
parse_str($_POST['form_data'], $my_form_data);
/*echo "<pre>";
print_r($my_form_data);*/
$gp_name = $my_form_data['gp_name'];
$date = $my_form_data['date'];
$day = $my_form_data['day'];
$sql= $query = $finalquery = $sqlresult = '';
if($date){
$sql.="date='$date',";
}
if($day){
$sql.="day='$day',";
}
$finalquery = rtrim($sql,',');
$query="UPDATE `gp_info` SET $finalquery where gp_name='$gp_name' AND date='$date' AND day='$day'";
$sqlresult=mysql_query($query);
if($sqlresult){
$reback=1;
}else{
$reback=0;
}
echo $reback;
}
?>

Answer 1

Try the below code. I mention the details in code with comments.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
window.onload = function() {
$(".update_row_data").change(function() {
//On change of update_row_data get the action name from current row
action = $(this).closest('tr').data('action');
form_data = $(this).closest('tr').find('input,select').serialize();
$.ajax({
data: {
//Use that action name in ajax request.
action: action,
form_data: form_data,
},
url: 'updates_ok.php',
type: 'post',
beforeSend: function() {
},
success: function(data) {
if(data == 1){
alert('update sucessful')}
}
});
});
};
</script>
<table border="1" align="center" style="table-layout:fixed">
<tbody id="_editable_table">
<!-- Add action name in row item with data attr-->
<tr data-action="update_price">
<!-- Add common class 'update_row_data' to all required field. -->
<input name="gp_name" style="border-style:none" type="hidden" class="update_row_data gp_name" value="">
<th>Date</th><td width="350px"><input name="date" size="10" style="border-style:none" type="text" class="update_row_data date" value=""></td>
<th>Country</th><td><input name="country" size="6" style="border-style:none" type="text" class="update_row_data country" value=""> </td>
<th>City</th><td><input name="city" size="8" style="border-style:none" type="text" class="update_row_data city" value=""></td>
</tr>
</tbody>
</table>
<table border="1" align="center" style="table-layout:fixed">
<tbody id="_editable_table">
<!-- Add action name in row item with data attr-->
<tr data-action="update_data">
<!-- Add common class 'update_row_data' to all required field. -->
<input name="gp_name" style="border-style:none" type="hidden" class="update_row_data gp_name" value="">
<th>Date</th><td width="350px"><input name="date" size="10" style="border-style:none" type="text" class="update_row_data date" value=""></td>
<th>Country</th><td><input name="country" size="6" style="border-style:none" type="text" class="update_row_data country" value=""> </td>
<th>City</th><td><input name="city" size="8" style="border-style:none" type="text" class="update_row_data city" value=""></td>
</tr>
</tbody>
</table>