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?
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?
In HTML5, there is the form attribute. Basically
<form id="myform" method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" value="Update"/>
<button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()"> As experiments revealed, this.form is the attached form DomElement, while it's null otherwise. // edit: jQuery, but possible with vanilla, too ofc –
Saintsimonianism INPUT tags to not be self-closing? (Here's the change summary of my unsuccessful edit attempt: "Fixed invalid self-closing tag syntax for non-XHTML (but HTML5) INPUT, which is a void element (thus can't be closed).") Thanks! –
Leisha <input></input>) and in HTML5 non-void elements aren't allowed to have solidus in the start tag, but a solidus at the end of a start tag is not invalid for void elements, it's simply ignored. The syntax in my answer is valid for both HTML5 as well as XHTML5. –
Analgesia <button type="submit" form="frmFoo" onclick="!this.form && document.getElementById('myform').submit()"> –
Attenuant 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.
<form>. This is a simple solution. This answer might be answer to the question. :) –
Triliteral label is not a focusable element (AFAIK) so it's not intuitive for a user that is only using the keyboard to navigate to the 'button' and then press space to activate that button for example. (I realise you can press <enter> instead, but that's not the only way people are used to navigating forms with the keyboard) –
Coo label via tab button, you can use tabindex HTML attribute: <label for="submit-form" tabindex="0">Submit</label> as per this question –
Flashover tabindex was very helpful, especially for readers who only look at the top-voted answers, so thank you. Please note, however, that @Jonathan's answer already included this feature. –
Catnip display: none; in CSS. –
Hetti tabindex="0", the tab can focus on it, however when I press Enter or Space, it does not submit the form. However, Lie Ryan's way works in this case. –
Offside style="display:none" to hide it –
Pneumonectomy 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?
<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.
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.
$('button[form]').click(function (){ var formId = $(this).attr('form'); $('#' + formId).submit(); }); –
Evadnee 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>
You can tell a form that an external component from outside the <form> tag belongs to it by adding the form="yourFormId" to the definition of the component.
In this case,
<form id="login-form">
... blah...
</form>
<button type="submit" form="login-form" name="login_user" class="login-form-btn">
<B>Log In</B>
</button>
... would still submit the form happily because you assigned the form name to it. The form thinks the button is part of it, even if the button is outside the tag, and this requires NO javascript to submit the form (which can be buggy i.e. form may submit but bootstrap errors / validations my fail to show, I tested).
type="submit" –
Manna 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].
You can always use jQuery:
<form id="myForm">
<!-- form controls -->
</form>
<input type="submit" id="myButton">
<script>
$(document).ready(function () {
$("#myButton").click(function () {
$("#myForm").submit();
});
});
</script>
Here's a pretty solid solution that incorporates the best ideas so far as well as includes my solution to a problem highlighted with Offerein's. No javascript is used.
If you care about backwards compatibility with IE (and even Edge 13), you can't use the form="your-form" attribute.
Use a standard submit input with display none and add a label for it outside the form:
<form id="your-form">
<input type="submit" id="your-form-submit" style="display: none;">
</form>
Note the use of display: none;. This is intentional. Using bootstrap's .hidden class conflicts with jQuery's .show() and .hide(), and has since been deprecated in Bootstrap 4.
Now simply add a label for your submit, (styled for bootstrap):
<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
Submit
</label>
Unlike other solutions, I'm also using tabindex - set to 0 - which means that we are now compatible with keyboard tabbing. Adding the role="button" attribute gives it the CSS style cursor: pointer. Et voila. (See this fiddle).
Enter has no effect. Thus, being able to tab to it seems a little pointless. Is there a way to do this without using JavaScript? –
Catnip <input... /> self-closing syntax, which just about everybody's blatantly and incorrectly using here (too), to the proper void no-close tag! :) Kudos! –
Leisha Your <button> will need to have these 2 attributes: type="submit" and form="form_id" if it is outside a form. Example:
<form id="my-form">
...
</form>
<button type="submit" form="my-form">
Submit
</button>
In addition, the <button> element can also have formmethod and formaction attributes that overrides the form's method and action respectively. Example:
<button type="submit" form="my-form" formmethod="post" formaction="/something.php">
Submit
</button>
Here is the reference to all available attributes for the <button> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This work perfectly! ;)
This can be done using Ajax and with what I call: "a form mirror element". Instead to send a form with an element outside, you can create a fake form. The previous form is not needed.
<!-- This will do the trick -->
<div >
<input id="mirror_element" type="text" name="your_input_name">
<input type="button" value="Send Form">
</div>
Code ajax would be like:
<script>
ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");
function ajax_form_mirror(form, file, element, method) {
$(document).ready(function() {
// Ajax
$(form).change(function() { // catch the forms submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: method, // GET or POST
url: file, // the file to call
success: function (response) { // on success..
$(element).html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
});
}
</script>
This is very usefull if you want to send some data inside another form without submit the parent form.
This code probably can be adapted/optimized according to the need. It works perfectly!! ;) Also works if you want a select option box like this:
<div>
<select id="mirror_element" name="your_input_name">
<option id="1" value="1">A</option>
<option id="2" value="2">B</option>
<option id="3" value="3">C</option>
<option id="4" value="4">D</option>
</select>
</div>
I hope it helped someone like it helped me. ;)
I used this way, and kind liked it , it validates the form before submit also is compatible with safari/google. no jquery n.n.
<module-body>
<form id="testform" method="post">
<label>Input Title</label>
<input name="named1" placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
<alert>No Alerts!</alert>
<label>Input Title</label>
<input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
<alert>No Alerts!</alert>
<label>Input Title</label>
<input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
<alert>No Alerts!</alert>
</form>
</module-body>
<module-footer>
<input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
<input type="button" value="Reset">
</module-footer>
Maybe this could work, but I don't know if this is valid HTML.
<form method="get" action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" class="hide-submit" />
</form>
<label for="submitButton">Submit</label>
I had an issue where I was trying to hide the form from a table cell element, but still show the forms submit-button. The problem was that the form element was still taking up an extra blank space, making the format of my table cell look weird. The display:none and visibility:hidden attributes didn't work because it would hide the submit button as well, since it was contained within the form I was trying to hide. The simple answer was to set the forms height to barely nothing using CSS
So,
CSS -
#formID {height:4px;}
worked for me.
© 2022 - 2024 — McMap. All rights reserved.