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?
This question is related to
html
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" />
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.
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>
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.
<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.
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.
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>
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).
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. ;)
You can tell a form that an external component from outside the <form> tag belongs to it by adding the form="yourFormName" 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>Autentificate</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).
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>
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>
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].
Source: Stackoverflow.com