javascript - Onclick to do show/hide 激活表单中的提交按钮
问题描述
我有一张用于预订一日游人员的表格,效果很好。每个预订都是表格中的一行。我现在需要将旅行的付款添加到每个预订中。这会使每个预订的行太长,因此我将付款添加为每个预订下方的额外行,但在父行中使用按钮隐藏该行以显示和隐藏付款。这一切都有效,除了每次我点击父行中的显示/隐藏按钮时,表单提交就像我点击了表单底部的保存提交按钮一样。由于保存报告会生成一个新选项卡,因此我可以返回原始表单并查看显示/隐藏是否正常。
任何关于为什么显示/隐藏按钮应该在原始表单标签中启动操作语句的想法都将不胜感激。整个脚本很庞大,所以我刚刚展示了表单标签和我为显示/隐藏添加的额外代码。$i 是表中的行号。$background 设置行的背景颜色。
我以其他形式显示/隐藏没有任何问题,但这是我第一次在表格中使用它。我已经在这个论坛中使用了几个帖子来让显示/隐藏在表格行中正常工作,但到目前为止还没有找到任何东西来解决这个问题。
<form method="post" action="visit_management.php?mode=book" target="_blank">
...
<td><button id="button_'.$i.'" onclick="showpayment_'.$i.'()">Show payments</button></td>
...
<script type="text/javascript">
<!--
function showpayment_'.$i.'()
{
var x = document.getElementById("payment_'.$i.'");
var y = document.getElementById("button_'.$i.'");
if (x.style.display === "none")
{
x.style.display = "table-row";
y.innerHTML = "Hide payments";
}
else
{
x.style.display = "none";
y.innerHTML = "Show payments";
}
}
-->
</script>
...
<tr id="payment_'.$i.'" style="display:none; '.$background.'">
... Payment data
</tr>
...
<p><input type="submit" style="padding-top:5px" value="Save" class="formsubmit"></p>
</form>
解决方案
<button>
a中的默认行为<form>
是提交表单。
所以你可以改变你<button>
的<div class="button">
并添加一些CSS到.button
或者您可以将事件传递给函数onclick="showpayment_'.$i.'(event)
,然后调用 preventDefault(); 喜欢:
function showpayment_'.$i.'(event) {
event.preventDefault();
var x = document.getElementById("payment_'.$i.'");
var y = document.getElementById("button_'.$i.'");
...
推荐阅读
- linux - 我无法从 linux AWS 中删除 nodejs 包
- java - 我无法在 InteliJ 上的 Mac 上使用 webdriver 启动 Selenium
- c# - C# 只显示 CMD 中的一个特定行
- windows - .Net Core RRS 提要中的 RNGCryptoServiceProvider
- javascript - 使用节点缓存进行缓存不会持久化数据
- flutter - 如何在语义树中将 Flutter 小部件划分为单独的节点
- r - 函数不将调用参数视为 R 中的值
- r - 在 R 中自动安装所有必需的包
- angular - 找不到与@babel/helper-validator-identifier@^7.9.5 匹配的版本
- macos - 设置 MATLAB 在 macOS 上使用的系统 shell