jquery keep checking if input is empty of not

Question

I want to check if the input is empty or not while the user is typing

this is my code

$('#visitID').on('change', function () {
        if ($('#visitID').val().length == 0) {
            $("#saveandclosebutton").hide();
        } else {
            $("#saveandclosebutton").show();
        }
    });

but the saveandclosebutton never becomes hidden even though if my input is empty.

try keypress/keyup events because now your code will fire only when the input loses its focus after changing the value — Arun P Johny
– Arun P Johny, Commented Mar 31, 2014 at 16:00

dsgriffin · Accepted Answer · 2014-03-31 16:21:59Z

3

You could include checking on keyup as well, e.g:

$('#visitID').on('change keyup', function () {
  this.value ? $("#saveandclosebutton").show() : $("#saveandclosebutton").hide();
});

jsFiddle here

Of course you'd need to set the button to be display:none initally, as your <input> would originally be empty.

#saveandclosebutton {
   display:none;
}

edited Mar 31, 2014 at 16:21

answered Mar 31, 2014 at 16:01

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

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

2 Comments

user2226785 Over a year ago

still the button is always shows. could you give an jidffl example ?

user2226785 Over a year ago

Thanks for your answer, but that guy has helped me first. I wish I could accept more than one answer, +1 to your efforts with me. you great

John S · Accepted Answer · 2014-03-31 16:13:40Z

1

Bind the event handler to both the keyup and change events, but you also want to cause the event handler to get executed when the page loads:

$('#visitID').on('keyup change', function() {
    $('#saveandclosebutton').toggle($(this).val().length > 0);
}).change();

jsfiddle

edited Mar 31, 2014 at 16:13

answered Mar 31, 2014 at 16:04

John S

21.5k9 gold badges50 silver badges59 bronze badges

2 Comments

user2226785 Over a year ago

The first code you provided was better except that it shows the button when the input is empty and hide the button when the input is fill. your code now is hide then show then hide then show with each new input

John S Over a year ago

@user2226785 - The issue was that the argument to the .toggle() method must be a boolean. I have edited my answer to fix the code.

akirk · Accepted Answer · 2014-03-31 16:00:27Z

1

I guess that the saveandclosebutton is called differently. Try first to see if the main logic is working at all:

$('#visitID').on('change keyup', function () {
      console.log($('#visitID').val().length);
});

and check if the console has any output at all. You can add the keyup as I did so that the check is done after each keypress.

answered Mar 31, 2014 at 16:00

akirk

6,8972 gold badges37 silver badges59 bronze badges

2 Comments

user2226785 Over a year ago

Do you imply that the script is not being called? I have 45 other scripts on that file and all are working. So, I guess the function is executed.

akirk Over a year ago

Well, no need to feel offended, it is the first step in debugging. Check if the function is called at all. You could also use the debugger; statement.

Tushar Gupta - curioustushar · Accepted Answer · 2014-03-31 15:59:56Z

0

Try .toggle( showOrHide )

$('#visitID').on('change keyup', function () {
    $("#saveandclosebutton").toggle(this.value.length == 0);
});

answered Mar 31, 2014 at 15:59

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

2 Comments

user2226785 Over a year ago

I tried your code, but nothing changes, Still the saveandclosebutton always appears

Tushar Gupta - curioustushar Over a year ago

@user2226785 can u make a fiddle .

Sasanka Panguluri · Accepted Answer · 2014-03-31 16:03:16Z

0

Try Keyup. Change it to:

$('#visitID').keyup(function () {
        var len = $('#visitID').val().length;
        if ( len == 0)
            $("#saveandclosebutton").hide();
        else
            $("#saveandclosebutton").show();
    });

answered Mar 31, 2014 at 16:03

Sasanka Panguluri

3,1484 gold badges35 silver badges54 bronze badges

Comments

Felix · Accepted Answer · 2014-03-31 16:04:48Z

0

Try to use .is() with :empty selector as well as using keyup event to have live update when you're typing text inside your input:

$('#visitID').on('change keyup', function () {
    if ($(this).is(':empty')) {
        $("#saveandclosebutton").hide();
    } else {
        $("#saveandclosebutton").show();
    }
});

edited Mar 31, 2014 at 16:04

answered Mar 31, 2014 at 15:59

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Collectives™ on Stack Overflow

jquery keep checking if input is empty of not

6 Answers 6

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related