Disable Submit Button after one click with validation?

Question

I have a form that is passing data to a cc processing terminal, as well as writing PDF contracts and receipts. There is validation built into the form, and I am trying to add a function to disable the submit button after one click provided validation is passed.

I don't know a lot about post data, but I want to make sure it:

1. Still posts the data. 2. Still validates. 3. Does not allow the user to submit multiple times.

Here is my POST chunk of code:

<form method="POST" action="partner_register_ihg.php" onSubmit="javascript:return WebForm_OnSubmit();"  id="docContainer" autoeventwireup="true" enctype="multipart/form-data" novalidate class="fb-toplabel fb-100-item-column fb-large selected-object" style="width: 800px;" data-form="preview">

And here is my submit section

<input type="submit" name="subbutton" onClick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("subbutton", "", true, "", "", false, false))' id="subbutton" class="fb-button-special" value="Submit" />

Here is a small section of my validation code

var RequiredFieldValidator30 = document.all ? document.all["RequiredFieldValidator30"] : document.getElementById("RequiredFieldValidator30");
RequiredFieldValidator30.controltovalidate = "item56_text_1";
RequiredFieldValidator30.errormessage = "Please enter the shipping zip code.";
RequiredFieldValidator30.display = "None";
RequiredFieldValidator30.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator30.initialvalue = "";
var RequiredFieldValidator31 = document.all ? document.all["RequiredFieldValidator31"] : document.getElementById("RequiredFieldValidator31");
RequiredFieldValidator31.controltovalidate = "item62_0_checkbox";
RequiredFieldValidator31.errormessage = "Please agree to Terms and Conditions.";
RequiredFieldValidator31.display = "None";
RequiredFieldValidator31.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator31.initialvalue = "";

var ValidationSummary1 = document.all ? document.all["ValidationSummary1"] : document.getElementById("ValidationSummary1");
ValidationSummary1.showmessagebox = "True";
ValidationSummary1.showsummary = "False";

Simply have `onclick='this.disabled = true; WebForm_DoPostBackWithOptions(...` — Shadow The GPT Wizard, Dec 19 '12 at 19:22
See also [Disable submit button on click after form validation](https://stackoverflow.com/questions/17525341/disable-submit-button-on-click-after-form-validation) or [Disable submit button on form submit](https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit) or [Simplest way to disable button on submission of a form?](https://stackoverflow.com/questions/15529836/simplest-way-to-disable-button-on-submission-of-a-form) — miken32, Jul 27 '22 at 19:08

score 6 · Answer 1 · edited Dec 19 '12 at 19:16

6

In your submit button code just add javascript code: <input type="submit" [...] id="btn1" onclick="setTimeout(disableFunction, 1);"> and in Javascript add function:

function disableFunction() {
    document.getElementById("btn1").disabled = 'true';
}

edited Dec 19 '12 at 19:16

Tmdean

9,108
43
51

answered Dec 19 '12 at 19:04

Disa

630
13
42

Thank you Disa, I'll give that a shot. I had tried a couple other solutions I had found, but I kept losing either validation or the actual disabling. – Jeremy Chambers Dec 19 '12 at 19:05
Ok, so I'm getting syntax error when I add it to my javascript in my should I not be putting it there? – Jeremy Chambers Dec 19 '12 at 19:10
1

Maybe you placed my function inside another. – Disa Dec 19 '12 at 19:11
Actually I put it in the head in it's own script tag – Jeremy Chambers Dec 19 '12 at 19:13
1

Ow, I am sorry, `function disableFunction() {` I forgot about `()` – Disa Dec 19 '12 at 19:15
I'll give that a shot. I wondered about () but I don't know enough about scripts yet. – Jeremy Chambers Dec 19 '12 at 19:16
Ok, got that to work, but now if validation fails the submit button is greyed out, and I have to reload the page and re-enter data. :( – Jeremy Chambers Dec 19 '12 at 19:24
1

Add function to re-activate button: `document.getElementById("btn1").disabled = 'false'; ` – Disa Dec 19 '12 at 19:25
Forgive me, but where would I add that too? And what would necessarily call that? – Jeremy Chambers Dec 19 '12 at 19:27
1

In function where you validate provided data. After you check the data and the result of check validaty function is false, add this code. – Disa Dec 19 '12 at 19:31
I just added to my question the last bit of the validation section. Can you show me where/how to put it in. When I add it, the submit button remains greyed out. – Jeremy Chambers Dec 19 '12 at 19:45
1

I am afraid that this part is not enough – Disa Dec 19 '12 at 19:48
Can I just email you the code for the page? I'm really sorry. I work for a charity, and am not a developer, but I am the only one who maintains our website. If not I understand. – Jeremy Chambers Dec 19 '12 at 19:51
1

I got it!! Had to add the function to my validation script. Fun times!! – Jeremy Chambers Dec 19 '12 at 22:13

Nitin kumar Dwivedi · Answer 2 · 2022-06-15T22:34:26.397

2

You can use if you are using jQuery form validator

$(document).ready(function () {
    $("#addOfficerForm").submit(function () {
        var total_error = document.querySelectorAll('.error').length;
        if(total_error === 0){
            document.getElementById("checkEditRestriction").disabled = 'true';
        }  
    });
});

edited Jun 15 '22 at 22:34

answered Dec 03 '19 at 10:06

Nitin kumar Dwivedi

29
5

score 0 · Answer 3 · answered Feb 08 '21 at 03:19

0

HTML :

<button type="button" id="btnSubmit"> Submit </button>

Jquery/js :

$('#btnSubmit').click(function(e){
 e.preventDefault();
 if(this.form.reportValidity()){
  $(this).prop('disabled',true);
  this.form.submit();
 }
});

answered Feb 08 '21 at 03:19

Hicham O-Sfh

731
10
12

Disable Submit Button after one click with validation?

3 Answers3

Linked

Related