Advertisement
Advertisement


Submit form using a button outside the tag


Question

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?

2017/09/19
1
312
9/19/2017 2:59:06 PM

Accepted Answer

Update: In modern browsers you can use the form attribute to do this.


As far as I know, you cannot do this without javascript.

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

A submit button is considered a control.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

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?

2018/10/31
83
10/31/2018 10:23:28 AM


A solution that works great for me, is still missing here. It requires having a visually hidden <submit> or <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 <label> element.

2017/07/06

if you can use jQuery you can use this

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

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.

2016/07/15

<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.

2015/07/03

Similar to another solution here, with minor modification:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

2018/06/28

Try this:

<input type="submit" onclick="document.forms[0].submit();" />

Although I would suggest adding an id to the form and accessing by that instead of document.forms[index].

2011/08/11

Source: https://stackoverflow.com/questions/7020659
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]