2 Actions. 2 Thank-You Pages. 2 Buttons.
How To Build a Form Like That

I will show you how to build a form that will submit to two different action URLs depending on which of two buttons is clicked. And, I will show you how to change the thank-you page URL at the same time.

The form user clicks one or the other of the buttons. The form then responds according to the button that was clicked.

This article uses a Master Form V4 form as an example.

The technique can be applied to most HTML forms. The field name of the thank-you page URL in the examples may need to be changed to match the one your form uses.

For the example, we'll have an order form that submits to a Master Form V4 installation on a secure server:

<form 
   name="orderform" 
   method="POST" 
   action="https://example.com/secure/MasterFormV4.cgi">
<input 
   type="hidden" 
   name="flowto" 
   value="https://example.com/secure/thankyou.html">
[rest of form here]
<input 
   type="submit" 
   value="Submit Order To Secure Server">
</form>

As you can see, it's just a regular form that submits to software on the secure server.

Your form will of course have its own action and name="flowto" thank-you page URLs.

Now, let's add that second button. It can go above or below or to one side of the first submit button.

<input 
   type="submit" 
   value="Generate A Printable Order Page"
   onclick="________ return true">

The underscore of the onclick attribute in that second button will be replaced with JavaScript to change both the form's action URL and the name="flowto" thank-you page URL.

I'll show you the JavaScript, first. Then I'll show you how to put it all together.

The JavaScript to change the form's action URL is:

document.orderform.action='http://example.com/cgi-bin/MasterFormV4.cgi';

Replace the URL with the URL to your own installation of Master Form V4.

The JavaScript to change the form's thank-you page URL is:

document.orderform.flowto.value='http://example.com/thanks.html';

Replace the URL with the URL of your own thank-you page. In the example's case, that would be a template that will render as a printer-friendly printout of the order. But it could be any page you prefer.

In all examples, if your form's name is not "orderform", then change the JavaScript accordingly.

Here is how the button looks when it's all put together:

<input 
   type="submit" 
   value="Generate A Printable Order Page"
   onclick="document.orderform.action='http://example.com/cgi-bin/MasterFormV4.cgi'; document.orderform.flowto.value='http://example.com/thanks.html'; return true">

The onclick attribute and its value must be all on the same line.

If the location of Master Form V4 is the same for both buttons, then the JavaScript to change the action URL is not needed. It may be omitted.

Similarly, if the URL of the thank-you page is the same for both buttons, the JavaScript to change its URL may be omitted.

One other thing. The technique uses JavaScript.

A few browsers have JavaScript turned off. With those, the action and thank-you page URLs will not change when the second button is clicked. Instead, the form will act as if the first button was clicked.

The technique described in this article can be used to change any form fields in the form. Simply specify the form field's name, in the JavaScript, in lieu of flowto.

You realize, now, that the second button can change the form in one or many ways.

Using the same technique, a third and more buttons can be coded for the form. The action URL can be to software located in various places on the Internet.

The versatility is near limitless.

Will Bontrager