JavaScript Coder

How to switch the 'action' field in an HTML form dynamically

advanced html form action

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