CODEWITHSUNDEEP
javascripthtmlforms
Tech Hax
Tech Hax

Reputation: 303

How do I find out if a input element's value is blank (null)

I have following code to check if the inputs with the ids emailForm and nameForm are blank, this however isn't working when I test the form by leaving it blank.

 function setInfo() {
    if (document.getElementById("emailForm").value == null || 
    document.getElementById("nameForm").value == null) {

        alert("Please Fill in all sections");

    } else {

    email = document.getElementById("emailForm").value;
    name = document.getElementById("nameForm").value;
    loaded();

    }
}

Could someone help me with this, thanks!

Upvotes: 0

Views: 1558

Answers (5)

Saboor
Saboor

Reputation: 352

You should check whether the string is empty or not instead of null. Try using the code below:

function setInfo() {


var a=document.getElementById("emailForm").value;
var b=document.getElementById("nameForm").value;
if (a == "" || 
b == "") {

alert("Please Fill in all sections");

} else {

email = 
document.getElementById("emailForm").value;
name = 
document.getElementById("nameForm").value;
alert("success alert");

}
}

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 9923

Try below solution:

function setInfo() {

var email=document.getElementById("emailForm").value;
var name=document.getElementById("nameForm").value;

if (email=='' || email==null || name=='' || name== null ) { // OR if (!email || !name)

    alert("Please Fill in all sections");
    return;

  } else {
     loaded();
   }
}

Upvotes: 0

Anant Dabhi
Anant Dabhi

Reputation: 11104

Make sure you calling function setInfo()

function setInfo() {

    // You can check Value.Length also or 
    if (document.getElementById("emailForm").value === "" ||
        document.getElementById("nameForm").value === "") {

        alert("Please Fill in all sections");

    } else {

        email = document.getElementById("emailForm").value;
        name = document.getElementById("nameForm").value;

        loaded();
    }
}

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

You shouldn't be checking whether the fields are null, you should be checking whether they content is an empty string (with .value == '').

This can be seen working in the following:

function setInfo() {
  if (document.getElementById("emailForm").value == '' ||
    document.getElementById("nameForm").value == '') {
    console.log("Please fill in all sections");
  } else {
    email = document.getElementById("emailForm").value;
    name = document.getElementById("nameForm").value;
    //loaded();
    console.log("All sections filled in");
  }
}

const button = document.getElementById('go');
button.addEventListener('click', function() {
  setInfo();
});
<input id="emailForm" />
<input id="nameForm" />

<button id="go">Go</button>

Upvotes: 1

31piy
31piy

Reputation: 23859

Instead of checking for null specifically, you should check for falsy values. In some cases, the values for empty textboxes will be an empty string.

Replace this:

if (document.getElementById("emailForm").value == null || document.getElementById("nameForm").value == null) {

with this:

if (!document.getElementById("emailForm").value || !document.getElementById("nameForm").value) {

Upvotes: 1

Related Questions