Login/Register
Several submit buttons in a single HTML form
Asked Answered
Solved javascripthtmlformsjsponsubmit
C

3

0

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;
}
Caterinacatering answered 30/1, 2015 at 15:3 Comment(1)
Possible duplicate of Two submit buttons in one form – Soane
L
2

Don’t use submit.

I.e., don’t use <input type="submit">.

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

I.e.,

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

Looby answered 30/1, 2015 at 15:7 Comment(7)
I'm still having troubles loading checkUser(). Does the problem got to do with the javascript itself? Thanks a lot! – Caterinacatering
there must be something wrong in the javascript. What are the errors that you see in console log? – Looby
No errors are shown. My intention is to use checkUser and validStaffReg to check for whatever specified conditions before allowing it to progress to the next page for data storing – Caterinacatering
use onclick="return checkUser()" . and if your conditions do not satisfy and you want to return to form before going to next page, just return false in the javascript. – Looby
I've updated my checkUser.js already. However, returning a false value doesn't stop the web page from going to StaffRegAuth.jsp – Caterinacatering
that depends on how you program you javascript. It works for all legitimate algorithms. – Looby
Alright, I got it solved already. Turns out I forgot to rename my function's name – Caterinacatering
H
2

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

Havildar answered 30/1, 2015 at 15:8 Comment(0)
C
1

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

Cuman answered 30/1, 2015 at 15:34 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.