Re: JavaScript - HIDE/DISPLAY text boxes
In article <opsfxb9nr2x13k vk@atlantis>, M.Winter@blueyo nder.co.invalid
enlightened us with...[color=blue]
>
> Modifying the style object is equivalent to modifying the style attribute
> for that element. As the properties here are the most specific, they
> override any settings inherited from active stylesheets.
>
> Assuming that the stylesheet for the page doesn't hide the element in
> question[1], setting display = 'none' will override the browser's default
> value. Assigning display = '' deletes this inline style, so the browser
> will use it's own default. Modern browsers will use table-row, whilst IE
> uses block[2].
>
> In the code that you've shown, the "display: none" rule has been added
> directly to the row. As I said above, using script does exactly the same
> thing, so assigning an empty string to the display property will still
> have the same effect. If it was part of a stylesheet, this would be rather
> more complicated, but that situation should be avoided, anyway (again [1]).
>
> Does that help?
>[/color]
Not really. But it works.
Hey, it's Friday. My brain's dead.
Modified verion: I like this better. It's cleaner. And it works in the
browsers I tested in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type='text/javascript'>
//RETURNS THE STYLE OBJECT
function getStyle(name)
{
var s=null;
if (document.getEl ementById)
{
s = document.getEle mentById(name). style;
}
else if (document.all)
{
s = document.all[name].style;
}
else if (document.layer s)
{
s = document.layers[name];
}
return s;
}
//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e)
{
if (value=='credit ')
{
show('cc_number ');
show('expdate') ;
}
else
{
hide('cc_number ');
hide('expdate') ;
}
}
//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id)
{
var styleObj=getSty le(id);
styleObj.displa y='';
}
//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id)
{
var styleObj=getSty le(id);
styleObj.displa y='none';
}
</script>
</head>
<body>
<form name="f1">
<table border='1'>
<tbody>
<tr>
<!-- this row has the options in it -->
<td width='153' valign='top'>So lution:</td>
<td width='503'>
<select name='solution' onchange='check Input(this.opti ons
[this.selectedIn dex].value)'>
<option value='none' selected>Choose From List</option>
<option value='replace' >Replacement GC</option>
<option value='check'>C heck Refund</option>
<option value='credit'> Credit to Credit Card</option>
</select>
</td>
</tr>
<tr id="cc_number" style="display: none">
<!-- this row should only be displayed if a credit card is chosen from the
list -->
<td width='153' valign='top'>Cr edit Card Number</td>
<td width='503'><te xtarea cols='25' rows='1' name='cc'></textarea></td>
</tr>
<tr id="expdate" style="display: none">
<!-- this row should only be displayed if a credit card is chosen from the
list -->
<td width='153' valign='top'> Expiration Date</td>
<td width='503'><in put type='text' name='exp'></td>
</tr>
<tr>
<td width='153' valign='top'>&n bsp;</td>
<td width='503'><in put type='submit' value='Send Message' name='Send'>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
--
--
~kaeli~
I love God.
It's His fanclub that I can't stand.
In article <opsfxb9nr2x13k vk@atlantis>, M.Winter@blueyo nder.co.invalid
enlightened us with...[color=blue]
>
> Modifying the style object is equivalent to modifying the style attribute
> for that element. As the properties here are the most specific, they
> override any settings inherited from active stylesheets.
>
> Assuming that the stylesheet for the page doesn't hide the element in
> question[1], setting display = 'none' will override the browser's default
> value. Assigning display = '' deletes this inline style, so the browser
> will use it's own default. Modern browsers will use table-row, whilst IE
> uses block[2].
>
> In the code that you've shown, the "display: none" rule has been added
> directly to the row. As I said above, using script does exactly the same
> thing, so assigning an empty string to the display property will still
> have the same effect. If it was part of a stylesheet, this would be rather
> more complicated, but that situation should be avoided, anyway (again [1]).
>
> Does that help?
>[/color]
Not really. But it works.
Hey, it's Friday. My brain's dead.
Modified verion: I like this better. It's cleaner. And it works in the
browsers I tested in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type='text/javascript'>
//RETURNS THE STYLE OBJECT
function getStyle(name)
{
var s=null;
if (document.getEl ementById)
{
s = document.getEle mentById(name). style;
}
else if (document.all)
{
s = document.all[name].style;
}
else if (document.layer s)
{
s = document.layers[name];
}
return s;
}
//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e)
{
if (value=='credit ')
{
show('cc_number ');
show('expdate') ;
}
else
{
hide('cc_number ');
hide('expdate') ;
}
}
//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id)
{
var styleObj=getSty le(id);
styleObj.displa y='';
}
//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id)
{
var styleObj=getSty le(id);
styleObj.displa y='none';
}
</script>
</head>
<body>
<form name="f1">
<table border='1'>
<tbody>
<tr>
<!-- this row has the options in it -->
<td width='153' valign='top'>So lution:</td>
<td width='503'>
<select name='solution' onchange='check Input(this.opti ons
[this.selectedIn dex].value)'>
<option value='none' selected>Choose From List</option>
<option value='replace' >Replacement GC</option>
<option value='check'>C heck Refund</option>
<option value='credit'> Credit to Credit Card</option>
</select>
</td>
</tr>
<tr id="cc_number" style="display: none">
<!-- this row should only be displayed if a credit card is chosen from the
list -->
<td width='153' valign='top'>Cr edit Card Number</td>
<td width='503'><te xtarea cols='25' rows='1' name='cc'></textarea></td>
</tr>
<tr id="expdate" style="display: none">
<!-- this row should only be displayed if a credit card is chosen from the
list -->
<td width='153' valign='top'> Expiration Date</td>
<td width='503'><in put type='text' name='exp'></td>
</tr>
<tr>
<td width='153' valign='top'>&n bsp;</td>
<td width='503'><in put type='submit' value='Send Message' name='Send'>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
--
--
~kaeli~
I love God.
It's His fanclub that I can't stand.
Comment