34

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;   
});

});

akano1
  • 40,596
  • 19
  • 54
  • 67

6 Answers6

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.

Mythica
  • 1,112
  • 10
  • 19
  • As of jQuery 1.7, it is recommended to use ".prop()" and ".removeProp()" instead of attr. Otherwise, the answer remains perfect. – Rap Aug 18 '15 at 15:55
4
$('#submit_postcode').attr('disabled', 'disabled');
chown
  • 51,908
  • 16
  • 134
  • 170
David
  • 15,150
  • 15
  • 61
  • 83
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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
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");

    };

}
Phil C
  • 3,687
  • 4
  • 29
  • 51
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.

Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114
-3
//disable
$('#submit_postcode').attr('disabled', true);

//re-enable
$('#submit_postcode').removeAttr('disabled');
redsquare
  • 78,161
  • 20
  • 151
  • 159
  • Hi, is the code above to be replaced with $('form#post_code').submit(function() {} thanks – akano1 Aug 06 '09 at 09:39
  • 2
    disabled attribute should be set to 'disabled' not 'true' – David Aug 06 '09 at 09:40
  • 2
    One works because it is right. One works because the browser you are testing in compensates for the error. – Quentin Aug 06 '09 at 13:00
  • hmm. It works x-browser therefore it is not wrong and does not deserve a downvote – redsquare Aug 06 '09 at 13:01
  • 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'); – maddrag0n Sep 28 '12 at 10:57