CODEWITHSUNDEEP
javascriptjquerycsshtml
Lucy
Lucy

Reputation: 1852

Make div hidden when no input is given

I am making a box using a div tag. User input will be taken from a prompt-box and will be displayed in a div tag of fixed dimensions. If no input has been given then the div will not be displayed at all.

However, when I do not enter anything in the prompt-box, the empty div is still displayed, even though I have specified an else condition in which its visibility is set to hidden.

I think the program is not entering the else condition of the if statement to set the visibility of the div as hidden.

JavaScript:

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  css//the js file..
        var person1;

        function getdata()
    {
         person1=prompt("Please enter your data 1","Sample 1",max="5");
             }

         function displayResult()
         {


         var table1=document.getElementById("table1");
         table1.innerHTML=person1;
         if(person1.value!="")
            {
              $("#table1").css({"border-color": "#000000", 
                                "border-width":"1px", 
                                "border-style":"solid",
                    "visibility" : "visible",
                    //"position" :"fixed",
                    //"resize":"both",
                    "overflow":"auto",
                    "width":"60px",
                    //"maxlength":"10",
                    "height": "80px",
                            "top": "30px",
                            "left" : "80px"});
           }
           else
           {
             alert("hello");
             ("#table1").css({"border-color": "#000000", 
                              "border-width":"0px", 
                              "border-style":"solid",
                  "visibility" : 'hidden',
                 //"position" :"fixed",
                  "resize":"both",
                   "overflow":"auto",
                   "width" :"60px",
                   "height" : "80px",
                   "top": "30px",
                           "left" : "80px"});
              }

            }

HTML:

           <body>
             <form>
               <div id="table1" width="1%" height="10%" style="visibility:hidden"></div>
             </form>

             <button type="button" id="button" onclick="getdata()">Insert data</button>
           </body>

here is jsfiddle

Upvotes: 3

Views: 1133

Answers (3)

Noel Walters
Noel Walters

Reputation: 1853

The test you need is:

(person1 != null && person1 != "")

if the user hits the cancel button in the prompt box then person1 will be null, otherwise it is a string.

in the case when person1 is null then trying to access person1.value will give a runtime error

in the case when person1 is a string person1.value will always be null because it has no such property. In which case:

(person1.value != "")

is equivalent to:

(null != "")

which is always true.

Upvotes: 0

Michael Besteck
Michael Besteck

Reputation: 2423

This is a modification of your code that handles empty input correctly. You specified width and height for the "unvisible" div so there is an "unvisible space" in that case. Modify the CSS definitions for your needs.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jQuery"></script>
<script type="text/javascript">
    $(function() {
    $("#table1").css({"visibility":"hidden", "width":"1%", "heigth":"10%"});
    $("#testButton").click(function() {
        displayResult();
    });
    });
    var person1;
    function getdata()
    {
    person1=prompt("Please enter your data 1","Sample 1",max="5");
    }
    function displayResult()
    {
    $("#table1").text(person1);
    if(person1.length)
    {
        $("#table1").css({"border-color": "#000000",
        "border-width":"1px",
        "border-style":"solid",
        "visibility" : "visible",
        //"position" :"fixed",
        //"resize":"both",
        "overflow":"auto",
        "width":"60px",
        //"maxlength":"10",
        "height": "80px"//,
//          "top": top1, // undefined
//          "left" : left1 // undefined
        });
    }
    else
    {
        alert("hello");
        ("#table1").css({"border-color": "#000000",
        "border-width":"0px",
        "border-style":"solid",
        "visibility" : 'hidden',
        //"position" :"fixed",
        "resize":"both",
        "overflow":"auto",
        "width" :"60px",
        "height" : "80px",
        "top": "30px",
        "left" : "80px"});
    }

        }
</script>
<style type="text/css">

</style>
</head>
<body>
<button id="testButton">displayResult</button>
<form>
        <div id="table1"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
</html>

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

Just replace this:

if(person1.value!="")

With this:

if(person1 != "")

and try again...

Upvotes: 0

Related Questions