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

Be Sociable, Share!

Comments on this entry are closed.

  • Krishna Kumar Anbalagan

    Hello Friends I have one doubt. I have participate in one online challenge. Help me friends i have one doubt.My doubt is when i click submit button I need to see the new image with in the corresponding active tab not in new tab. I need to trigger the image when i click the submit button please any one tell me friends it’s urgent

  • I’m using your example to switch form processors and it seems to work in selecting the form action, but in my case I have 2 functions named “preview” and “launch”; rather than URLs.

    function OnSubmitForm() {
    if(document.pressed == 'Preview') {
    document.myForm.action ="return preview();"
    }
    else
    if (document.pressed =='Launch') {
    document.myForm.action ="return launch();"
    }
    }

    Then my form has:

    ...form input fields...


    The problem is the return preview() and return launch() are appended my root URL when a new window opens

  • Shikhar Singh

    I was looking for an answer to something. Could not found it anywhere….Found it here ..Just awsumm. Thanks a ton !!

  • Thanks for the excellent article.

    I’m a complete newb to javascript but I was able to use this article and code as well as the validation script (gen_validatorv4.js) to solve a problem
    I wanted to have a form with two cases:
    Case 1. “submit” and validate
    Case 2: “save” and bypass the javascript validations so I can save a partially filled out form.
    In both cases, the variables get passed to the *same* cgi.
    I modified slightly to get my desired results.

    ——

    function OnSubmitForm()
    {
    if(document.pressed == ‘Save’)
    {
    // If we want to save, we skip the checks
    return;
    }
    else
    if(document.pressed == ‘Submit’)
    {// Submit so we want to check the variables
    return document.myform.runvalidation();
    }
    }

    ….

    Thanks again!

    • adam

      Demon5, do you have a link to an example page?

  • how to write text validation using JavaScript?i.e code