Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide DropDown

Status
Not open for further replies.
rekhatr10

rekhatr10

Programmer
Apr 2, 2004
67
0
0
US
Hi Everyone,

I have 2 dropdown box where one of the drop down box should be hidden when the a button is clicked. This is what I have so far
<TR>
<TD WIDTH="50%">Diagnosis4:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag4" size="1" ID= "cmbDiag4">
<option>A </Option>
<option>B </Option>
</SELECT>
WIDTH="50%">Diagnosis5:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag5" style= "visibility:hidden"size="1" ID= "cmbDiag5">
<option>C </Option>
<option>D </Option>
</SELECT>
<INPUT TYPE="button" NAME="btnSCode" VALUE="Search By Code" LANGUAGE=JAVASCRIPT onclick="btnSCode_onclick()">
function btnSCode_onclick(){
alert("This is atest") .
document.cmbDiag4.style.display = "hidden";
docuemnt.cmbDiag5.style.display = "Visible";
}
what am I missing? I can see the message popping up after that nothing happens. Please help
Thank youin advance
 
Sort by date Sort by votes
put your function in between your head tags, in between script tags, and comment them out. like this:

Code: 
<html>
<head>
  <title>...</title>
  <script type="text/javascript"><!--
  function btnSCode_onclick() {
    ...
  }
  //--></script>
</head>
<body>
...
</body>
</html>

[red]then get rid of the PERIOD after your alert statement. that should be a semicolon.[/red]

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
cLFlaVA

Still didn't work. Any other ides!!
 
Upvote 0 Downvote
You either have really incomplete code or you did not do well at cutting and pasting.
Code: 
<TR>
    <TD [COLOR=red]WIDTH="50%">[/color]Diagnosis4:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag4" size="1"  ID= "cmbDiag4"
  <option>A </Option>
  <option>B </Option>
</SELECT>
[COLOR=red]WIDTH="50%">[/color]Diagnosis5:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag5" style= "visibility:hidden"size="1"  ID= "cmbDiag5">
  <option>C </Option>
 <option>D </Option>
</SELECT>
<INPUT TYPE="button" NAME="btnSCode" VALUE="Search By Code" [COLOR=red]LANGUAGE=JAVASCRIPT[/color] onclick="btnSCode_onclick()">
[COLOR=red]function btnSCode_onclick(){
alert("This is  atest") .
document.cmbDiag4.style.display = "hidden";
[COLOR=red]docuemnt[/color].cmbDiag5.style.display = "Visible";
 }[/color]

First, your spacing is bad. In some places you double space between tags and in others you have no space at all.
Second, you have a width statment and closing tag for one of your table elements but the beginning half of that table element is missing.
Third, the language attribute belongs in your script tag but you do not have one. The entire function should be moved as cLFlaVA suggested inside the head tags.
Fourth, you have misspelled document.

There really is a lot going on to keep this from working.

Try this code.
Code: 
<html>
<head>
<script language="javascript">
function btnSCode_onclick(){
  alert("This is  atest");
  document.getElementById("cmbDiag4").style.visibility = "hidden";
  document.getElementById("cmbDiag5").style.visibility = "visible";
}

</script>

</head>
<body>

<table>

<TR>
    <TD WIDTH="50%">Diagnosis4:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag4" size="1"  ID= "cmbDiag4">
  <option>A </Option>
  <option>B </Option>
</SELECT>
Diagnosis5:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT NAME="cmbDiag5" style= "visibility:hidden" size="1"  ID="cmbDiag5">
  <option>C </Option>
 <option>D </Option>
</SELECT>
<INPUT TYPE="button" NAME="btnSCode" VALUE="Search By Code" onclick="btnSCode_onclick()">
</td>
</tr>
</table>

</body>
</html>

Note, that since you use an ID tag in your input fields you can use getElementById to alter the attributes of that element.

The problem with this setup though is that your text still exists though the input field is hidden. You could put everything in a DIV or SPAN tag including the text so that it hides as well, or you could toggle the readOnly or disabled properties for those fields so that they remain visible but cannot be selected.


Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
131
TheLazyPig
TheLazyPig
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
79
berkshirea
berkshirea
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
52
malibu65k
malibu65k
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
36
ChrisHirst
ChrisHirst
malibu65k
  • Locked
  • Question
Trying to use Javascript to hide/show several textboxes with checkbox onclick
Replies
2
Views
47
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top