Changing the form submission page on the fly!

A question I tend to get quite often is how can I specify a FORM submission page on the fly, by this I mean if I have a select (dropdown) and I want to allow the user to go to a specific page depending on what action they want to do, but I also want to send FORM variables, how can I achieve that?

Well, this example does not use any ColdFusion, but it's something that many beginning ColdFusion developers out there tend to ask and so I felt that it would be a good tutorial to post on EasyCFM.COM.

Now this sounds like a simple solution, to have multiple forms on the page right? Wrong... With JavaScript and a little creativity, you can achieve that all on a single page... let me show you how...

The first thing you must do is to create the JavaScript code, this would look like this:

<SCRIPT LANGUAGE="JavaScript">
   <!--
    // Create a function that will change the form action value on the fly.
    function FormAction(page){
                      //The line below will define the page the forms submits to.
                      document.WhatToDoForm.action = page;
                      // Te line below will actually submit the form.
                      document.WhatToDoForm.submit();
    }
     // -->
</SCRIPT>

Now that you have the JavaScript, comes the easy part :)

<FORM ACTION="foo.cfm" NAME="WhatToDoForm" method="post">
   <table width="100%" border="0">
       <tr>
           <td>Email Address:</td>
           <td><input type="text" name="Email" value=""></td>
       </tr>
       <tr>
           <td>Password:</td>
           <td><input type="password" name="Password" value=""></td>
       </tr>
       <tr>
           <td>Select form action</td>
           <td>
           <select name="FormLocationPage" OnChange="FormAction(this.value);">
               <option value="" selected>Define what you want to do?</option>
               <option value="register.cfm">Register Page</option>
               <option value="login.cfm">Login Page</option>
            </select>
          </td>
       </tr>
    </table>
</FORM>

Ok, now notice that there is "NO" submit button, the actual select box will act as the SUBMIT button when a value is selected and it will submit the form to the specified page.

Also, notice that the FORM NAME is in MAROON, it is also in MAROON in the JavaScript, if you want to change the name of the form, you must also change it in the JavaScript itself.

Well, that's pretty much it, Questions? Comments? Let me know...