FAQ : Frequently Asked Questions
FAQ Table of contents
blue line
13. Q:  Is it possible to have a form with multiple buttons?

A:  In plain HTML you can have more than one submit single button.
See the following example
(you may push the buttons, in order to display the request string in the Location line of your browser. However, note that the request will be actually submitted to the server, but in this example there is no program at the server servicing the request):
<form name="form1" method="get" action="/cgidev2p/faq13.pgm">
<span class=blue><b>Item Manager</b></span><br><br>
Item number <input type="text" name=itemno size=10 maxlength=10><br>
<input type="submit" name="xrequest" value="Add">
<input type="submit" name="xrequest" value="Change">
<input type="submit" name="xrequest" value="Remove">
</form>
 Item Manager

Item number
Your program receives the input variable xrequest to know what process it should perform.

An alternate solution is to define type="button" inputs instead of type="submit" inputs.
An input type="submit" by itself does nothing, it must be connected to a Javascript event-handler function, which is called when the button is pressed.
See the following example
(you may push the buttons, in order to display the request string in the Location line of your browser):

<script language="javascript">
function goButton(xxx) {
window.document.form2.xrequest.value=xxx
window.document.form2.submit()
}
</script>
<form name="form2" method="get" action="/cgidev2p/faq13.pgm">
<span class=blue><b>Item Manager</b></span><br><br>
<input type=hidden name=xrequest>
Item number <input type="text" name=itemno size=10 maxlength=10><br>
<input type="button" value="Add" onClick=goButton("add")>
<input type="button" value="Change" onClick=goButton("change")>
<input type="button" value="Remove" onClick=goButton("remove")>
</form>
 Item Manager

Item number



It works in the following way:
  • when the user pushes a button, the event-handler onClick specified in the button definition invokes the JavaScript function goButton with an argument which varies from button to button.
  • the function goButton
    1. assigns the argument received to the form input hidden field named xrequest
    2. submits the form (which is named form2)

One advantage of using inputs type="button" and JavaScript is that you may validate input fields (example: numeric fieds) through Javascript and warn the user right away, without having that done from the server CGI program.

Should you like to know more about JavaScript, please visit our JavaScript Tutorial

blue line