Several submit buttons in a single HTML form

问题

I'll cut to the chase. I wish to have two separate buttons that does two unique functions. However, acquiring data from the same form. The current problem that I'm facing is onSubmit() will always be executed with whatever buttons I attach to the form instead of its own function.

checkUser.js: Acquires username from the input field and tries to match it with the database (Oracle)

Update 1:

I have changed them accordingly. However, pressing Check still forwards me to StaffRegAuth.jsp instead of executing checkUser and then opening a new window.

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

Update 2:

Updated my checkUser.js as it seems to be the problem

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;
}

回答1:

Dont use submit.

ie, dont use <input type="submit">

Instead make two separate buttons and call different functions onclick. Mind that you can still get the form values.

ie,

<button onclick="return reqfunc()">

use return , and now you can use the function. if you want to return to the form back without going to the next page then just return false in the javascript.

回答2:

use <button onclick='YourFunction()'>Button Text</button>

回答3:

One of the tricks I use regularly is something like the following.

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

By giving the buttons different names, you can have the form do whatever processing is consistent and let the server manage any button-specific processing. Of course, you can also attach event handlers to the separate buttons.

Why does it have two [name="submit_form"] buttons? The first one has a class that you would style to make it active yet invisible (e.g., position: absolute; top: -1000px; left: -1000px) so that a keyboard <Enter> will fire that button instead of the other button[name="clear_form"].

来源：https://stackoverflow.com/questions/28238672/several-submit-buttons-in-a-single-html-form

标签

javascript

html

forms

jsp

onsubmit