Javascript: Dynamic Form Submission

[visualAd]

The following tip demonstrates the different methods of submitting forms to other web sites from your HTML pages.

• Submitting a Form using Javascript
  
  • Multiple Submit Links in Forms
• Finding Information about Forms
• Using hidden fields and variable fields to submit form data
• Posting (POST Method) data to forms.
• Using Javascript to create a POST link

Submitting a Form using Javascript
An alternative way to submit forms in a Javascript enabled browser, is to use a link. The following example shows how this can be used to create a submit link:

<form name="js_submit" action="form_action.php">
    <!--
        FORM HTML
    -->
</form>
<a href="javascript:document.forms['js_submit'].submit()">Submit Form</a>

Nb: To access the form using a name, you must assign a value to the name attribute.

Multiple Submit Links for a Form
You can add more than one submit button to your HTML forms by giving them different names. The browser will only send the name and the value ofthe submit button pressed to the server side script, therfore, you can determine which button was pressed.

A similar effect can also be aceived with a Javascript submit link. To do this, an extra, hidden field needs to be added to the form. When the submit link is clicked a short peice of javascript sets the value of the hidden variable. This hidden variable can be tested by your server side scritp to determine which link was clicked to submit the form.

<script type="text/javascript">
<!--
function submitAction(formName, actionValue)
{
    document.forms[formName].submit_action.value = actionValue;
    document.forms[formName].submit();
}
//-->
</script>
<form name="js_submit" action="form_action.php">
    <!--
        FORM HTML
    -->
    <input type="hidden" name="submit_action" value="" />
</form>
<a href="javascript:submitAction('js_submit', 'action_1')">Action 1</a>
<a href="javascript:submitAction('js_submit', 'action_2')">Action 2</a>

To see a working version of this form, click here.

Finding Information about Forms
When a HTML form is designed by a developer, he/she may include many hidden fields which contain data used by the server side script. If you want to include a link which submits information to a server side application written by someone else or on another site, some detective work is required.

In the following examples I am going to use the VbForums search facility as an example on how to create a link which automatically carries out a search. The software used on VBForums (vbulletin) allows you to submit the information via either the GET method of the POST method, therefore I will create two examples, one for each method.

Research
The serach facility on VBForums allows you to carry detailed searchs on the forums based one keywords entered and allows fine tuning of the results.

Let us assume that we want to create a link on our site which searches only the Javascrript forum for a key word. I recommend you use the Firefox web browse for the next stage, as it includes a useful feature on in the page information dialog which displays detailed information about the forms on a page.

1. Use Firefox to open the VBForums serch page.
2. Right click anywhere on the page and select View Page Info.
3. Finding the form we Want
   Click on the Forms tab to display a list of forms.
   {image here}
   
   At this point you can see that the page contains several forms. To find which one it is we need to open the HTML source code for the page by right clicking and selecting View Source.
   

[Wokawidget]

this is nice...but why is it here?

woof

[visualAd]

its under construction - I am lost for words - I have found it so useful that I want to shae it ith everyone - but find the most approriate way of explaining it is very awkward.