Jquery if field is empty, on click of button disable it

Question

I have a input field with class "kind" and link/button with class "submit".

Now I wanna disable this "kind" input on click of button "submit" if there is no value in input, or if you wanna say, if input is empty...

I tried like this:

html:

<input class="kind" id="name" name="name" type="text" placeholder="Kind">

    <a href="#" class="submit" >Submit</a>

script:

$('.submit').click(function () {
    if ($('.kind').val().length != 0) {
        $('.kind').prop('disabled', true);
    }
});

but it does not work, and I don't know why, you can see here: http://jsfiddle.net/dzorz/UBy4x/

am I missing something? or should I define value check differently..

$('.kind').val().length == 0

蒋艾伦
– 蒋艾伦

2013-06-25 08:33:29 +00:00
Commented Jun 25, 2013 at 8:33 — 蒋艾伦
– 蒋艾伦, Commented Jun 25, 2013 at 8:33

dsgriffin · Accepted Answer · 2013-06-25 08:43:15Z

4

I believe you meant to use == instead of != in your conditional statement, if you wanted it to match an empty case.

Also, you should use $.trim to remove any whitespace, otherwise an empty input with spaces won't trigger match the conditional statement.

if ($.trim($('.kind').val()).length === 0){
  $('.kind').prop('disabled', true);
}

jsFiddle here.

edited Jun 25, 2013 at 8:43

answered Jun 25, 2013 at 8:33

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

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

2 Comments

dzordz Over a year ago

I think that this will fit my needs

dsgriffin Over a year ago

@dzordz No worries, remember to use $.trim like I mentioned, or an empty input with spaces will not disable the button :)

Atif · Accepted Answer · 2013-06-25 08:41:39Z

1

Why not simply use .val()

$('.submit').click(function () {
    if (!$('.kind').val()) {
        $('.kind').prop('disabled', true);
    }
});

Fiddle - http://jsfiddle.net/atif089/UBy4x/7/

edited Jun 25, 2013 at 8:41

answered Jun 25, 2013 at 8:34

Atif

10.9k22 gold badges68 silver badges97 bronze badges

2 Comments

Amit Over a year ago

It is not working. Try to enter some value in textbox then it is show as disable.

Atif Over a year ago

@Amit, you are right, I think I used a wrong method here. Updated my answer

Hanky Panky · Accepted Answer · 2013-06-25 08:33:07Z

0

Your if condition is inverse of what you want from it. You simply have to update your condition. It should be if that value ==0

$('.submit').click( function() {
    if ($('.kind').val().length == 0){
          $('.kind').prop('disabled', true);
    }

});

answered Jun 25, 2013 at 8:33

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

Comments

Kautil · Accepted Answer · 2013-06-25 08:33:32Z

0

try this,

$('.submit').click( function() {
    if ($('.kind').val().length < 1){
          $('.kind').prop('disabled', true);
    }

});

answered Jun 25, 2013 at 8:33

Kautil

1,3319 silver badges13 bronze badges

Comments

dsgriffin · Accepted Answer · 2013-06-25 09:01:25Z

0

You could try this:

$('.kind').attr('disabled', true);

edited Jun 25, 2013 at 9:01

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

answered Jun 25, 2013 at 8:35

Besher

5703 gold badges8 silver badges29 bronze badges

Collectives™ on Stack Overflow

Jquery if field is empty, on click of button disable it

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related