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 onSubm

Solution 1:

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.

Solution 2:

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

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