How to switch the ‘action’ field in an HTML form dynamically

It is often required that you need to send the data in the same form to different server-side scripts depending one certain criteria. JavaScript allows you to modify the action field of an HTML form dynamically. This article shows you how to do it.

Multiple submit buttons

It is possible to have more than one submit button in a form. See the article on HTML form submit button for details. The example below shows how to switch the action field based on the submit button pressed.

<script type="text/javascript">
function OnSubmitForm()
{
  if(document.pressed == 'Insert')
  {
   document.myform.action ="insert.html";
  }
  else
  if(document.pressed == 'Update')
  {
    document.myform.action ="update.html";
  }
  return true;
}
</script>
<form name="myform" onsubmit="return onsubmitform();">

<input type="submit" name="operation" onclick="document.pressed=this.value" value="insert" />

<input type="submit" name="operation" onclick="document.pressed=this.value" value="update" />

</form>

See the above code in work:
Switching action field in HTML form: Example 1

Based on a radio button

The example below shows a case where the action field is switched based on the selection in the radio buttons.

<script type="text/javascript">
function OnSubmitForm()
{
  if(document.myform.operation[0].checked == true)
  {
    document.myform.action ="insert.html";
  }
  else
  if(document.myform.operation[1].checked == true)
  {
    document.myform.action ="update.html";
  }
  return true;
}
</script>
 <form name="myform" onsubmit="return OnSubmitForm();">
    name: <input type="text" name="name"><br>
    email: <input type="text" name="email"><br>
    <input type="radio" name="operation" value="1" checked>insert
    <input type="radio" name="operation" value="2">update
    <p>
    <input type="submit" name="submit" value="save">
    </p>
 </form>

See the above code in work:
Switching action field in HTML form – Example 2

Running Validations

You can easily do the form validations using JavaScript Form Validator script. See the article: JavaScript Form Validations Made Easy!.

If you are using the JavaScript Form Validator script, you need to do special handling for the switching of action field. This is because the Form Validator script overrides the onsubmit event of the form. Therefore, we need to call the onsubmit event explicitly to make the form validations work.

The example below illustrates handling of this case:

 <!-- Including the form validator script-->
<script src="gen_validatorv2.js"  type="text/javascript"></script>
<body>

<!-- The Function that handles the action switching-->
<script type="text/javascript">
   function OnSubmitForm()
   {
        if(document.pressed == 'Insert')
        {
             document.myform.action ="insert.html";
        }
        else
        if(document.pressed == 'Update')
        {
            document.myform.action ="update.html";
        }

      // Trigger the validations
       return document.myform.runvalidation();
   }
</script>

<!-- the HTML form goes here-->
<form name="myform" onsubmit="return OnSubmitForm();">

     name: <input type="text" name="name"><br>

     email: <input type="text" name="name"><br>

     <input type="submit" name="operation" onclick="document.pressed=this.value" value="insert">

     <input type="submit" name="operation" onclick="document.pressed=this.value" value="update">

</form>


<!-- Adding the validations for the validator script-->
<script type="text/javascript">

    var myformValidator = new Validator("myform");

    myformValidator.addValidation("name","req","Please enter the value for name");

</script>

<!-- Reassign the onsubmit handler. Notice that the runvalidation function is initialized here (which is called in OnSubmitForm() )-->

<script type="text/javascript">
    document.myform.runvalidation = document.myform.onsubmit;

    document.myform.onsubmit = OnSubmitForm;
</script>

See the code above in work:
Switching action field in HTML form – Example 3


Comments on this entry are closed.

  • If you are trying to use the first example please note that there is a syntax issue with the first example in Multiple submit buttons:

    should be

    😉

  • nice tips. thanks for the article.

  • great post!! I really liked the site content.. Thanks for your great effort..

  • Say, I have a dynamic form where in the number of radio buttons vary with the user input (No. of vendors) on the previous page. Part of the code is something like this:

    <%
    for (i=0; i

    VENDOR : Name:
    <input name=Vendor type=”text” style=”text-transform:uppercase;” onblur=”this.value=this.value.toUpperCase()” />

    Now, the number of the input text fields depends on the the value of “No_Vendors” and the names of radio button varies accordingly.

    I want to validate all of them, how do i do that?

    I tried using the following loop:

    var frmvalidator = new Validator(“Indigenous_Foreign_Selection_Form”);
    for (int j=0; j< Integer.parseInt(No_Vendors); j++)
    {
    String name= "Vendor"+j;
    frmvalidator.addValidation("name","req","Please enter the Number of Vendors");
    }

    But, it is not working. Any solution to this problem?

    • Ok, the exact code is:

      untitled

      <%
      for (i=0; i

      VENDOR : Name:
      <input name= Vendor type=”text” style=”text-transform:uppercase;” onblur=”this.value=this.value.toUpperCase()” />

      How do I validate the input field: Vendor as “req” ?

  • Thanks for this post you save me

  • Using this idea, I would like to return my form to a different page depending on a value the page has recieved in a ?_GET.

    if (?_GET[‘something’]==1)
    then action=’firstpage.php
    if (?_GET[‘something’]==2)
    then action=’secondpage.php
    if (?_GET[‘something’]==3)
    then action=’thirdpage.php

    All on one submit type button.

    How would this be best achieved?

  • Superb!!! Thank You Very much .
    Just searching in google I found it just what I wanted !!
    I have saved this html file.
    Javascript is so flexible.

    Thanks a lot

  • Thanks !

  • Thank you it was perfect!

  • excellent, very easy to follow and did the job perfectly. thanks

  • Wow! Thank you sooo much for this information. I was trying all day to figure out how to change the action on my form. In school we had to use a cookie to see if a person has submitted a form and if they have send them to a different link. My only regret is that I did not find this site sooner.
    Thanks a bunch

  • How can I make the save button stay on the same webpage without leaving back to the main page? Everytime I hit save, it just takes me back to the main page.

    This is how it looks under View Source:

  • please add one more feature where i can learn use of list/menu with a single button to connect it with multiple page…

  • i m very happy to learn this kind good work. Lot of thanks …..

  • i love you, you saved my life!

  • one error in the first example, the case of the function onsubmitform should be unified

  • Hello very cool web site!! Guy .. Beautiful .. Superb .. I will bookmark your blog and take the feeds alsoî“‘I am happy to seek out a lot of useful information here within the post, we want work out more strategies in this regard, thank you for sharing. . . . . .

  • Thank you for the article. I have seen some code in which action=”?” is written. See the snippet pasted below.
    <form enctype=”multipart/form-data” action=”?” method=”post”>
    <strong>Select a picture: </strong><small> (bmp, jpg, jpeg, gif, or png) </small><input type=”file” name=”file” style=”padding-left:10px;” /><br /><br />
    <table style=”width: 100%”><tr><td><input type=”radio” name=”ico” value=”1″ checked=”true” /> 16 x 16 </td><td><input type=”radio” name=”ico” value=”2″ /> 32 x 32 </td><td><input type=”radio” name=”ico” value=”3″ /> 48 x 48 </td><td><input type=”radio” name=”ico” value=”4″ /> 64 x 64 </td></table><br />

    <center><input type=”submit” value=”Generate” style=”border:solid 2px #D4D4D4;” /></center>
    </form>

    what exatly happnens when the user clicks the submit buttion ?

  • Thanks for the nice article

  • Just what I was looking for. Thanks.