CODEWITHSUNDEEP
javascripthtmlinputshow
Macchiato
Macchiato

Reputation: 260

If input field is empty show div

I'd like to show the div with id="showDiv", but only if the input field with id="textfield" is empty.

<form action="">
 <fieldset>
  <input type="text" id="textfield" value="">
 </fieldset>
</form>

<div id="showDiv" style="width:50px;height:50px;background-color:#6CF;"></div>

Anyone know a Javascript that can do this?

Upvotes: 3

Views: 12831

Answers (4)

Diomedes
Diomedes

Reputation: 658

This one works in Chrome and it's pure JavaScript.

HTML:

Enter Text: <input type="text" id="myInput" onkeyup="showColorBox()">

JavaScript:

<script>function showColorBox() {
var x = document.getElementById("myInput");  

var myDiv = document.getElementById("hiddenBox");
if (x.value != "")
{
    myDiv.style.display = "block";
} else {
    myDiv.style.display = "none";
}    
}
</script>

JSFiddle: https://jsfiddle.net/e39vou8s/1/

Upvotes: 0

Greg Oks
Greg Oks

Reputation: 2730

If (document.getElementById("textfield").value == "")
 document.GetElementByZid("showDiv").style.display = "inline"
Else
 document.GetElementByZid("showDiv").style.display = "none"

Upvotes: 0

Ivan Dyachenko
Ivan Dyachenko

Reputation: 1348

You can write:

$("#textfield").keyup(function(){
    if($(this).val()) {
        $("#showDiv").hide();
    } else {
        $("#showDiv").show();
    }

});​

Live example http://jsfiddle.net/Z5sjS/3/

Upvotes: 4

kushalbhaktajoshi
kushalbhaktajoshi

Reputation: 4688

Try this

<script type="text/javascript">
if(document.getElementById("textfield").value == ""){
document.getElementById("showDiv").style.display="block";
}
</script>

Check JSFiddle for the example

Upvotes: 4

Related Questions