CODEWITHSUNDEEP
javascripttextinputcolorsbackground
samyb8
samyb8

Reputation: 2598

Changing background color of text box input not working when empty

I am having a tough time with this javascript code to change the background color of a text input if the input is empty.

Here is the code:

function checkFilled() {
    var inputVal = document.getElementById("subEmail").value;
    if (inputVal == "") {
        inputVal.style.backgroundColor = "yellow";
                }
        }

Example: http://jsfiddle.net/2Xgfr/

I would expect the textbox to come out yellow at the beginning.

Upvotes: 23

Views: 199598

Answers (9)

Kurenai Kunai
Kurenai Kunai

Reputation: 1902

You can style it using javascript and css. Add the style to css and using javascript add/remove style using classlist property.

addRemoteImage = function(event) {
  var textbox = document.querySelector("input[name='input-image']"),
    imageUrl = textbox.value,
    errorDiv = document.querySelector("div[name='input-image-error']");
  if (imageUrl == "") {
    errorDiv.style.display = "block";
    textbox.classList.add('text-error');
    setTimeout(function() {
      errorDiv.style.removeProperty('display');
      textbox.classList.remove('text-error');
    }, 3000);
  } else {
    textbox.classList.remove('text-error');
  }
}
.no-image-url-error {
  color: red;
  display: none;
}

.text-error {
  border: 1px solid red !important;
}
<div class="div-image-background">
  <div class="div-image-text">
    <input class="input-image-url" type="text" placeholder="Add text" name="input-image">
    <input type="button" onclick="addRemoteImage(event);" value="Submit">
  </div>
  <div class="no-image-url-error" name="input-image-error">Textbox empty</div>
</div>

Upvotes: 0

mohan Prabhu
mohan Prabhu

Reputation: 1

// program to change color of txtbox if empty string submitted
function chgColor() {
  let x = document.getElementById("txt").value;
  if (x == "") {
    document.getElementById("txt").style.backgroundColor = "yellow";
  }
}
<input type="email" name="hi" value="hi" id="txt">
<button type="button" onclick="chgColor();">ok</button>

Upvotes: 0

user11178735
user11178735

Reputation:

You could have the CSS first style the textbox, then have js change it:

<input type="text" style="background-color: yellow;" id="subEmail" />

js:

function changeColor() {
  document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

DEMO --> http://jsfiddle.net/2Xgfr/829/

HTML

<input type="text" id="subEmail" onchange="checkFilled();">

JavaScript

 function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}

checkFilled();

Note: You were checking value and setting color to value which is not allowed, that's why it was giving you errors. try like the above.

Upvotes: 42

gaspyr
gaspyr

Reputation: 353

<! DOCTYPE html>
<html>
<head></head>
<body>

    <input type="text" id="subEmail">


    <script type="text/javascript">

        window.onload = function(){

        var subEmail = document.getElementById("subEmail");

        subEmail.onchange = function(){

            if(subEmail.value == "")
            {
                subEmail.style.backgroundColor = "red";
            }
            else
            {
               subEmail.style.backgroundColor = "yellow"; 
            }
        };

    };



    </script>

</body>

Upvotes: 2

Ankit Zalani
Ankit Zalani

Reputation: 3168

Try this:

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}

Upvotes: 3

dev2d
dev2d

Reputation: 4262

on body tag's onLoad try setting it like

document.getElementById("subEmail").style.backgroundColor = "yellow";

and after that on change of that input field check if some value is there, or paint it yellow like

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
            }
    }

Upvotes: 4

MrCode
MrCode

Reputation: 64536

You didn't call the function and you have other errors, should be:

function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
}
checkFilled();

Fiddle

You were setting inputVal to the string value of the input, but then you tried to set style.backgroundColor on it, which won't work because it's a string, not the element. I changed your variable to store the element object instead of its value.

Upvotes: 4

bugwheels94
bugwheels94

Reputation: 31950

Don't add styles to value of input so use like

function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }

Upvotes: 2

Related Questions