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...

About This Tutorial
Author: Pablo Varando
Skill Level: Beginner 
 
 
 
Platforms Tested: CF1,CF2,CF3,CF4,CF5,CFMX,BlueDragon
Total Views: 101,113
Submission Date: December 01, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 47
Discuss This Tutorial
  • Is there a way to build a form where someone would enter a text field and the data from this field would be able to dynamically pull the results for 2 dropdown selection fields? example Account: (person enters) 1234567 Department:(selected based on account number) Responsible Person:(selected based on account number) Thank you in advance. we really need to know how to run a cfquery using javascript I believe...

Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.