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

小编典典

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

jsp

我会追逐。我希望有两个单独的按钮，它们具有两个独特的功能。但是，以相同的形式获取数据。我面临的当前问题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;

}

阅读 294

2020-06-10

共1个答案

小编典典

不要使用提交。

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

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

即

<button onclick="return reqfunc()">

使用return，现在您可以使用该功能了。如果您想返回表单而不返回下一页，则仅return false在javascript中。

2020-06-10