How to update the data in particular table row in HTML? - php

Question

Since the <form> can not inside <tr>, I can not assign the form for each row. And at the end I have create a from like this
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
So, it seems when I submit data it submit every input, how can I send only a specific row? Thanks

Answer 1

Since forms send all the values, (since your using <button>), you could assign each row a key that corresponds to that row. Then use that in the textbox. Note: Textbox values must be an array structure, so that particular key from the submit update can be used (kinda like filtering). Consider this example:
<?php
if(isset($_POST['update'])) {
$product_key = $_POST['update'];
$product_name = $_POST['my_product_name'][$product_key];
echo $product_name;
// this should correspond to that same textbox row that you selected
}
?>
<form method="POST" action="">
<table>
<tr>
<td><input type="text" name="my_product_name[1]"></td>
<td><button name="update" type="submit" value="1">Update</button></td>
</tr>
<tr>
<td><input type="text" name="my_product_name[2]"></td>
<td><button name="update" type="submit" value="2">Update</button></td>
</tr>
</table>
</form>

Answer 2

This is not possible. A form sends everything in it. You have to use multiple forms in order to do that. Can you explain why you want to send each row separately. Let us know the complete problem so we can provide you much better solution :)

Answer 3

You must use separate forms. To avoid this issue, you could try using div's and style them with css.
<div class="big-wrapper">
<div class="form-wrapper">
<form id="first-input">
<input name="my_product_name">
<button type="submit">Click Here To Submit Form 1</button>
</form>
</div>
<div class="form-wrapper">
<form id="second-input">
<input name="my_product_name">
<button type="submit">Click Here To Submit Form 2</button>
</form>
</div>
Example of above code (with no additional css): http://postimg.org/image/p0olzl933/

Answer 4

One method would be to have form tags that wrap tables and each table effectively becomes a row.
Honestly, there are a lot of ways to do this... you could handle it using Javascript with something like I have below or generating a special table with a server-side script and writing that to the page. You could use ajax calls to send the values that change to a web service, etc.
Hope that thelps.
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>
...

Answer 5

Collect the value then push it into the form on submit.
<script>
function dosubmit(e){
var value = $(this).parents('tr').find('input.some').val();
$(this).parents('tr').find('input.my_product_name').val(value);
}
</script>
<table>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td><input name="some"/></td>
<td>
<form onsubmit="dosubmit(event)">
<input type="hidden" name="my_product_name"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
</table>
I don't know how much good a jsbin will be, but here it is

Answer 6

You can submit the value in form by setting in hidden parameter as follows:
HTML:
<form action="" id="formId">
<input type="hidden" name="product_name" id="hiddenValue" />
</form>
<table>
<tr>
<td><input name="my_product_name"></td>
<td><button type="submit" onclick="submitForm(this)"></td>
</tr>
<tr>
<td><input name="my_product_name"></td>
<td><button type="submit" onclick="submitForm(this)"></td>
</tr>
</table>
Script:
<script>
function submitForm(id){
var input = id.parentElement.parentElement.getElementsByTagName("input")[0].value;
//Retrieving value of specific rows
document.getElementById("hiddenValue").value = input;
//Submits the form with given id.
document.getElementById("formId").submit();
}
</script>