does the submit button have to be contained in the form

Question

Hi All,

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

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

The submit button needs to be inside the form, yes.

It seems strange to me to want it any other way, anyway. What would be the point if the input controls were in one place on the page, and the submit button was waaay over there somewhere else?

Answer 3

Inputs of type submit only make sense as children of <form> elements. But using CSS I'm sure you can position it wherever you like. Remember form elements are "invisible" so just expand the tags around more of your content and you're covered. Here's the documentation on forms for HTML4, it's still appropriate.

Answer 4

Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc). You could also write JavaScript that will trigger the form submission and tie it to another element.

Answer 5

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.

Answer 6

This is the another type of answer getting more clear view from egrunin answer

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

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

or Calling by form name:

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