How to trigger an onclick function in js only if input field is not empty?

Question

Here, I want the function to trigger only if i have typed something in the input field. If it's empty I want to alert that it can't be empty. I tried if else condition but it doesn't help. I even tried using typeof but no matter what the type is string.

const input  =  document.querySelector("#input");


function myFunc(){
let name = input.value;
if(name==null){
alert("PLEASE ENTER YOUR NAME")
} else{
alert('Hello'+' '+name);
}
};

<body>
 
  
  <input placeholder="Enter your name" id="input">
  <button id="btn" onclick="myFunc()">Click me!</button>
  
</body>

Emiel Zuurbier · Accepted Answer · 2020-12-06 18:59:12Z

2

input.value is not null when the input is empty, its just empty string.
try this:

const input = document.querySelector("#input");

function myFunc() {
  let name = input.value;
  if (name == "") {
    alert("PLEASE ENTER YOUR NAME")
  } else {
    alert('Hello' + ' ' + name);
  }
};

<body>
  <input placeholder="Enter your name" id="input">
  <button id="btn" onclick="myFunc()">Click me!</button>
</body>

edited Dec 6, 2020 at 18:59

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

answered Dec 6, 2020 at 18:57

ATP

3,2774 gold badges15 silver badges39 bronze badges

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

Comments

ControlAltDel · Accepted Answer · 2020-12-06 18:59:17Z

0

You have to check for empty string as well. In practice, you are never going to get a null value for input.value but it's not bad to program conservatively

function myFunc(){
let name = input.value;
if(name==null || name.length == 0){
alert("PLEASE ENTER YOUR NAME")
} else{
alert('Hello'+' '+name);
}
};

or you can take advantage of how awesomely Javascript implements the not (!) operator and just do:

function myFunc(){
let name = input.value;
if(!name){
alert("PLEASE ENTER YOUR NAME")
} else{
alert('Hello'+' '+name);
}
};

answered Dec 6, 2020 at 18:59

ControlAltDel

35.3k10 gold badges60 silver badges86 bronze badges

Comments

mplungjan · Accepted Answer · 2020-12-07 17:58:24Z

0

You need to test for empty/space and it is not recommended to have inline event handlers

document.getElementById("btn").addEventListener("click", function() {
  const input = document.getElementById("input");
  const name = input.value.trim();
  alert(name ? 'Hello ' + name : 'Please enter your name')
});

<input placeholder="Enter your name" id="input">
<button type="button" id="btn">Click me!</button>

answered Dec 7, 2020 at 17:58

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

How to trigger an onclick function in js only if input field is not empty?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related