CODEWITHSUNDEEP
phpjavascript
VKA
VKA

Reputation: 319

Hide and Show TextBox in Javascript

I am trying to hide and show box using following code. This work but box is displayed by default. Can I hide the box and only display on click? Currently onclick works to hide the box.

<script type="text/javascript">
function display(id) {
var obj = document.getElementById(id)
if (obj.style.display == "none") {
obj.style.display = "block"
    }
else {
    obj.style.display = "none"
    }
return false
}
</script>

 <form>
<input type="button" value="Customize" onclick="display('box1_<?=$pd_id?>')">
<input type="submit">
</form>

Upvotes: 1

Views: 13470

Answers (6)

soxfmr
soxfmr

Reputation: 58

Of course, you can use object.style.visibility="hidden" to do that.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253416

It is, of course, possible to do this without JavaScript (albeit the HTML becomes a little more complex, and relies upon support for the :checked pseudo-selector. Given the HTML:

<form>
    <label class="button" for="customize">Customize</label>
    <input type="checkbox" id="customize" />
    <input id="submit" />
</form>

And the CSS:

label.button {
    padding: 0.2em 0.4em;
    -webkit-appearance: button;
}

#customize {
    display: none;
}

#customize + #submit {
    display: none;
}

#customize:checked + #submit {
    display: inline-block;
}

JS Fiddle demo.

References:

Upvotes: 0

ntstha
ntstha

Reputation: 1173

You can use CSS, and add: <div id="your_box" style="display:none;"></div> initially it will be hidden and onclick() change the attribute to display:block

Upvotes: 0

Dory Zidon
Dory Zidon

Reputation: 10719

1) Sure just add a style or css class to the object.

<input type="button" style="display:none" value="Customize" onclick="display()">

2) Just exact the element from the event:

   function display(evnt) {
    var obj = evnt.target;
    obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else>
}

jsFiddle example working example (ignore the getDocument line and of course once it hidden you can't see it anymore..;)

http://jsfiddle.net/BRa9n/

Upvotes: 3

Hosea Kambonde
Hosea Kambonde

Reputation: 301

addthe following either in the stylesheet or inline styling 

style="display: none;"

Upvotes: 1

Rahul11
Rahul11

Reputation: 264

You can keep the box hidden with 'visibility: hidden' or 'display: none' and then onclik change the property to visibility = 'visible';

Upvotes: 0

Related Questions