[Resolved] Submit multiple CRED forms at once

[Author]

Posts

[Paul]

Hi there,

I have this code. I have 4 CRED forms on one page all setup to submit by AJAX and have put the JS once on the page in the content template that contains references to all the forms.

However, the issue I have is that although they are all setup to post by AJAX, it's updating all the forms but then reloading the page (which I dont want)

Can you help?

( function( $ ) {
    $( document ).ready( function(){
 
        $('.btn-submit').on( "click.tssupp", function(e){
 
            var others = $('.btn-submit').not(this);
 
            $('.btn-submit').off( "click.tssupp");
             
            others.click();
 
        });
 
    });
})( jQuery );

[Nigel]

Hi Paul

I'm wondering if this is because of the settings of one of your forms.

If you remove this JS to submit them simultaneously and you instead submit each of them manually, does the page reload with any of them?

Or it only happens with the custom JS to submit them together?

[Paul]

Hi there,

It updates fine without the JS. Only when I use the JS it seems to queue the AJAX but then still page refresh...

The buttons are normal inputs - should I change them to <button> elements?

Is it maybe the (e) i.e. prevent default or something not working?

[Nigel]

Hi Paul

I set up a test for this and composed my own script.

It's important not to get into a recursive loop when programmatically applying clicks to other submit buttons once an actual click has occurred on another button, and my solution for that is below, and depends on the event object being different depending on whether the click was real or programmatic.

( function( $ ) {
    $( document ).ready( function(){
        
        $(".wpt-form-submit").click( function( event ){

            if ( event.hasOwnProperty("originalEvent") ){
                $(".wpt-form-submit").not(this).click();
            }
        });
    });
})( jQuery );

That worked fine on my site.

I am wondering about what you expect to happen next, though, inasmuch as the form content is replaced by the ajax submission, including the submit buttons, so the event listeners are not attached to the updated buttons, so you can't submit them again and have the same thing happen. (I don't think there is a JS event available when the form has finished submitting via ajax to re-attach them.)

[Paul]

Hi there,

Thanks for your efforts on this. I will try your code in a moment. Must one thing to note. Adding my original JS directly in ONE of the forms makes it work without refresh. Having the JS code in the Content Template meant it didn't.

[Nigel]

I was just adding multiple forms to a page and so my JS was in one of the forms, I'm not sure of the details of your setup to know how the Content Template is involved...