We Keep Coding

jQuery .on('click) after form submission not assigned any more

I am using Gravity Forms in combination with a custom jquery code.
The jquery code assigns a validation to the form before it is submitted and fires a sweetalert if something is missing.
After clicking the submit button of the form the first time, the jquery validations work and the alert is fired.
Because there are submission errors, gravity forms now shows the validation errors too.
When filling out all required fields and clicking on the same submit button again, the jquery validation is not assigned to the button any more and no alert is fired. Why is that? The id of the button is still the same.
The JS code, it works fine, the only problem is, that its not assigned anymore to the submit button of the gravity form when the form is in the validation erros state.
jQuery( "#gform_submit_button_3" ).on('click', (function() {
//alert ("test");
var jugend = jQuery("#input_3_5").val();
var trainer_vorname = jQuery("#input_3_6_3").val();
Solution:
Prevent the Form to be submitted by the following code:
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
//do what you want with jquery/JS with the form

Ok, i found the solution by myself.
With the following JS (added to the wp themes JS section) i can prevent the Gravity Form to be submitted.
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
After that, i use JS to do some form validations. If the form is OK, i am sending the form data with a ajax post request to the server.
Keep in mind that the normal submission hooks are not working when preventing the form submission.

Yii and Javascript form submission

I'm using Yii as a PHP framework for my site. Additionally, my site uses some js/jquery like, say, a jQuery UI Dialog widget (except for those dialogs, the rest of the code is pure normal html form components and jQuery code for the event handlers).
In the Yii side, I use CForms to build my forms from specifications file.
When I test if the form was submitted, I must do it for a certain button. This is not only forced, but I also take advantage of it.
if ($myCFormInstance->submitted('approve')) {
//process approval code
} else if ($myCFormInstance->submitted('reject')) {
//process rejection code
}
The actual problem I have is a bit conceptual one, since -fortunately- I know what's going on with my code and -again, fortunately- know the problem root:
Somewhere in My code I intercept the submit button's click event:
$(function(){
$(".critical-action").click(function(e){
var form = $(this).closest("form");
e.preventDefault();
e.stopImmediatePropagation();
confirmDialog("¿Continuar?", "#critical-action-dialog", function(){
form.submit();
});
});
});
Say the .critical-action classed elements are always a submit button in a form.
The intention of the code: cancel the form submission, and perform it only if the user -in the dialog- clicks the "Yes, Continue" (i.e. confirming the action) button.
This code works as expected, and have no problems at a javascript level BUT -and here goes my issue- when doing form.submit(), the button is not sent as part of the form. This is obvious: I'm sending the form without specifying any button. In the case of Approve and Reject, which have two buttons, the example explains itself: if the form.submit() call could send their buttons ¿which of them should send?.
Question: So, since form.submit() doesn't send any button, but I actually need buttons ¿how can I send the form "with the corresponding button" -i.e. a button I choose to specify, which should correspond to this in the click handler function context- automatically via javascript? The button NEEDS to be identified by Yii in order to process the form (specially with the Approve and Reject case).

If you added a hidden input to the form, you can modify the input value with jQuery before you submit the form, like this:
$("#inputID").val('approve');
If you want to set the value to the value of the clicked button via $(this).val(), be aware of the issue that could result in an IE browser, explain here. The second answer (by postpostmodern) has a solution to this issue.

Preventing multiple form submits

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.

How can I run some JavaScript *after* a form submit event?

I'm working on an HTML form that may take a few seconds to submit. I'd like to disable some of the fields in the form after it's submitted.
I can do this in a handler on the form's submit event, but this fires before the form submits. If I disable the controls then, their values aren't included in the post data sent to the server.
I've tried cancelling the submit event in my handler, removing my submit event handler from the form, submitting the form myself via JavaScript, and then disabling the controls, but the problem there is that I need to know which button the user clicked on to submit the form. This information is in the original form submit, but obviously isn't in the one I trigger manually (as no button was clicked).
I could try to copy this information into my manual form submit, but is there a way to run my disabling code after the form submits?

Don't allow further submits by disabling the submit buttons, you don't need to do anything else. Alternatively, hide the form and replace it with something that spins so users are mesmerized into thinking that Something Important is happening.

This is pretty much the same as sp00m's answer, except it uses Javascripts native submit to prevent the recursive call.
$('#myForm').submit(function() {
this.submit();
disableFields(); // your own function
return false;
});

After submiting the form you can trigger this function:
function name() {
$("#target :input").attr("disabled", true);
return true;
}
This code will disable all the from fields descended from the element with "target" as its id.
This version just matches all input elements:
function name() {
$("#target input").attr("disabled", true);
return true;
}
You have to include the jQuery library for this code to work.

You could use jQuery's .post() to submit, and .button().click() to detect what button was clicked
.post() takes a function to execute after the submission is complete

You could delay the execution of your operations so that they are called only after the submit has been made:
$('#myForm').submit(function() {
setTimeout(function() {
// Run disabling code here
}, 1);
return true;
}
setTimeout(fn, 1) will place the function inside at the end of the execution queue, so that the form submission has been started before the functions run.
setTimeout can be used for queuing operations a bit like thread indexing or z-index:
StackOverflow: Why is setTimeout(fn, 0) sometimes useful?

JavaScript work before submitting ASP.NET MVC form

I have an ASP.NET MVC view with a Beginform, that specifies an action and controller to hit on submit. But on submit I want to call a service using jQuery to get some data and then submit those data with the form.
Currently I have a submit button on the form where the onclick event of the button calls the JavaScript method. Depending of what result I get from the method I want the form to be submitted to the specified action.
Now I can't get this to work. Is it the right way to do this or should I instead make a post using jQuery? I think it would be nice to use what I have already specified as action/controller in the form.

I think the best way is to use event 'submit' on form, because users can want to submit form by pressing Enter in some fields. Guess, it is possible to change some input values during this event,
jQuery('form#myform').submit(function(e){
//....
if (somevar == false)
{
// stop submitting form
e.preventDefault();
}
else
{
jQuery('input#hiddeninput').val('somevalue');
}
})

The solution is add on submit event to form tag
onsubmit="return onSubmitClick(this);"
function onSubmitClick(item) {
console.log(item);
return false;
}
it's work well. GL ! HF !

I think it would be better to perform the task of querying an external web service in a controller action. This way you would always submit the form to the same controller action which will query the service and based on the results would either render a view or redirect to some other action.