时间戳

首页 > 解决方案 > 如何一次更新html中的所有数据？

php - 如何一次更新html中的所有数据？

问题描述

我正在用html创建一个表单，我可以更新每个数据，但我想一键更新所有数据？

<?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;?>

由于我需要更新每个数据，您如何创建一个按钮来更新表格的所有数据？

标签： phphtml

解决方案

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
});

这是一个挑剔的答案，但让我解释一下为什么这是一个更好的解决方案：

我们正在正确处理表单提交而不是按钮按下。有些人喜欢在字段上按输入。有些人使用替代输入设备，例如语音输入或其他辅助设备。处理表单提交，您可以为每个人正确解决它。

我们正在挖掘提交的实际表单的表单数据。如果您稍后更改表单选择器，则不必更改所有字段的选择器。此外，您可能有多个具有相同输入名称的表单。无需消除过多 ID 的歧义，只需根据提交的表单跟踪输入。如果适合您的情况，这还使您能够对多个表单使用单个事件处理程序。

FormData 接口是相当新的，但浏览器很好地支持。这是构建数据收集以获取表单中内容的真实价值的好方法。没有它，您将不得不遍历所有元素（例如使用 form.elements）并找出检查的内容，未检查的内容，值是什么等。如果您需要旧的浏览器支持，则完全有可能，但 FormData 接口更简单。

我在这里使用 ES6... 无论如何都不是必需的，所以如果您需要旧的浏览器支持，请将其改回 ES5 兼容。

推荐阅读