Search code examples
javascriptjqueryformsgravity-forms-plugingravityforms

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

Solution

  • 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.