Submit form using a button outside the
Say I have:
<form method="get" action="something.php"> <input type="text" name="name" /> </form> <input type="submit" />
How do I go about submitting that form with that submit button outside of the form, I think in HTML5 theres an action attribute for the submit but I'm not sure if thats fully cross-browser and if it isn't is there anyway to do this?
Here's what the spec says
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
That's my bold
submit button is considered a control.
From the comments
I have a multi tabbed settings area with a button to update all, due to the design of it the button would be outside of the form.
Why not place the
input inside the form, but use CSS to position it elsewhere on the page?
Read more... Read less...
A solution that works great for me, is still missing here. It requires having a visually hidden
<input type="submit"> element whithin the
<form>, and an associated
<label> element outside of it. It would look like this:
<form method="get" action="something.php"> <input type="text" name="name" /> <input type="submit" id="submit-form" class="hidden" /> </form> <label for="submit-form" tabindex="0">Submit</label>
Now this link enables you to 'click' the form
<submit> element by clicking the
if you can use jQuery you can use this
So, the bottom line is to create a button like Submit, and put the real submit button in the form(of course hiding it), and submit form by jquery via clicking the 'Fake Submit' button. Hope it helps.
<form method="get" id="form1" action="something.php"> </form> <!-- External button--> <button type="submit" form="form1">Click me!</button>
This worked for me, to have a remote submit button for a form.
<input type="submit" onclick="document.forms.submit();" />
Although I would suggest adding an
id to the form and accessing by that instead of