单个 HTML 表单中的多个提交按钮

Question

我开门见山。我希望有两个独立的按钮来执行两个独特的功能。但是，从相同的表单获取数据。我面临的当前问题是 onSubmit() 将始终使用我附加到表单的任何按钮而不是它自己的功能来执行。

checkUser.js: 从输入字段获取用户名并尝试将其与数据库 (Oracle) 匹配

更新 1：

我已经相应地改变了它们。但是，按 Check 仍然会将我转到 StaffRegAuth.jsp 而不是执行 checkUser 然后打开一个新的 window.

<form action="StaffRegAuth.jsp" name="form" method="post">
  ...
  <button onClick="return validStaffReg();">Register</button>
  <button onclick="return checkUser()">Check</button>
  </form>

更新 2：

更新了我的 checkUser.js 因为这似乎是问题所在

StaffReg.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <title>Staff Registration</title>
  <%-- Javascript --%>
    <script type="text/javascript" src="JS/validStaffReg.js"></script>
    <script type="text/javascript" src="JS/preventSpace.js"></script>
    <script type="text/javascript" src="JS/checkUser.js"></script>
</head>

<body>
  <%response.addHeader( "Cache-Control", "no-cache"); response.addHeader( "Pragma", "no-cache"); response.addHeader( "Expires", "0"); %>
    <h1 align="center"> Account Registration: </h1>
    <form action="StaffRegAuth.jsp" name="form" method="post">
      <div align="center">
        <table style="width = 30%">
          <tr>
            <td>User Name:</td>
            <td>
              <input type="text" name="username" onKeyDown="preventSpace(this)">
            </td>
          </tr>
          <tr>
            <td>Password:</td>
            <td>
              <input type="password" name="password" onKeyDown="preventSpace(this)">
            </td>
          </tr>
          <tr>
            <td>User Group:</td>
            <td>
              <select name="userGroup">
                <option value="1">Administrator
                  </optin>
                  <option value="2">Clerk
                    </optin>
                    <option value="3">Operations
                      </optin>
                      <option value="4">Sales
                        </optin>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <button onClick="return validStaffReg(form)">Register</button>
            </td>
            <td>
              <button onClick="return checkUser(form)">Check</button>
            </td>
          </tr>
        </table>
      </div>
    </form>
</body>

</html>

validStaffReg.js

// JavaScript Document
function validStaffReg(form) {
  if (document.form.password.value == "" && document.form.username.value == "") {
    alert("Please enter a Password and Login ID.");
    document.form.password.focus();
    return false;
  }
  if (document.form.username.value == "") {
    alert("Please enter a Login ID.");
    document.form.username.focus();
    return false;
  }
  if (document.form.password.value == "") {
    alert("Please enter a Password.");
    document.form.password.focus();
    return false;
  }
  return true;
}

checkUser.js

function checkUser(form) {

  if (document.form.username.value != "" || document.form.username.value != null) {
    var myWindow = window.open("checkUser.jsp", "MsgWindow", "width=200, height=100");
    myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
    document.form.username.focus();
    return false;
  }
  return true;
}

Answer 1

不要使用提交。

即，不要使用 <input type="submit">。

相反，制作两个单独的按钮并调用不同的 onclick 函数。请注意，您仍然可以获得表单值。

即

<button onclick="return reqfunc()">

使用return，现在可以使用函数了。如果您想 return 返回表单而不转到下一页，则只需 JavaScript 代码中的 return false。

Answer 2

使用<button onclick='YourFunction()'>Button Text</button>.

Answer 3

我经常使用的技巧之一如下所示。

<form action="submit.jsp">
  <button type="submit" name="submit_form" value="1" class="hiddenSubmit">Submit</button>
  ...
  <button type="submit" name="clear_form" value="1">Clear</button>
  <button type="submit" name="submit_form" value="1">Submit</button>
</form>

通过给按钮不同的名称，您可以让表单执行任何一致的处理，并让服务器管理任何特定于按钮的处理。当然，您也可以将事件处理程序附加到单独的按钮。

为什么它有两个 [name="submit_form"] 按钮？第一个有一个 class，您可以设置样式使其处于活动状态但不可见（例如，position: absolute; top: -1000px; left: -1000px），这样键盘 <Enter> 将触发该按钮而不是另一个 button[name="clear_form"].

单个 HTML 表单中的多个提交按钮

Several submit buttons in a single HTML form

javascript

html

forms

jsp

onsubmit

更新 1：

更新 2：

StaffReg.jsp

validStaffReg.js

checkUser.js