Onclick to do show/hide 激活表单中的提交按钮

Question

我有一个用于预订一日游人员的表格，效果很好。每个预订都是表格中的一行。我现在需要将旅行的付款添加到每个预订中。这会使每个预订的行太长，因此我将付款添加为每个预订下方的额外行，但在父行中使用按钮隐藏该行以显示和隐藏付款。这一切都有效，除了每次我点击父行中的显示/隐藏按钮时，表单提交就像我点击了表单底部的保存提交按钮一样。由于保存报告会生成一个新选项卡，因此我可以返回原始表单并查看显示/隐藏是否正常。

任何关于为什么显示/隐藏按钮应该在原始表单标签中启动操作语句的想法都将不胜感激。整个脚本很庞大，所以我刚刚展示了表单标签和我为显示/隐藏添加的额外代码。 $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>

Answer 1

<form> 中的<button> 的默认行为是提交表单。

所以你可以将你的 <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.'");
    ...