Onclick 显示/隐藏激活表单中的提交按钮

如何解决Onclick 显示/隐藏激活表单中的提交按钮

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

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