Specifying multiple actions from a single Form

• Download source files - 1 Kb

Introduction

In writing the Self-posting scripts I needed a way to allow the user to send their HTML to either the next page for processing, or to a preview page so they could check first. Basically I wanted 2 "submit" buttons on a single form, but there seemed no obvious way to do it. After asking around and (gasp!) reading the docs I came across a simple method that I hope will save someone else half a day of messing around.

The Problem

Say I have a form such as below:

We want Button1 to send the data to one page, and Button2 to send it to a completely different page. Your <form> tag specifies the action to take when the submit button is pressed - but we can only specify a single action.

A Solution

One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:

<!-- create the form -->
<form name="Form1" method="post">

<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />

<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">

<!-- close the form -->
</form>

Our button click handlers for Button1 and Button2 would look like the following:

<script language="Javascript">
<!--
function OnButton1()
{
    document.Form1.action = "Page1.aspx"
    document.Form1.target = "_blank";    // Open in a new window
    document.Form1.submit();             // Submit the page
    return true;
}

function OnButton2()
{
    document.Form1.action = "Page2.aspx"
    document.Form1.target = "_blank";    // Open in a new window
    document.Form1.submit();             // Submit the page
    return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>

Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.