how to disable submit button with jquery

Question

I have a simple form to check the value of post code entered by the user against a variable,

I'm trying to disable the submit button and do the check and give alert message, I can't figure out what I'm doing wrong, any help would be appreciated.

  <form id="post_code">
        <input name="textfield" type="text" id="postcode" size="14" maxlength="8" />
        <input type="image" id="submit_postcode" src="images/B_go.png" alt="Submit Postcode" width="59" height="24" border="0" />
  </form>


$(function() {

   $('form#post_code').submit(function() {

    var entered_post_code = $('form#post_code input#postcode').val();
    var post_code = "CV";
    if (entered_post_code == post_code) {
        alert("post code is ok");
        return true;
    }else {
        alert("post code is not ok");
        return true;
    }
    return false;   
});

});

stackoverflow.com/questions/1594952/…

manish nautiyal
– manish nautiyal

2012-12-19 09:05:01 +00:00
Commented Dec 19, 2012 at 9:05 — manish nautiyal
– manish nautiyal, Commented Dec 19, 2012 at 9:05

Mythica · Accepted Answer · 2009-08-06 13:21:35Z

74

The W3C recommends to set that attribute to disabled="disabled", so:

$('#submit_postcode').attr('disabled', 'disabled');

Re-enabling can be done by removing the attribute:

$('#submit_postcode').removeAttr('disabled');

Setting the attribute to any value causes it to be disabled, even .attr('disabled', 'false'), so it has to be removed.

edited Aug 6, 2009 at 13:21

answered Aug 6, 2009 at 9:40

Mythica

1,12210 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RapPayne Over a year ago

As of jQuery 1.7, it is recommended to use ".prop()" and ".removeProp()" instead of attr. Otherwise, the answer remains perfect.

chown · Accepted Answer · 2011-11-08 08:41:32Z

4

$('#submit_postcode').attr('disabled', 'disabled');

edited Nov 8, 2011 at 8:41

chown

52.9k17 gold badges138 silver badges170 bronze badges

answered Aug 6, 2009 at 9:39

David

15.4k15 gold badges64 silver badges84 bronze badges

Comments

Quentin · Accepted Answer · 2009-08-06 10:48:43Z

1

If the check matches you return true, and if it doesn't match … you also return true. The return false line is never reached.

You probably want to change one of your trues to false, and eliminate the line outside the if/else block.

answered Aug 6, 2009 at 10:48

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Phil Helix · Accepted Answer · 2011-04-30 12:45:28Z

1

This is the code I use to disable or re-enable a control:

function handleControlDisplay(className, foundCount, checked) {



    var button = jQuery(className);



    if (foundCount > 0 && foundCount == checked) {

        // enable

        button.removeAttr("disabled");

    }

    else {

        // set the disabled attribute

        button.attr("disabled", "true");

    };

}

answered Apr 30, 2011 at 12:45

Phil Helix

3,7314 gold badges32 silver badges52 bronze badges

Comments

Elzo Valugi · Accepted Answer · 2009-08-06 10:45:32Z

0

var entered_post_code = $('form#post_code input#postcode').val();
// rewrite as
var entered_post_code = $("#post_code input[id=postcode]").val();

You should return false if post code is not ok. no?

probably your if it never solves as true, and it returns as false always. The usage of submit() function is correct.

answered Aug 6, 2009 at 10:45

Elzo Valugi

28.1k16 gold badges97 silver badges115 bronze badges

Comments

redsquare · Accepted Answer · 2009-08-06 09:37:22Z

-3

//disable
$('#submit_postcode').attr('disabled', true);

//re-enable
$('#submit_postcode').removeAttr('disabled');

answered Aug 6, 2009 at 9:37

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

5 Comments

akano1 Over a year ago

Hi, is the code above to be replaced with $('form#post_code').submit(function() {} thanks

David Over a year ago

disabled attribute should be set to 'disabled' not 'true'

Quentin Over a year ago

One works because it is right. One works because the browser you are testing in compensates for the error.

redsquare Over a year ago

hmm. It works x-browser therefore it is not wrong and does not deserve a downvote

maddrag0n Over a year ago

some browsers will not permit using .prop() syntax in .attr() anymore. so whoever is reading this: use the right syntax. .prop('disabled', true) OR .attr('disabled', 'disabled');

Collectives™ on Stack Overflow

how to disable submit button with jquery

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

5 Comments

Linked

Related