[Resolved] Submit multiple Forms at once

[Author]

Posts

[bernhardK]

Hi all,

I have a view and within the loop of the view I have a toolset form.
Each loop outputs an Item and a form with submit button. (Check screenshot for sample)

Item A [Submit]
Item B [Submit]
Item C [Submit]

I want to be able to have an additional button, to submit all forms at once OR when clicking one of the Submit buttons, all buttons get clicked.

I added a script, whenever one of the submit button gets clicked, all other displayed Submit button do also get clicked / in other words forms get submitted.

The loops forms all have " Submit this form without reloading the page (use AJAX)" and "Keep displaying this form" active.

Current behaviour with below code is: when clicking one Submit button, all submit buttons on that page get clicked (Ajax wheel is spinning). However, in the end, only 1 form is saved.

FORM:
[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div style="display:none;">
[cred_field field='@termin-protokoll.parent' class='form-control' output='bootstrap' select_text='--- not set ---' value='[wpv-post-id]']
[cred_field field='@schuler-protokoll.parent' class='form-control' output='bootstrap' select_text='--- not set ---' urlparam='schuelerid']
[cred_field field='@protokoll-festvertrag.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='true' urlparam='vertragsid']
</div><div class="containerx"><div class="row">
[cred_field field='form_submit' type='button' output='bootstrap' value='Stunde anlegen' class='btn-submit btn btn-secondary btn-sm all']</div></div>
[/credform]

FORMS JAVASCRIPT:
( function( $ ) {
$( document ).ready( function(){

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

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

Are you able to help out here?

Many thanks
Bernhard

[Jamal]

Hello Bernhard and thank you for contacting Toolset support.

Well, there is no way to submit multiple forms at the same time. You can use a Javascript solution like the one you came up with. I don't know why does it save only one form, when it should save all the forms.

Maybe you can delay the submission of each form using a setTimeout(100ms) like:

( function( $ ) {
    $( document ).ready( function(){
        var i = 0;
        $(".wpt-form-submit").click( function( event ){
            var $this = this;
            setTimeout(function(){
                if ( event.hasOwnProperty("originalEvent") ){
                    $(".wpt-form-submit").not($this).click();
                }
            }, (i++) * 100);
        });
    });
})( jQuery );

Otherwise, you will need to build your own form inside the view, your own AJAX action that will handle the one form submission.

Let me know if the delaying solution works for you.

[bernhardK]

Many thanks, Jamal.

1.)
I went one step back and tried to submit all forms manually. When clicking very fast on all the submit buttons manually, not all forms were saved, even though Ajax wheel was spinning and confirmation message was shown. This does not seem right.
In console I see all the admin-ajax.php requests, all with success but only for some forms a post was created, which was the forms goal. (When I reload selected admin-ajax.php requests, the missing posts are created.)
Is this something you could look into? I could provide access to my instance.
If needed: PHP Version 7.4.13, memory_limit 4096M

2.)
So in general the delay option seems right as a workaround to solve this issue but also seems not very reliable at the same time.

I changed my script a bit to have a different button (id mybutton) submitting all the forms and included your delay.
When I click that button with id mybutton, all forms get submitted , but apparently all at the same time with no delay in between. I also tried to change 100ms to 1000ms. Nevertheless, again, all admin-ajax.php were a "success", but only some posts were created.

In total my view outputs 10 forms at the same time. When submitting one form, a post should be created.
This is how many times I have to clicked on the button with id mybutton, to really have all the forms submitted and created

1st try:
1st. click on button with id mybutton: 3 posts created
2nd. click: 2 posts created
3rd. click: 1 post created
4t. click: 1 post created
5th. click: 1 post created
6th. click: 1 post created
7th. click: 1 post created

2nd try:
1st. click on button with id mybutton: 5 posts created
2nd. click: 1 posts created
3rd. click: 2 post created
4th. click: 2 post created

Code used:
HTML:

<button id="mybutton">Submit all</button>

JS within the view:

( function( $ ) {
    $( document ).ready( function(){

        $("#mybutton").click( function( event ){
          	var i = 0;
          	setTimeout(function(){
                $(".btn-submit").click();
            }, (i++) * 100);
        });
   
    });
})( jQuery );

Not really that familiar with JS, would be great if you could look into 1) if it is a general issue and 2) if you could look into the code again to create a working solution in the meantime.

Many thanks
Bernhard

[Jamal]

Maybe the code I suggested is not correct. I should have suggested something like:

$(".wpt-form-submit").each(function(){
       // then the setTimeout code.
})

But, I have to test it to be sure.

Yes, please, allow me temporary access to your website and I'll look into (1) and (2). Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

I could not find out why only some posts were created when we try to submit all the forms at once. This will need proper debugging:
- Compatibility check.
- Server check.
- Maybe debugging a copy of the site in my local development environment.
- Etc.
We can debug it if you would like so. Let me know.

I also tried with custom code delayed for 100ms and then 200ms and it did not help create the 10 posts at once.

However, with a 1000ms delay, the 10 posts were created. This is the final code:

( function( $ ) {
    $( document ).ready( function(){

        $("#mybutton").click( function( event ){
            
          $("table .wpt-form-submit").each(function(i){
            var $this = this;
            setTimeout(function(){ $($this).click() }, i * 1000)
          });
          
        });
    
    });
})( jQuery );

Let me know if you would want us to debug why only some posts were created when submitting all the posts at once. If yes, please allow me to take a copy of your website and analyze it locally.

[bernhardK]

Hi Jamal,

the code works for me, thank you very much. Had to set it to 1500ms to make sure every post is created.
However, it would also be great, if there is an option to bypass the wait time mid-term. Therefore, you may take a copy and analyze it locally.

Many thanks for your support!
BR Bernhard

[Minesh]

Jamal is not available at the moment and let me step in here. I hope this is OK.

Glad to know that solution shared by Jamal helps you to resolve your issue. There is no other workaround and you are welcome to close the ticket.

[bernhardK]

My issue is resolved now. Thank you!