Need to Disable Submit Button with AJAX Form

Will get this enhancement request filed so we can address it in a future release.

Thanks.

Ok thanks.

Here’s what I did for now in case anyone wants it…

constant-contact-forms/assets/js/ctct-plugin-frontend.js (Need to minify and update ctct-plugin-frontend.min.js after changes are made)

that.timeout = setTimeout(function () {
  $('#ctct-submitted').prop('disabled', true); // <--- Added
     $.post(
	ajaxurl,
	{
	  'action': 'ctct_process_form',
	  'data'  : $(form_id_selector + 'form').serialize(),
	},
	function (response) {
	  $('#ctct-submitted').prop('disabled', false); // <--- Added

	  // Make sure we got the 'status' attribut in our response
	  if (typeof( response.status ) !== 'undefined') {
          ......

In your css add:

#ctct-submitted:disabled {
  opacity: 0.3;
  cursor: wait;
}

Just to be certain, can you confirm that the javascript at the top of that compiled file isn’t running, regarding disabling the send button and everything?

It’d be line 8-15 for the unminified version.

I didn’t notice that code at first but just checked.

That code is running but it’s hard coded to re-enable the button after 3 seconds instead of when the response is actually received from the server. And there’s no css to indicate the button is disabled. So the user has no idea anything is happening and keeps clicking the submit button (triggering multiple ajax requests after 3 seconds) until multiple response messages are shown.

I think the better way to handle it is to disable right before the ajax request and re-enable when the response is received (like the code I put in above). And add some css to indicate it’s processing.

Not arguing by any means, just confirming what we have technically does something from what you can perceive, but could still be improved upon. Definitely taking your feedback into consideration ??

Oh I didn’t think you were arguing :). I just had skimmed past that code before.

The only way I could tell that code is doing anything is by setting a breakpoint (there’s nothing to indicate to the user that the form is being submitted). That’s why I suggested adding some styles to #ctct-submitted:disabled.

Sounds good.

Thanks for the feedback and suggestions.