Question

我会切入追逐。我希望有2个单独的按钮，它们可以执行2个独特的功能，但是从同一个表单中获取数据。我面临的当前问题是onSubmit()将始终使用我附加到表单的任何按钮而不是它自己的函数来执行。

checkUser.js：从输入字段中获取用户名并尝试将其与数据库（oracle）匹配

更新1：

我已相应地更改了它们。但是，按Check仍然会将我转发到StaffRegAuth.jsp，而不是执行checkUser，然后再打开一个新窗口。

<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">

而是制作两个单独的按钮并调用不同的功能。请注意，您仍然可以获得表单值。

即

<button onclick="return reqfunc()">

使用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"]按钮？第一个类有一个类，您可以设置它使其处于活动状态但不可见（例如，position: absolute; top: -1000px; left: -1000px），以便键盘<Enter>将触发该按钮而不是其他button[name="clear_form"]。

一些html表单中的几个提交按钮

更新1：

更新2：

StaffReg.jsp

validStaffReg.js

checkUser.js

3 个答案: