JavaScript Coder

The HTML Form Submit Button

beginner html form submit reference submit

The basics of an HTML form submit button is discussed first in this article, moving towards more advanced topics like multiple submit buttons.

HTML form submit button

The code below creates a form submit button:

<input type="submit" name="mysubmit" value="Click!" />

name: specifies the identification assigned to this submit button. value: is the label that appears on the button.

Identifying the submit button on the server side

The name and value of the button that is pressed to submit the form is passed to the server side script. For the button above, when you click on the submit button, the data passed to the server side script is: mysubmit="Click!"

Multiple Submit buttons

You can have more than one submit buttons in a form. But, how to identify from the server side which of the buttons was pressed to submit the form?

One way is to have different names for the submit buttons.

<input type="submit" name="Insert" value="Insert"> 
<input type="submit" name="Update" value="Update">

In the server side script you can do a check like this :

if(!empty($_REQUEST['Update'])) 
{ 
    //Do update here.. 
} 
else if(!empty($_REQUEST['Insert'])) 
{ 
    //Do insert Here 
}

Note: The code depends on the server side scripting language you use. The code above is in PHP.

The second method is to have different values for submit buttons with the same name.

<input type="submit" name="Operation" value="Insert"> 
<input type="submit" name="Operation" value="Update">

The server side code goes like this (PHP code):

if($_REQUEST['Operation'] == 'Update') 
{ 
    //Do update here.. 
} 
else if($_REQUEST['Operation'] == "Insert") 
{ 
    //Do insert here 
}

Switching the ‘action’ field dynamically

It is commonly required to switch the action field of the dynamically based on certain conditions. Read: Switching HTML form ‘action’ field dynamically

How to submit a form using a hyperlink or an image? Read: Tutorial on JavaScript Form Submit Methods

You can find more on HTML Forms in the HTML Form Tutorial

See Also

Categories