Looping through serialized data to insert updates to MySQL DB - php

Question

Thanks to the help below, I switched my code to use serlize(), but I am still having a similar problem of only getting the latest row sent, here is what I am doing now
<form id="test_table">
<table>
<thead>
<tr>
<th> ID </th>
<th> col2 </th>
<th> col3 </th>
</tr>
</thead>
<tbody><!--table body-->
<form id="form_x">
<tr>
<td> <input type="text" name="col1" default value="1"> </td>
<td> <input type="text" name="col2" default value="cat"> </td>
<td> <input type="text" name="col3" default value="dog"> </td>
</tr>
<tr>
<td> <input type="text" name="col1" default value="2"> </td>
<td> <input type="text" name="col2" default value="fish"> </td>
<td> <input type="text" name="col3" default value="rabbit"> </td>
</tr>
</tbody>
</table>
</form>
<button class="btn btn-primary" value="test_table" onclick="update(this.value)">Update</button>
<p><tt id="results"></tt></p>
<script>
function update(form_name){
var str = $( test_table ).serialize();
$( "#results" ).text( str );
$.ajax({
type: "POST",
url: "/site/pages/update.php",
data: $( "#"+form_name ).serialize(),
success : function(res){ console.log(res); }
});
}
</script>
I can see the serialized data being captured i.e.,
col1=1&col2=cat&col3=dog&col1=2&col2=fish&col3=rabbit
But when I dump what is being passed, it is only seeing the last row value
update.php
<?php var_dump($_POST); ?>
Result:
array(3) {
["col1"]=>
string(1) "2"
["col2"]=>
string(4) "fish"
["col3"]=>
string(6) "rabbit"
}
Can anyone direct me to some advice to fix my update.php page to loop through the POST data? I want to update the database row from each id of that row e.g.
//setup loop
$sql = "UPDATE Table SET
col2 ='".$_POST["col2"]."',
col3 ='".$_POST["col2"]."',
WHERE id='".$_POST["col1"]."' ";
i.e.,
$sql = "UPDATE table SET
col2='cat' , col3='dog'
WHERE id=1";
$sql = "UPDATE table SET
col2='fish' , col3='rabbit'
WHERE id=2";
===========================================================================
Old Question:
I am trying to enable a user to edit a dynamically created row (with user based inputs in TDs) that send and update on click of an update button, I can see the inputs are being captured correctly, but cannot work out how to update the database from the ajax call, here's the (abridged) code:
form_page.php
<table id="table_name">
<thead>
<tr>
<th>ID</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
The phpcode associated with generating the table rows:
<?php
echo '<form id="" method="POST" action="" >';
$sql= "SELECT * FROM tablename";
$stmt= $conn->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll();
foreach ($results as $row) {
echo '<td>';
echo 'ItemID_'.$row['ID'].'';
echo '</td>';
echo '<td>';
echo ' <input class="update_value" type="text" id="ItemID_'.$row['ID'].'" default value="'.$row['col2'].'">';
echo '</td>';
echo ' <input class="update_value" type="text" id="ItemID_'.$row['ID'].'" default value="'.$row['col3'].'">';
echo '</td>';
echo'</tr'>;
}
?>
<button type="button" id="update_button">Update</button>
</form>
</table>
Result with editable col 2/3:
ID | col2 | col3
1 | lorem (editable) | ipsum (editable)
2 | dolor (editable) | sit amet (editable)
Update (Button)
With the code looking something like:
<table id="table_name">
<thead>
<tr>
<th>ID</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<form id="" method="POST" action="">
<tr>
<td>
ItemID_1
</td>
<td> <input class="update_value" type="text" id="ItemID_1" default value="lorem">
</td>
<td> <input class="update_value" type="text" id="ItemID_2" default value="ipsum">
</td>
</tr>
</tbody>
<button type="button" id="update_button">Update</button>
Here's the ajax I am using to send it to the update page
<script>
$(document).ready(function(){
$("#update_button").click(function(e) {
e.preventDefault();
var values = {};
$('input.update_value').each(function(n, user_input){
values[ $(user_input).attr('id') ] = $(user_input).val();
//used to test and make sure its passing id vals to values
//alert(JSON.stringify(values, null, 4));
});
$.ajax({
type: "POST",
url: "/site/pages/update.php",
data: { updatefrominputs: values }
});
});
});
</script>
With the alert above (used for testing) showing:
localhost says
{
"ItemID_1": "lorem"
"ItemID_1": "ipsum"
}
OK so far, but then on another click it over writes the "lorem"
localhost says
{
"ItemID_1": "ipsum"
"ItemID_2": "dolor"
}
This is the first problem, it has over written the "lorem" value to send across
Here is the second problem and where I am currently stuck, sending and updating the database
I can see that the ajax is being posted by adding this to the ajax:
success: function (data) {
alert("sent");
}
The update.php file code:
<? php
include connect.php //database connection script (don't think I need to call it)
foreach($_POST['updatefrominputs'] as $id=>$value)
$sqlQuery = "UPDATE tablename SET
//col2=col2inputvalue
//col3=col3inputvalue
WHERE
//col1id=the NUMBER without the ID_part?
";
$sqlQueryStmt = $conn->prepare($sqlQuery);
$sqlQueryStmt->execute();
?>
The problem I have is that I cannot seem to get it to update the database, I am not sure on how to fill out the UPDATE clause below. Also, it doesn't even feel like it posts to this page, but the success function says it does??
Also, how would I just get the number to use in the WHERE clause? I can edit the code above to just give me the ID number and then use col1ID=col1passedID but I would end up with duplicate ID's if I use this process across more than one form (on the same page). e.g.
<form 1>
foreach ($results1 as $row1) {
echo ' <input class="update_value" type="text" id="'.$row1['ID'].'" default value="'.$row['col2'].'">';
}
</form 1>
<form 2>
foreach ($results2 as $row2) {
echo ' <input class="update_value" type="text" id="'.$row2['ID'].'" default value="'.$row2['col2'].'">';
}
</form 2>
Would output:
<form 1>
<input class="update_value" type="text" id="1" default value="lorem">
</form 1>
<form 2>
<input class="update_value" type="text" id="1" default value="ipsum">
</form 2>
One solution I can think of would be to send the ajax like this:
var updatedetals= {
id: $("#ItemID_1").val(),
col1: $("#col2").val(),
col2: $("#col2").val()
}
$.ajax({
type: "POST",
url: "/site/pages/update.php",
data:updatedetals,
dataType: 'JSON',
success: function(JSON){
refreshResults();
}
});
But this won't give me unique IDs either, and I would have to do a ajax call for every row?
Is there a better way to iterate over every uniquely generated row, get the TD input values and send those updated values to the database?

Answer 1

You need to use name="col1[]" in your html this would send all values in an array. Because you have multiple inputs with the same name php by default gets the last one. if you add [] you can fetch values like $_POST["col1"][0] and such.
Then you can also loop over the values like
for($i=0;$i<count($_POST["col1"]);$i++){
$col1 = $_POST["col1"][$i];
$col2 = $_POST["col2"][$i];
$col3 = $_POST["col3"][$i];
//use the variables in update query
}

Answer 2

The problem is that your columns have duplicate names but $POST requires unique keys for values. So you get 3 keys only: col1, col2, and col3... and the values get overwritten, so you're left with only the last row's values.
If you want to collect all the rows, then you should give each a unique name. E.g.
<form id="test_table">
<table>
<thead>
<tr>
<th> ID </th>
<th> col2 </th>
<th> col3 </th>
</tr>
</thead>
<tbody><!--table body-->
<form id="form_x">
<tr>
<td> <input type="text" name="row1_col1" default value="1"> </td>
<td> <input type="text" name="row1_col2" default value="cat"> </td>
<td> <input type="text" name="row1_col3" default value="dog"> </td>
</tr>
<tr>
<td> <input type="text" name="row2_col1" default value="2"> </td>
<td> <input type="text" name="row2_col2" default value="fish"> </td>
<td> <input type="text" name="row2_col3" default value="rabbit"> </td>
</tr>
</tbody>
</table>
</form>
<button class="btn btn-primary" value="test_table" onclick="update(this.value)">Update</button>
<p><tt id="results"></tt></p>
<script>
function update(form_name){
var str = $( test_table ).serialize();
$( "#results" ).text( str );
$.ajax({
type: "POST",
url: "/site/pages/update.php",
data: $( "#"+form_name ).serialize(),
success : function(res){ console.log(res); }
});
}
</script>
Try it. This will give you six values in your php $POST.
Then you can iterate over them and extract the col name using some string slicing techniques, like split or substr.