Update only fields that have been modified or added by user - php

Question

I have only added a portion of the full code here. What I want the code to do, is once it is submitted, I only want it to update the fields in the table that have been changed, not every item in every row (as some are NULL value, and need to stay that way).
So ultimately - how would I code the PHP process page.
Table is formatted as heli_cust:
cust_id
cust_fname
cust_lname
cust_kg
cust_email
cust_addr
cust_phone
http://jsfiddle.net/qz7k5caj/
HTML:
<table width="100%">
<div class="form_head">Passengers</div>
<table width="100%" cellpadding="4" cellspacing="0" id="px">
<thead>
<tr class="tab_head">
<td width="25px" style="text-align:center; color:#FFFFFF; font-size:11px;">#</td>
<td class="form_label" style="color:#ffffff; font-size:11px;">Cust#</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">First Name</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Last Name</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Wgt</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Address</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Phone</td>
<td class="form_label" style="color:#FFFFFF; font-size:11px;">Email</td>
<td></td>
</tr>
</thead>
<tbody id="tbl1">
<?php if ($cust = mysql_fetch_assoc($getcust)) {
do { ?>
<tr id="pass">
<td style="vertical-align:middle; text-align:center"><input type="text" name="pass_num[]" readonly="readonly" value="1" class="pass" style="font:Verdana; font-size:11px; border:none; background-color:transparent; width:25px; text-align:center; vertical-align:middle;" tabindex="-1"></td>
<td><input type="text" readonly="readonly" class="form_a" value="<?php echo (int)$cust[cust_id] ?>" style="text-align:right; border:none; background-color:transparent; width:25px" /></td>
<td><input type="text" name="cust_fname[]" class="form_g" value="<?php echo $cust[cust_fname] ?>"/></td>
<td><input type="text" name="cust_lname[]" class="form_g" value="<?php echo $cust[cust_lname] ?>"/></td>
<td><input type="text" name="cust_kg[]" class="form_a" value="<?php echo $cust[cust_kg] ?>"/></td>
<td><input type="text" name="cust_addr[]" class="form_c" style="width:200px" value="<?php echo $cust[cust_addr] ?>"/></td>
<td><input type="text" name="cust_phone[]" class="form_g" value="<?php echo $cust[cust_phone] ?>"/></td>
<td><input type="text" name="cust_email[]" class="form_b" value="<?php echo $cust[cust_email] ?>"/></td>
<td style="vertical-align:middle"><a class="removePax"><img src="images/remove_pax.png" /></a></td>
</tr>
<?php } while ($cust = mysql_fetch_assoc($getcust));
} ?>
</tbody>
</table>
<table width="100%">
<tr><td style="text-align:right"><a id="add"> <img src="images/add_pax.gif"> </a></td></tr>
</table>
<br />
<table width="100%"><tr><td></td><td style="text-align:right"><input type="submit" value="Update" /></td></tr>
</table>
JQuery:
$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"});
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"});
$(".pass").each(function(){
$(this).val($(this).closest('tr').index()+1);
});
$("#tbl1 .removePax").on("click",function() {
if($("#tbl1 tr:last").index() >0) {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(500, function(){
tr.remove();
$(".pass").each(function(){
$(this).val($(this).closest('tr').index()+1);
});
$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"});
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"});
});
return false;
} else {
if($(this).closest('tr').index() == 0) {
$("#tbl1 tr:eq(0)").find("input").each(function(){
if ($(this).hasClass('pass')) {
} else {
$(this).val('');
};
});
};
};
});
$("#add").click(function(){
$("#tbl1 tr:first").clone().find("input").each(function() {
$(this).val('')}).end().appendTo("#tbl1");
$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"});
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"});
$(".removePax").on("click",function() {
if($("#tbl1 tr:last").index() >0) {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(500, function(){
tr.remove();
$(".pass").each(function(){
$(this).val($(this).closest('tr').index()+1);
});
$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"});
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"});
});
return false;
} else {
if($(this).closest('tr').index() == 0) {
$("#tbl1 tr:eq(0)").find("input").each(function(){
if ($(this).hasClass('pass')) {
} else {
$(this).val('');
}
}).end();
} else {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(500, function(){
tr.remove();
$(".pass").each(function(){
$(this).val($(this).closest('tr').index()+1);
});
$("#tbl1 tr:even").css({"background-color":"#CCC", "opacity":"0.8"});
$("#tbl1 tr:odd").css({"background-color":"#FFF", "opacity":"0.8"});
});
return false;
}
};
});
$(".pass").each(function(){
$(this).val($(this).closest('tr').index()+1);
});
});
});

Answer 1

Aside from the idea given by #rjdown, In case you're trying to do it using AJAX, you can add an onchange handler, and add a class "changed" to the changed item. Then, just send all the changed data back to your backend. That way you know for sure what you're to send.