You are here: Home » All Posts » HTML Forms » How to switch the 'action' field in an HTML form dynamically

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

in HTML Forms

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!

{ 23 comments… read them below or add one }

demon5 May 2, 2013 at 9:47 pm

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!

Reply

tadu May 10, 2012 at 11:38 am

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

Reply

Leave a Comment

Previous post:

Next post: