RSVP multiple confirmation clicks code snippet causes problem for required field

[Andras]

We also had problems with multiple confirmations for RSVPs caused by double-clicking or multiple clicking before the form starts the submission process to the server. This is reported before here:

https://theeventscalendar.com/support/forums/topic/rsvp-multiple-confirmation-clicks/

Cliff presented a code snippet to solve this problem in that thread. We also use that code snippet, but found that it causes problems when required fields are present and the user does not enter values (text) or select any value (for radiobuttons and checkboxes). In this case the form is not submitted, an error message is shown to the user, but the button’s click event (added by the code snippet) is also in place preventing any further submissions.

We solved this and suggest that you update your code snippet like this:

/**
* Disable just the Submit button of the Event Tickets form after initial click to protect against sending data multiple times
* From: gist.github.com/cliffordp/8bceb54b440fbe9de1d42df6f231cc7a
* By Matt B.
* Updated 2017-01-13 for latest versions of ET/ET+
* Updated 2018-05-15 by AndLen Re-enable button after 2s delay to enable it after an error message.
**/
function tribe_snippet_prevent_multi_click_on_submit() {
wp_enqueue_script( 'jquery' );
?>
<script>
jQuery( function( $ ) {
var $button = $( '.tribe-events-tickets-rsvp button[name="tickets_process"]' );
$button.closest( 'form' ).on( 'submit', function( e ) {
$button.on( 'click', function() { return false; } );
// AndLen: Remove click handler (preventing further submissions) with 2 second delay after first click.
setTimeout(function(){$button.unbind('click');}, 2000);
} );
});
</script>
<?php
}
add_action( 'event_tickets_rsvp_before_confirmation_fields', 'tribe_snippet_prevent_multi_click_on_submit' );

The code adds a click handler to the submit button when the form is about to be submitted, preventing any more submissions when the button is clicked. Our addition removes this click handle after a 2 second delay to re-enable the button to allow submissions.

We have tested this and it now functions correctly also after error messages. The specified delay, 2000 milliseconds in this case, may be adjusted. We found this value to be good enough for our site.

[Andras]

Some characters in the code snippet are not presented correctly, but I hope the solution is clear enough.

[Victor]

Hi Andras!

Thanks so much for taking your time to share this so others can benefit from it.

I have tweaked the code in your reply so that it shows correctly. I will also make sure to pass this along to Cliff so he can check it out and update the gist.

Is there anything else I can help you with? Let me know about it.

Best,
Victor

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Cliff]

Andras, thanks so much for sharing your alterations and sorry for the delay getting back to you.

I took yours as inspiration and updated https://gist.github.com/cliffordp/8bceb54b440fbe9de1d42df6f231cc7a to work with all our ticket types.

Please try it out and create a follow-up ticket if there’s anything wrong with it.

[Author]

Posts