时间戳

首页 > 解决方案 > 如何用 JavaScript/jQuery 替换表单中第二个提交按钮的操作

javascript - 如何用 JavaScript/jQuery 替换表单中第二个提交按钮的操作

问题描述

注意：围绕这个主题有很多问题，我尝试了一些解决方案，这就是我走了多远，但现在我被困住了。

我想要一个连接到 servlet 并处理用户输入的“计算”按钮和一个“生成 PDF 按钮”，它打开一个新选项卡，其中包含从用户输入生成的 pdf。对于页面流，我需要把它放在一个表单中。

所以我现在有：

<form action="/myProject/input" method="post" name="inputForm" onsubmit="return validateForm()" id="inputForm">
    <div>some input fields ...</div>
    <div>
        Results here
        <button type="submit" id="pdf_button" class="button" name="pdf_button">${buttonPrint}</button>
    </div>
    <div>
        some more input fields
        <button type="submit" id="calculate_button" class="button" name="calculate_button">${buttonCalculate}</button>
    </div>
</form>

注意：按钮值 ${X} 是特定于语言的，因此不适合此。

我尝试按照$(document).ready()中的建议进行以下操作：

$("#inputForm").on("submit", function() {
  var $btn = $(document.activeElement);

  if (
    $btn.length &&
    $("#inputForm").has($btn) &&
    $btn.is('button[type="submit"]') &&
    $btn.is("[name]")
  ) {
    if ($btn.attr("name") == "pdf_button") {
      console.log("--- IT WORKS UNTIL HERE! ---");

      $("#inputForm").action =
        getContextPath() + "/print?language=" + $("#language").val();
      $("#inputForm").target = "_blank";
    }
  }
});

因为我得到了console.log，所以我检索了正确的按钮。但是在点击打印按钮时，执行的是计算动作，而不是来自 JS 的动作。 我究竟做错了什么？

到目前为止，我有两种工作正常的表单，但我想重组页面。之前的第二个表单看起来像这样，并且放在第一个表单之后：

<form action="/myProject/print?language=${lang}"
    method="post" name="printForm" onsubmit="return validateForm()" 
    target="_blank">

    <button type="submit" id="calculate_button" class="button"
        name="calculate_button">${buttonCalculate}</button>
</form>

标签： javascriptjqueryformssubmitform-submit

解决方案

推荐阅读