Take the 2-minute tour ×

I want to have a form on the main section of my webpage with buttons along the bottom of this section to submit it.

I also want to have a side bar with links to other pages, but make it so that whenever a link is clicked it acts as a button to submit the form too. (ie in the HTML, the code for these links will be outside of the form tags, but I would like them to still act as buttons for the form)

Is this possible?

share|improve this question
The solution in most answers is to use JS to submit the form. Beware that the submit handler is not called if you call form.submit(). Therefore, if you do have an onsubmit handler to validate the form, you must call the validation routine yourself –  Juan Mendes Aug 8 '12 at 16:41

6 Answers 6

up vote 0 down vote accepted

The easiest way to ensure your form is submitted and validated by whatever function you've attached is not to call the form's submit() method, but to call its submit button's click() method instead.

Consider the following form:

<form id="bar" method="post" action="/echo/html/">
    <input type="text" id="foo" name="foo">

Right now, clicking submit doesn't do anything special. But what if you wanted to ensure the text input had a value before sending anything off to the server? You might accomplish that as follows:

function validateBarForm() {
    var txt = this.querySelector("input[type=text]");
    if (txt.value == "") {
        txt.style.outline = "solid red 2px";
        return false;

document.getElementById("bar").onsubmit = validateBarForm;

Now if you click submit the form won't be submitted with a blank text input. But what if you submit the form programmatically? Let's add a link first...

<a href="#" id="submit-bar">submit form</a>

Note that this link is outside of the form tag. We can trivially attach a submission function:

function submitBarForm() {

document.getElementById("submit-bar").onclick = submitBarForm;

We click "submit form" and... Whoops! The validation function is not performed! There are a few ways to skirt this issue, but my favourite is to simply have JavaScript simulate a click to the submit button. I find this holds up to changes a lot better than hardcoding a call to the validation function.

function submitBarForm() {
    document.querySelector("#bar input[type=submit]").click();

Now when you click the link, the form is validated, and if everything checks out it's submitted too. But don't take my word for it--head on over to jsfiddle.net and see for yourself.

share|improve this answer

You can solve this very easy without JavaScript in HTML5:

<input type="submit" form="id_of_the_form" value="Submit">

<form id="id_of_the_form" action method></form>

And you can style those buttons as you like. As in the example, the button can be placed at any point within the dom - no need to put it into the form.

share|improve this answer
Compatibility: it works almost everywhere except Internet Explorer (source: impressivewebs.com/html5-form-attribute ) –  franzlorenzon Jul 17 at 8:31

By adding an onclick javascript function to your form.


Where "myform" is the id of your form. Here's a nice walkthrough: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

For example, the button might be:

<button onclick="document.forms['myform'].submit();">Hi</button>
share|improve this answer

Yes the button's click event add document.getElementById('formId').submit();

share|improve this answer
<form name="myform" action="action.php">

    // Your form


<a href="javascript: document.myform.submit();">Submit form</a>

Or you can use jQuery:


    // Your form


<a href="#" onclick="$("#myform").submit();">Your text</a>
share|improve this answer

Use the following onclick handler in your link, replacing formId with the ID for the form you want to submit...

onclick="document.getElementById('formId').submit();return false;"


As @Juan (and others, especially @JoeTaylor) have mentioned, the above will not fire any client-side validation code associated with the form. The easiest way that I'm aware of to make it do so is to fire the click event of a submit button within the form. For instance, this could be used on your link...

onclick="document.getElementById('formSubmitButton').click();return false;"

Although you don't mention anything to do with server-side processing, I will take the assumption that is the point of your form. One additional thing I would say on the back of this is that you should ALWAYS replicate the validation back on the server. JavaScript is very easy to bypass, and so you should make sure the values reaching your server are correct, and never assume the JavaScript has done it's job.

share|improve this answer
Will this fire the submit event? That is, if I have an onsubmit that needs to do some validation, won't calling submit from JS bypass that handler? –  Juan Mendes Aug 8 '12 at 16:40
@Juan, that is a very good point, and no I don't believe it will. As has already been mentioned in other answers, the easiest way would be to "click" a submit button within the form - I will update my answer to give an example –  freefaller Aug 9 '12 at 7:46

Your Answer


