[Résolu] prevent user from clicking twice on the submiy button

[Auteur]

Publications

[nabils]

I have a CRED form which works fine, but if the user click twice or 3 times on the submit button, the post is created 2 or 3 times.
I tried:
add_filter('cred_form_validate', 'prevent_multiple_send_func',10,2);
function prevent_multiple_send_func($field_data, $form_data)
{
list($fields,$errors) = $field_data;
// validate if specific form
if ($form_data['id']==56)
{
$v = "something from somewhere";
if(!isset($_COOKIE["CRED_56"])){
setcookie("CRED_56", "something from somewhere", time()+15); /* expire in 15 seconds */
}
else{
$errors['post_title'] = 'Please do not multiple send';
}
}
return array($fields,$errors);
}

But no success. Any clue please? or any javascript to prevent the user from clicking more than once?
Regards
Nabil

[nabils]

By the way, I am running the latest versions of WordPress 4.2.4, Types 1.7.11 and Views 1.9.1

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

You can use following JavaScript for this purpose:

jQuery("form.cred-form").on("submit", function(e){
     jQuery("input.wpt-form-submit").attr("disabled", "disabled");
});

Please add this to your CRED Form's JS editor. Please let me know if I can help you with anything related.

[nabils]

Thanks Waqas but the suggested JS does not work, after ading the js code and when I press the submit button, the form is not even submitted (no post is created)

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

Can you please provide a link or access to the page where form is located? So I can take a look and find a solution. Since the same solution I applied on my local host and is working fine.

I have enabled your next reply as private, please input all details in that area. Please mention the links to the pages, views, forms, CPTs and configurations in question.

Please take a backup of your site, before proceeding.

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for providing the details. I was able to fix the issue.

I used following JS code for this purpose:

jQuery(document).ready(function($){
	$("form.cred-form").on("submit", function(e){
        if ($('form.cred-form').valid()) {
          $('input.wpt-form-submit').hide();
        } else {
          $("input.wpt-form-submit").show();
        }
	});
});

Please notice that the submit button is being hide when form is submitted. Because if we apply a readonly or disabled property, the form isn't submitted, probably form submission is also looking for that.

Anyhow, secondly, notice the .valid() method. Because form is using validation, so we can check if the whole form was validated successfully. In this case, form is submitted and we want to hide the submit button to prevent accidental submissions - otherwise, the button will be shown (if form has validation issues).

I hope this will fix your problem. As an idea, you can use a span or div to show when the button is hide, saying something like "Processing, please wait..." - just a thought 🙂

[nabils]

Dear Waqas
Thank you for your valuable help. Easy solution is always the best.

Regards
NS

[arisG]

Hello, I have the same issue:
when the user clicks 2 or 3 times on the submit button, the post is created 2 or 3 times.

I would like to disable the button instead of hiding it, but as mentioned above the form is not submitted any advice why is that happening???

I use the first code Waqas mentioned:

jQuery("form.cred-form").on("submit", function(e){
     jQuery("input.wpt-form-submit").attr("disabled", "disabled");
});