提交后禁用提交按钮

Question

I'm trying to disable the submit button after the user submits a form.

here is my js

$('.dDisable').click(function(){   
 var value = $('.chars').val();
 var chars = value.length;

 if (chars<10){
         $(".dDisable").submit(function(e){
            $('.chars').css('border','1px solid red');
            return false;
        });
     }
 else{
    $('.dDisable').one('submit', function() {
        $(this).find('input[type="submit"]').attr('disabled','disabled');
        $(this).css('opacity','0.5');
       });  
    } 
 });

For some reason when the user clicks on the submit button the textarea (.chars) gets a red border and then whole form (.dDisable) gets an opacity of 0.5

Here is http://jsfiddle.net/#&togetherjs=UlcR8bJwIM

for some reason it seems like working but the form doesn't get send.

Answer 1

If I am correct, you are trying to do some validation before submit.

The reason text box getting red border, following code is executed on clicking submit button

$(".dDisable").submit(function(e){
            $('.chars').css('border','1px solid red');
            return false;
        });

Since the above code is in "if" condition and getting passed, then your attempt to disable button is not working. Because your disable it in "else" part as follows,

else{
    $('.dDisable').one('submit', function() {
        $(this).find('input[type="submit"]').attr('disabled','disabled');
        $(this).css('opacity','0.5');
       });  
    } 
 }

Note: You have to refactor your code lot like, You have to write as $(this).attr('disabled','disabled'); instead of $(this).find('input[type="submit"]').attr('disabled','disabled');

Answer 2

Add this in submit event

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

or

HTML

<form method='post'>
    <button type='submit'>Send</button>
</form>

JavaScript

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});

You can see the difference b/w .attr() vs .prop()

Answer 3

Try this:

$(document).ready(function () {
     $(".submitBtn").click(function () {
        $('input[type="submit"]').prop('disabled',true);
         $('#yourFormId').submit();
        });
     });

or

$(document).ready(function () {
     $(".submitBtn").click(function () {
         $(".submitBtn").attr("disabled", true);
         $('#yourFormId').submit();
        });
     });