CODEWITHSUNDEEP
javascripthtmlformsbutton
Paul Rubenstein
Paul Rubenstein

Reputation: 342

HTML button to submit a form elsewhere on the page

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?

Upvotes: 3

Views: 11361

Answers (7)

gavin stanley
gavin stanley

Reputation: 1092

I do this myself with hidden submit buttons in the actual form, and outside of the form - anywhere else on the page - labels that reference the submit button and fire it.

In the form:

<input type='submit' id='hiddenSubmit'>

And anywhere else:

<label for='hiddenSubmit'>click me!</label>

Seems to do the job.

Upvotes: 0

freefaller
freefaller

Reputation: 19953

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;"

Update

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.

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

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.

Upvotes: 1

Joe Taylor
Joe Taylor

Reputation: 626

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">
    <input type="submit" value="Submit">
</form>

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("bar").submit();
}

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.

Upvotes: 0

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

<form name="myform" action="action.php">

    // Your form

</form>

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

Or you can use jQuery:

<form name="myform" action="action.php">

    // Your form

</form>

<a href="#" onclick="$("#myform").submit();">Your text</a>

Upvotes: 0

JaredMcAteer
JaredMcAteer

Reputation: 22536

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

Upvotes: 0

jchapa
jchapa

Reputation: 3996

By adding an onclick javascript function to your form.

document.forms["myform"].submit();

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>

Upvotes: 0

Related Questions