Checking textbox if it's empty in Javascript

Question

I wrote a simple html file with a textbox and submit button, and it generates and document.write's a response dependant on what you submit. I want to have it generate a response saying to enter content if the box is empty. The textbox's id is chatinput, so I have the following the code in the beginning

    var chatinput_box=document.getElementById('chatinput');
    var chatinput=chatinput_box.value;

Then a have a conditional, although I can't get it to work correctly; I've tried

    if(chatinput==""){}
    if(chatinput.length=0){}
    if(chatinput=null){}

and others but none have worked correctly. Does anyone have another idea?

These won't work because you use the assignment operator: if(chatinput.length=0){} and if(chatinput=null){} — user2625787
– user2625787, Commented Nov 8, 2013 at 15:15
Since an empty string is falsy even if(chatinput) should work. Can you show some of your markup? Because there doesn't seem to be anything wrong with your code... (except the assignment operator as mentioned above) — Seimen
– Seimen, Commented Nov 8, 2013 at 15:17

score 19 · Accepted Answer · 2018-06-04 16:19:20Z

19

It should be this:

var chatinput = document.getElementById("chatinput").value;
if (chatinput == "" || chatinput.length == 0 || chatinput == null)
{
    // Invalid... Box is empty
}

Or shorthanded:

if (!document.getElementById("chatinput").value)
{
    // Invalid... Box is empty
}

The = assigns a value whereas == checks whether the values are equal.

edited Jun 4, 2018 at 16:19

answered Nov 8, 2013 at 15:17

user2742371

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

5 Comments

PlantTheIdea Over a year ago

you should really use strict comparison operators if you are trying to teach the difference between comparison and assignment operators. stackoverflow.com/questions/523643/…

Seimen Over a year ago

This could really be simplified to if(chatinput), it would even be recommendable imho.

Seimen Over a year ago

@Houssni And good you noticed to use interpolation for the correct logic ^^

Crismogram Over a year ago

I like the shorthanded version but is there any drawbacks? Is it really the same as the first?

user2742371 Over a year ago

@Crismogram Empty values are always falsely evaluated, so you can use the shorthand version without problems.

PlantTheIdea · Accepted Answer · 2013-11-08 15:22:43Z

3

Just offering an alternative, not trying to steal thunder ...

Create an isEmpty function to reuse on a variety of items.

function isEmpty(val){
    return ((val !== '') && (val !== undefined) && (val.length > 0) && (val !== null));
}

Then you can apply it to whatever element you want:

if(!isEmpty(chatinput)){
    // hooray its got a value!
}

Not exactly original, its the concept stolen from PHP, but it comes in handy a lot.

answered Nov 8, 2013 at 15:22

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

7 Comments

FastTrack Over a year ago

I like this since it's a reusable, simple function.

Zach Brantmeier Over a year ago

I didn't think of that, that's a great idea. It would help make code much shorter and more memorable in the future too.

PlantTheIdea Over a year ago

Yup, exactly. For stuff like this, reusability is king! :D

Seimen Over a year ago

This is overhead imo, a default text input value is falsy when it's an empty string, all these chained tests result in exactly the same as when just boolean testing against val directly.

Seimen Over a year ago

What does one have to do with the other? Sure you can write var myVar = undefined || null; but if(myVar) would still be false... The test just has to make sure the value is truthy, which is correct for everything other than exactly undefined, null, '' or length 0. Maybe I missed that, but the OP just wanted to make sure that the value is no empty not that it's not null (which would be covered with simple boolean testing anyway).

|

Collectives™ on Stack Overflow

Checking textbox if it's empty in Javascript

2 Answers 2

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related