This question already has answers here:
How can I get the button that caused the submit from the form submit event?
(22 answers)
Closed 7 years ago.
Basically my question is very similar to:
Click a specific submit button with JQuery
However, I am not wanting to trigger my event on the button's click, I am wanting to trigger the event on the submit, of the form - but only of a specific button (as I have multiple submit buttons).
How can this be achieved?
Basically I've got this:
$("#btnCompleteOrder").click(function(event) {
//Do stuff here
}
And it works properly - however I want that event to trigger after form validation - so on submit (on click happens before form validation). However I don't think I can do .submit() on a button.
Edit: Yes this is also similar to How can I get the button that caused the submit from the form submit event?
However none of these options worked for me and I was looking for a more elegant solution to fix the problem.
I think I understand the problem now. See if this works for you.
Add an submit button to your form if you don't have one, this is necessary for the HTML5 validation to occur.
<input id="invisibleSubmit" type="submit" class="submit" style="display:none">
Then for your button handler use this:
$('#btnCompleteOrder').click(function(e) {
//don't submit the form
e.preventDefault();
//click the submit button so the html5 validtion occurrs
$("#invisibleSubmit").click();
//do some other stuff
//really submit the form
$(this).unbind('submit').submit()
});
You can use the submit method to bind a handler to a form's submit event.
For example:
$('form').submit(function () {
// Do stuff here.
});
Substitute form for the selector matching the form element.
This approach is better than simply listening for click, as you're probably aware, because a form can be submitted in more ways than just mouse click. A form can also be submitted by hitting enter in a text field or by tabbing to a submit button and hitting the space key. Because of this, you want to bind the event handler on the form itself, not any one UI element like the submit button.
Related
Let's suppose I have a form with some input fields and a submit button.
If I use the window.onunload, is it possible for me to trigger the submit button before the user leaves the webpage.
Which would be the correct way to implement it.
Something like the following might work:
$(window).unload(function() {
document.getElementById('YOURBUTTONID').submit();
});
I am submitting a form using JQuery and an event listener bound to a div (not an input field) and I am trying to prevent multiple submits, so the customer does not get overcharged. I am trying to accomplish this by removing the submit-button class of the clicked div, so the next time the user clicks it, JQuery won't listen to the event that is associated with the submit-button preventing multiple submits.
Using the implementation below however, for some reason, does not prevent multiple submits, as intended.
HTML
<div class="submit-button button-style">Submit</div>
JQuery
$(".submit-button").click(function(){
$(this).removeClass("submit-button");
//**submit form**
});
NOTE: I must stick to a solution that uses the html above, so solutions using an input element of type submit, will not be useful.
I appreciate any suggestions on how to make this work. Many thanks in advance!
You can make use of .one() to prevent it from firing multiple times -
$(".submit-button").one('click',function(){
//**submit form**
});
http://api.jquery.com/one/
Edit :
In case of error :
function submitForm(){
//**submit form**
$.post('submit.php').error(function(){
// rebind event on error
$(".submit-button").one('click',submitForm);
});
}
$(".submit-button").one('click',submitForm);
You could use something like:
$('something').one('click', function(){
// submit code
});
Which will only fire once.
A significant portion of users don't bother clicking the submit button to submit a form - there's other more convenient ways, like hitting the enter key when the cursor focus is on a form field.
A more robust approach is to block the form via the forms submit event, and maintain a variable to keep track of the form submission state.
var submitted = false;
$("form#myForm").submit(function(evt){
if (submitted) {
evt.preventDefault();//stops form submission
return;
}
submitted = true;
});
I omitted form validation for this example.
Imagine an HTML form with multiple submit buttons,
Im trying to write javascript function to submit this form with one specific button,
usually we use:
form.submit();
but it doesnt specify which button is pressed,
any Ideas?
Just fire it directly?
document.querySelector("#someButton").onclick();
Or if you're wanting to fire the submit button directly of a form, why not
document.querySelector("#someForm input[type='submit']").onclick();
Using jQuery, you'd submit the form in an event handler that is bound to the click event on the desired button:
$('.trueSubmitFormButton').click(function(){
form.submit();
});
I was told by someone on this site that it was best not to write inline function calls in your HTML when doing jQuery. It sounds like a good plan.
So using jQuery, how do I call a function upon a button submission?
You mean form submission. And you can do it by binding an onsubmit event handler to your form:
$("#myForm").submit(function() {
// do something
});
Based on your question, there are 2 different events you might want to use.
If you want to capture the button click, then you want the "click" event of the button
If you want the form submit, then you want "submit" event of the form.
$('form[name=myForm]').submit(function(){
// function here
});
jQuery docs on submit();
Others already answered on how to do a form submission, but if you mean you just want to click the button then you would want to use
$('input[name=myButton]').click()
jQuery docs on click();
I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?
A couple of suggestions:
Overwrite the submit function to do your evil bidding
var oldSubmit = form.submit;
form.submit = function() {
$(form).trigger("submit");
oldSubmit.call(form, arguments);
}
Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):
$("form a").click(function() {
$(this).parents().filter("form").trigger("submit");
});
If you are using jQuery, you should be attaching events via it's own event mechanism and not by using "on" properties (onclick etc.). It also has its own event triggering method, aptly named 'trigger', which you should use to activate the form submission event.
Thanks Eran
I am using this event binding code
this._form.bind('submit', Delegate.create(this, function(e) {
e.preventDefault();
this._searchFadeOut();
this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
});
but there is legacy onclick code on the HTML and I would prefer not to change it as there are just so many links.
This worked for me:
Make a dummy button, hide the real submit with the name submit,
and then:
$("#mySubmit").click(function(){
$("#submit").trigger("click"); });
set an event handler on your dummy to trigger click on the form submit button. let the browser figure out how to submit the form... This way you don't need to preventDefault on the form submit which is where the trouble starts.
This seemed to work around the problem.