does the submit button have to be contained in the form

Question

I want my submit button to be positioned somewhere that outside my form element? Do I have any options? With the exception of jquery.

Thanks, rodchar

Answer 1

Another approach to this is merely to set the form attribute on the button:

<form id="first">
    <input type="submit" form="second" value="Submit Second" />
</form>
<form id="second">
    <input type="submit" form="first" value="Submit First" />
</form>

Fiddle: http://jsfiddle.net/52wgc2ym/

---

Original Answer

The natural behavior of a submit button is to submit the nearest form up its hierarchy. The only other way to get a button to submit a form which it doesn't reside in is to use JavaScript (which is what jQuery is, basically).

If necessary, you could reposition the submit button so that it appears as though it's not in the form visually when the page is rendered. You would do this using CSS, which may give the desired result(s).

Answer 2

This is a common situation. I think this will do it (haven't tested it):

<form id="form1" action="someAction.cgi" method="GET">
    <!-- other fields go here -->
</form>
<form id="form2" action="someOtherAction.cgi" method="GET">
    <!-- other fields go here -->
</form>

<form>
    <input value="Form One" type="button"
        onclick="document.getElementById('form1').submit();"/>
    <input value="Form Two" type="button"
        onclick="document.getElementById('form2').submit();"/>
</form>

I'm not sure if you need that last <form>. I seem to remember browsers ignoring events if the button wasn't in a form.