Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

Most Recent
Software Additions

Go Short URL

Create short URLs with your own control panel, on your own server, and all your short URLs will have your own domain name.

Secure View and Remove

Remove the data from your secure server safely, without compromising your customer's trust.

Survey Lite

Provides an opportunity for your visitors to give you feedback on the subjects you want to hear about.

Attention Ticker

Scrolling text banner is perfect for special offers... news feeds... syndication to other sites ...

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.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Type your response here. Thank you.

Powered by "Real Time Reader Feedback" from WebSite's Secret.

Will Bontrager
©Copyright 2007 Bontrager Connection, LLC Bontrager Connection, LLC

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC