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 cgi 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 language="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
Build Web Forms Faaaast!!
Using Simfatic Forms it is very easy to design, create,
install and maintain web forms; no coding required!
Quickly create your form, install it and receive form
submissions by email.
Click here for more info
Based on radio button
The example below shows a case where the action field is switched based on the
selection in the radio buttons.
<SCRIPT language="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
Conducting 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:
<SCRIPT src="gen_validatorv2.js" language="JavaScript"></SCRIPT>
<body>
<SCRIPT language="JavaScript">
function OnSubmitForm()
{
if(document.pressed == 'Insert')
{
document.myform.action ="insert.html";
}
else
if(document.pressed == 'Update')
{
document.myform.action ="update.html";
}
return document.myform.runvalidation();
}
</SCRIPT>
<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>
<SCRIPT LANGUAGE="JavaScript">
var
myformValidator = new
Validator("myform");
myformValidator.addValidation("name","req","Please enter
the value for name");
</SCRIPT>
<SCRIPT
LANGUAGE="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
Find more in the JavaScript Form Handling page.
|
