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 Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

using onchange to display table cell

Status
Not open for further replies.
cat5ive

cat5ive

MIS
Joined
Dec 3, 2004
Messages
184
Location
US
Hi,

I have a table that have a drop down box. What I want to do is to display the 2 table cell next to the dropdown box only when the second item from the list being selected. I want to use the onchange event but don't know how. Can someone please show me how to do this? I'm new to jv script. Below is all I have.
Thank in advance
Code: 
<HEAD>

 <SCRIPT LANGUAGE=javascript>
<!--
function moreoption(party) {
 
}

//-->
</SCRIPT>

</HEAD>
<BODY>
<H1>Mycomputer pc Node</H1>
<table>
  <tr>
    <td><select name="party" onchange="moreoption(party)">
        <option value=" " selected> party </option>
        <option value="01">Client</option>
        <option value="02">Guess</option>
        <option value="03">Levi</option>   
        </select>
   </td>
   <td><input type="radio" name="SUMMARY" value="Y" checked>Summary</td>  
  <td><input type="radio" name="SUMMARY" value="N">Detail</td></TR> 
</table>
 
Sort by date Sort by votes
[tt]<html>
<head>
<script language="javascript">
<!--
function moreoption(party) {
var selobj=document.getElementsByName(party)[0];
//ie,ff,ns6+,op
var celem=document.getElementsByName("SUMMARY");
for (var i=0;i<celem.length;i++) {
//selectedIndex==1 for "2nd" option
celem.parentNode.style.visibility=(selobj.selectedIndex==1)?"visible":"hidden";
//if you don't want server to pick up the value when hidden
//celem.disabled=(selobj.selectedIndex==1);
}
}
window.onload=function() {moreoption("party")};
//-->
</script>
</head>
<body>
<h1>Mycomputer pc Node</h1>
<form>
<table>
<tr>
<td><select name="party" onchange="moreoption(this.name)">
<option value=" " selected> party </option>
<option value="01">Client</option>
<option value="02">Guess</option>
<option value="03">Levi</option>
</select>
</td>
<td><input type="radio" name="SUMMARY" value="Y" checked>Summary</td>
<td><input type="radio" name="SUMMARY" value="N">Detail</td></TR>
</table>
</form>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Amendment

The corresponding two commented lines should be read like this.
[tt]
//if you don't want server to pick up the value when hidden
//celem.disabled=(selobj.selectedIndex[red]![/red]=1);
[/tt]
 
Upvote 0 Downvote
It's work nicely. Thanks you very much, tsuji.
 
Upvote 0 Downvote
Hi,

One more question, why don't you put quotes around party in the getElementsByName as you did around "summary"? What's the different? Thanks
Code: 
var selobj=document.getElementsByName(party)[0];
var celem=document.getElementsByName("SUMMARY");
 
Upvote 0 Downvote
The apparent confusion is due to multiple factor.
[1] I want to keep your notation on the function as far as possible. In this sense, your original tag line is wrong there already that I did not bother to point out.
>[tt]<td><select name="party" onchange="moreoption([red]party[/red])">[/tt]
By itself, it should be read like this...
[tt]<td><select name="party" onchange="moreoption([red]'[/red]party[red]'[/red])">[/tt]
as you see in my window.onload line.
[2] A string variable named party is not the same as the string (here value of the attribute "name") "party". I had used this.name which is the value of the attribute and effectively it is "party". But, the function itself... The variable being passed to it is called party, which would not be the same as the string "party". It might be anything, like "isover", or "SUMMARY". If I do it, I would not put something too content-related name of the variable, but use some more generic severing any connotation from the contents of the page with only some language related connotation, like s say.
[tt]
function moreoption([blue]s[/blue]) {
var selobj=document.getElementsByName([blue]s[/blue])[0];
//ie,ff,ns6+,op
var celem=document.getElementsByName("SUMMARY");
//etc etc...
}
[/tt]
Some likes inflation more than I do and use unnecessarily longer variable name to look grand. It's your call.
 
Upvote 0 Downvote
Glad that I asked. Thank again, tsuji.
 
Upvote 0 Downvote
tsuji,

I have a question for you for the js code above. How would I modify this code to include a case statement. Meaning I want to be able to select more than one option to get the radio field. Ex. I want the radio field to show when I select 1, 5, and 9. This one will only let me chose one. Can you help?

Fred
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
912
coldbohemia
coldbohemia
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question Question
Dropdown (option) using Anguarjs
Replies
0
Views
827
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top