how to submit a form outside the form itself

Question

I have a form

<form action="search_name.php" id="header_search_form" method="POST"> <div class="search_bar"> <input id="search_box" autocomplete="off" type="text" name="search_box" maxlength="30" size="53" /> <input id="search_button" type="submit" name="submit" value="submit" /> </div> </form> <button onclick="search()">search</button>

I would also like to submit using the button outside the form, and I have tried the

function search(){ $('#header_search_form').submit(); }

but it doesn't work as expected, I want when I click the button , and the button should do the same thing as I click the input submit button inside the form, including set the $_POST['search_box'] and direct to the search_name.php

i think you need to add that button inside your form. try this please. — user1593330
– user1593330, Commented May 4, 2014 at 14:14
@MittulChauhan but how to put it outside the FORM is actually the question... — A. Wolff
– A. Wolff, Commented May 4, 2014 at 14:22
Put it inside your form. Style it to look like it’s outside your form if need be, but it should be in your form. — Ry-
– Ry- ♦, Commented May 4, 2014 at 14:41

A. Wolff · Accepted Answer · 2014-05-04 14:12:13Z

5

EDIT: don't use it to support IE...

Use form attribute targeting ID of the FORM to submit:

<button form="header_search_form">search</button>

DEMO

edited May 4, 2014 at 14:12

answered May 4, 2014 at 14:07

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A. Wolff Over a year ago

@samitha i was setting ID twice on the FORM ;)

GolezTrol Over a year ago

Very good. I like solutions without Javascript and I didn't know this one. Note, though, that this will work in HTML 5 document, but not in HTML 4 or XHTML.

A. Wolff Over a year ago

@GolezTrol Well looks like not even supported by IE10 (11?), so shouldn't be used :( I was expecting only IE8< to not support it

GolezTrol Over a year ago

Hmm. That's too bad. I've attempted to make my Javascript solution a little more generic, so you can just have a submit button with a form attribute, after which Javascript just hooks in to simulate the behaviour.

GolezTrol · Accepted Answer · 2014-05-04 18:47:47Z

Using javascript:

document.forms[0].submit();

If your form has a name attribute, you can use that name instead of a numeric index:

document.forms['header_search_form'].submit();

If it has an id (like in your question), then you cannot use the forms array, but you can use:

document.getElementById('header_search_form').submit();

In either case, you can do it though JQuery as well, but you don't need to. As you can see it's just a single line of plain Javascript.

-edit-

If you have an HTML5 document you can use the non-javascript solution by A. Wolff. But remember to check browser compatibility. IE doesn't support it, for one, and your page has to have an HTML doctype.

-edit2-

To combine the two solutions and make it IE compatible, you can do something like this:

Add the form and the submit button as you would in HTML 5:

<form action="search_name.php" id="header_search_form" method="POST"> </form> <input type="submit" form="header_search_form" value="Click me">

Then add a piece of Javascript that will use the form attribute of the submit button to detect which form should be submitted.

$(document).on('click', 'input[type="submit"]', function(event){ $button =$(this); if (formId = $button.attr('form')) { event.preventDefault(); document.getElementById(formId).submit(); } });

This will perform, through Javascript (and JQuery in this implementation), the same behaviour as the form attribute should have by default in HTML5, but this way it will also work in IE or if you have a non-html5 doctype.

This snippet always overrides the behaviour, but you could also detect the browser and only override it if necessary. Maybe it will be a feature in Modernizr once, but if I understand correctly that is not currently the case.

Demo: http://jsfiddle.net/v2E3g/2/

To make it a little more generic, you might eval (I know), the onsubmit event for the form as well. This event isn't triggered when submitting through Javascript, so if you got any onsubmit event (for validation for instance), then you're going to have to do something like this:

$(document).on('click', 'input[type="submit"]', function(event){ var $button = $(this); if (formId = $button.attr('form')) { event.preventDefault(); var form = document.getElementById(formId); var canSubmit = true; // Since submitting through Javascript won't trigger the onsubmit event, // it is forged. if ($(form).attr('onsubmit')) { canSubmit = eval('(function(){' + $(form).attr('onsubmit') + '}())'); } if (canSubmit) { form.submit(); } } });

Demo: http://jsfiddle.net/v2E3g/6/

Thx for sharing, your answer is great, would deserve more upvotes imho!

user1593330 · Accepted Answer · 2014-05-04 14:16:25Z

try this

<script type="text/javascript"> function search(){ $('#header_search_form')[0].submit(); } </script>

martynas · Accepted Answer · 2014-05-04 14:30:04Z

0

$("#mybutton").click(function() { $("#header_search_form").submit(); });

DEMO

edited May 4, 2014 at 14:30

answered May 4, 2014 at 14:23

martynas

12.3k3 gold badges59 silver badges61 bronze badges

Comments

tylerlindell · Accepted Answer · 2014-05-04 14:09:32Z

-1

function search() { $('#search_button').trigger('click'); }

answered May 4, 2014 at 14:09

tylerlindell

1,5632 gold badges17 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to submit a form outside the form itself

5 Answers 5

DEMO

4 Comments

1 Comment

Comments

DEMO

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Related