how to hide a text field in js?

Question

I want to hide the text field when I select from item2 from the list. Here is the relevant part of my code:

<div class="control-group"> <label class="control-label">Select Parent</label> <div class="controls"> <select name="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1"> <option value="0" >Select Parent</option> <?php $admin_sql=mysql_query("select * from admin_detail where parent_id='0' and role='2'"); while($Fetch_Admin=mysql_fetch_array($admin_sql)) { ?> <option value="<?php echo $Fetch_Admin['id']; ?>" onClick = "myFunction()" > <?php echo $Fetch_Admin['name'] ;?> </option> <?php } ?> </select> </div> </div> <div class="control-group"> <label class="control-label">Name</label> <div class="controls"> <input type="text" name="name" class="span6 m-wrap" placeholder="Name" required/> </div> </div> <div class="control-group"> <label class="control-label">Login ID</label> <div class="controls"> <input type="text" name="login" class="span6 m-wrap" placeholder="Login ID" required/> </div> </div> <div class="control-group"> <label class="control-label">Password</label> <div class="controls"> <input type="password" name="password" class="span6 m-wrap" placeholder="Password" required/> </div> </div> <div class="control-group" id="op1"> <label class="control-label" >Add Options</label> <div class="controls"> <input type="text" name="option1" class="span6 m-wrap" placeholder="Option1" required/> <input type="text" name="option2" class="span6 m-wrap" placeholder="Option2" required/> <input type="text" name="option3" class="span6 m-wrap" placeholder="Option3" required/> <input type="text" name="option4" class="span6 m-wrap" placeholder="Option4" required/> <input type="text" name="option5" class="span6 m-wrap" placeholder="Option5" required/> </div> </div>

The associated javascript function is:

<script> function myFunction() { document.getElementById("op1").style.visibility="hidden"; } </script>

I have also tried the same thing by using a button. When I apply the onClick function to the button it work properly. Can some one show me where I am going wrong or which function should I use for the list.

r3mainer · Accepted Answer · 2013-11-07 12:45:56Z

3

You've placed your event handler in an onclick attribute of an <option> element. This probably isn't going to work as intended. Instead, add an onchange event handler to its parent <select> element as follows:

<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">

answered Nov 7, 2013 at 12:45

r3mainer

24.8k3 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

R R Over a year ago

onclick should work when you will click on that particlular option in which it is declared .i cant see any reason for it to not working.

r3mainer Over a year ago

Suppose you navigate to the <select> element by pressing the tab key and use the up/down/enter keys to change its value. Would the onclick handler do anything then?

R R Over a year ago

that is an exception case but as a programmer we should be prepared for the worst case.so +1 for this point.

R R · Accepted Answer · 2013-11-07 12:38:51Z

1

 document.getElementById("op1").style.display="none";

answered Nov 7, 2013 at 12:38

R R

2,9562 gold badges27 silver badges43 bronze badges

Comments

Aashray · Accepted Answer · 2013-11-07 12:39:02Z

1

It should be:

document.getElementById("op1").style.display="none";

instead of:

document.getElementById("op1").style.visibility="hidden";

answered Nov 7, 2013 at 12:39

Aashray

2,76118 silver badges23 bronze badges

1 Comment

EvenStevens Over a year ago

Visibility hidden is a valid CSS attribute. It just makes the thing invisible but keeps its place in the layout.

melc · Accepted Answer · 2013-11-07 12:50:11Z

For a list like the one you have it is required to add the event handling on the select element.

 <select name="parent_id" id="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1" onchange="myFunction()"> <option value="0" >Select Parent</option> <option value="item2" > item2 </option> </select>

Then your js code could be like,

function myFunction() { if(document.getElementById("parent_id").value=="item2"){ document.getElementById("op1").style.visibility="hidden"; }else{ document.getElementById("op1").style.visibility="visible"; } }

Example, http://jsfiddle.net/5E8AH/

Also, the difference between display:block and visibility:hidden is that the latter will hide the content but still take the space as if it were visible.

Kuldeep Raj · Accepted Answer · 2013-11-07 12:42:48Z

Use this one:

document.getElementById("id").style.display = "none";

or

document.getElementById("id").style.visibility = "hidden";

Code Lღver · Accepted Answer · 2013-11-07 12:59:51Z

0

try this,

document.getElementById("op1").style.display="none";

edited Nov 7, 2013 at 12:59

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

answered Nov 7, 2013 at 12:40

zuber28

71 silver badge5 bronze badges

1 Comment

R R Over a year ago

javascript is case sensitive .please use proper camelcase

Collectives™ on Stack Overflow

how to hide a text field in js?

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Related