Question

我正在用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;?>

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

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

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

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

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

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

我在这里使用ES6 ...绝对不是必需的，因此，如果您需要旧的浏览器支持，请改回ES5兼容。

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

1 个答案: