How to update all data in html at once? - php

Question

I'm creating a form in html, I can update per data, but I want to update all data by one click?
<?php foreach($queryRecords as $res) :?>
<tr>
<form action="" method="POST" name="form" id="form">
<td>
<input name="id" type="hidden" class="normalinput" id="id" value="<?php echo $res["id"];?>">
<input name="gp_name" type="hidden" class="normalinput" id="gp_name" value="<?php echo $res["gp_name"];?>">
<input name="date" type="hidden" class="normalinput" id="date" size="10" value="<?php echo $res["date"];?>">
<input name="day" type="hidden" class="normalinput" id="day" size="1" value="<?php echo $res['day'];?>">
<input name="starting_time" type="hidden" class="normalinput" id="starting_time" size="9" value="<?php echo $res["starting_time"];?>">
<input name="type" type="hidden" class="normalinput" id="type" size="4" value="<?php echo $res["type"];?>">
<input name="duration" type="hidden" class="normalinput" id="duration" size="4" value="<?php echo $res["duration"];?>">
<input name="checkin" type="hidden" class="normalinput" id="checkin" size="8" value="<?php echo $res["checkin"];?>">
<input name="checkout" type="hidden" class="normalinput" id="checkout" size="8" value="<?php echo $res["checkout"];?>">
<input name="country" type="hidden" class="normalinput" id="country" size="7" value="<?php echo $res["country"];?>">
<input name="city" type="hidden" class="normalinput" id="city" size="6" value="<?php echo $res["city"];?>">
<input name="supplier" type="hidden" class="normalinput" id="supplier" size="8" value="<?php echo $res["supplier"];?>">
<input name="arrange" type="hidden" class="normalinput" id="arrange" size="10" value="<?php echo $res["arrange"];?>">
<input name="no_of_day" type="hidden" class="normalinput" id="no_of_day" size="1" value="<?php echo $res["no_of_day"];?>">
<input name="qua" type="hidden" class="normalinput" id="qua" size="1" value="<?php echo $res["qua"];?>">
<input name="cost" type="hidden" class="normalinput" id="cost" size="6" value="<?php echo $res["cost"];?>">
<input name="profit_rate" type="hidden" class="normalinput" id="profit_rate" size="4" value="<?php echo $res["profit_rate"];?>">
<input name="currency_rate" type="hidden" class="normalinput" id="currency_rate" size="4" value="<?php echo $res["currency_rate"];?>">
<input name="eurbuy" type="hidden" class="normalinput" id="eurbuy" size="4" value="<?php echo $res["eurbuy"];?>">
<input name="vat" type="hidden" class="normalinput" id="vat" size="4" value="<?php echo $res["vat"];?>">
<input name="pprice" type="hidden" class="normalinput" id="pprice" size="4" value="<?php echo round( $res["cost"] * $res["profit_rate"] * $res["currency_rate"] / $res["eurbuy"],0) ;?>">
<input name="total" type="hidden" class="normalinput" id="total" value="<?php echo round( $res["pprice"] * $res["no_of_day"] * $res["qua"] ,0) ;?>">
<input name="reference" type="hidden" class="normalinput" id="reference" size="10" value="<?php echo $res['reference'];?>">
<input name="supplement_rate" type="hidden" class="normalinput" id="supplement_rate" size="5" value="<?php echo $res["supplement_rate"];?>">
<input name="supplement" type="hidden" class="normalinput" id="supplement" size="5" value="<?php echo round( $res["supplement_rate"] * $res["profit_rate"] * $res["no_of_day"] * $res["currency_rate"] / $res["eurbuy"],0) ;?>">
<button class="btn btn-info" type="button" onClick="update(form); window.location.reload();"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger" type="button" onClick="window.location.href='gp_delete.php?id=<?php echo $res['id'];?>'"><i class="fas fa-trash-alt"></i></button>
</td>
</form>
</tr><?php endforeach;?>
since I need to update per data, how do you create one button to update all data for the table?

Answer 1

document.querySelector('form').addEventListener('submit', (e) => {
const formData = new FormData(e.target);
// Now you can use formData.get('foo'), for example.
// Don't forget e.preventDefault() if you want to stop normal form .submission
});
This is a nitpicky answer, but let me explain why this is a better solution:
We're properly handling a form submit rather than a button press. Some people like to push enter on fields. Some people use alternative input devices such as speech input or other accessibility devices. Handle the form submit and you correctly solve it for everyone.
We're digging into the form data for the actual form that was submitted. If you change your form selector later, you don't have to change the selectors for all the fields. Furthermore, you might have several forms with the same input names. No need to disambiguate with excessive IDs and what not, just track the inputs based on the form that was submitted. This also enables you to use a single event handler for multiple forms if that is appropriate for your situation.
The FormData interface is fairly new, but is well supported by browsers. It's a great way to build that data collection to get the real values of what's in the form. Without it, you're going to have to loop through all the elements (such as with form.elements) and figure out what's checked, what isn't, what the values are, etc. Totally possible if you need old browser support, but the FormData interface is simpler.
I'm using ES6 here... not a requirement by any means, so change it back to be ES5 compatible if you need old browser support.