JavaScript - HIDE/DISPLAY text boxes

[dmiller23462]

Hi guys....I have absolutely NO IDEA what I'm doing with Javascript
but my end result is I need two text boxes to stay hidden until a
particular option is selected....I'v e cobbled together the JavaScript
in this code from a couple different sites but I'm not 100% sure what
each line is doing...This is the ASP code that I'm using for the
page....Take a look at the JavaScript code and please let me know what
each line is doing....I have been successful in hiding the two text
boxes in question ('ccnumber' and 'expdate') but can't display them
now....

Also, any good sites that you can direct me to so I can learn enough
to get by....I've tried a couple but they didn't explain too well...

*****START OF CODE*****

<!-- #INCLUDE VIRTUAL="/_borders/top_nav.asp" -->

<%
Mode = Request("mode")
CSRName = Request.Form("c srname")
CSRExt = Request.Form("c srext")
CSREmail = Request.Form("c sremail")
CustName = Request.Form("c ustname")
CustAddress = Request.Form("c ustaddress")
CityStateZip = Request.Form("c itystatezip")
CustPhone = Request.Form("c ustphonenbr")
EcomOrder = Request.Form("e comnumber")
CustExpect = Request.Form("c ustexpect")
GCNumber = Request.Form("g cnumber")
PIN = Request.Form("p in")
Reason = Request.Form("r eason")
Solution = Request.Form("s olution")
CCNumber = Request.Form("c cnumber")

'************** *************** *************** *************** *************** ***
'* FORM FOR DATA INPUT
*
'************** *************** *************** *************** *************** ***
Sub Form()
Response.Write "<p><font size='1'>Gift Card Redemption form is to be
used when a customer reports a Gift Card as lost or "
Response.Write " stolen, an order for a new Gift Card was lost in
transit, or the customer requests the balance on a "
Response.Write "gift card to be refunded by check.</font></p>"
Response.Write "<form method='POST' action='Gift_Ca rd_Redemption.a sp'
name='gcredeem' onSubmit='valid ate()'>"
Response.Write "&nbsp;<div align='left'>"
Response.Write "<table border='0' cellpadding='0' width='666'>"

Response.Write "<tr>"
Response.Write "<td width='153'>CSR 's Name :</td>"
Response.Write "<td width='503'><in put type='text' name='csrname'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153'>CSR 's Ext. :</td>"
Response.Write "<td width='503'><in put type='text' name='csrext'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153'>CSR 's Email :</td>"
Response.Write "<td width='503'><in put type='text' name='csremail'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153'>Cus tomer's Name :</td>"
Response.Write "<td width='503'><in put type='text' name='custname'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Cu stomer Address :</td>"
Response.Write "<td width='503'><in put type='text' name='custaddre ss'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Ci ty / State / Zip
:</td>"
Response.Write "<td width='503'>"
Response.Write "<input type='text' name='citystate zip' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Cu stomer Phone Number
:</td>"
Response.Write "<td width='503'>"
Response.Write "<input type='text' name='custphone nbr' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Ec ometry Order # :</td>"
Response.Write "<td width='503'>"
Response.Write "<input type='text' name='ecomnumbe r' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='253' valign='top'>Cu stomer's Expected
Dollar Amount :</td>"
Response.Write "<td width='503'>$"
Response.Write "<input type='text' name='custexpec t' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Gi ft Card # :</td>"
Response.Write "<td width='503'>"
Response.Write "<input type='text' name='gcnumber' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>PI N # </td>"
Response.Write "<td width='503'>"
Response.Write "<input type='text' name='pin' cols='43'
size='20'></textarea></td>"
Response.Write "</tr>"
Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>&n bsp;</td>"
Response.Write "<td width='503'>&nb sp;"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Re ason :</td>"
Response.Write "<td width='503'>"
Response.Write "<select size='1' name='reason'>"
Response.Write "<option selected>Choose From List</option>"
Response.Write "<option>Re deem GC Balance For Check Refund</option>"
Response.Write "<option>GC Was Lost Or Stolen</option>"
Response.Write "<option>GC Was Lost In Transit</option>"
Response.Write "</select>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>So lution :</td>"
Response.Write "<td width='503'>"
%>

<script type='javascrip t'>

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getEl ementById){retu rn
document.getEle mentById(name). style;}
else if (document.all){ return document.all[name].style;}
else if (document.layer s){return document.layers[name];}
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e){
if (value=='credit '){show('ccnumb er', 'expdate')}
else {hide('cc', 'exp')}
// else return;
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id){
var styleObj=getSty le(id);
styleObj.displa y='block';
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id){
var styleObj=getSty le(id);
styleObj.displa y='none';
}
</script>

<select name='solution' size='1' value=''
onchange='check Input(value)'>
<option value='none'>Ch oose 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>

<br>
<tr>
<td width='153' valign='top'><s pan id='cc' style="display: none;">
Credit Card Number</td>
<td width='503'><sp an id='ccnumber' style="display: none;">
<textarea cols='25' rows='1'>Fluffy bunnies suck</textarea>
<!--<input type='text' name='ccnumber' id='cc'>--></span>
<br>
<tr>
<td width='153' valign='top'><s pan id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><sp an id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

<%
Response.Write "<td width='503'>&nb sp;"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>&n bsp;</td>"
Response.Write "<td width='503'>&nb sp;</td>"
Response.Write "</tr>"
Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>&n bsp;</td>"
Response.Write "<td width='503'>"
Response.Write "<input type='submit' value='Send Message'
name='Send'></td>"
Response.Write "</tr>"
Response.Write "</table>"
Response.Write "</div>"
Response.Write "<input type='hidden' name='mode' value='Send'>"
Response.Write "</form>"
Response.Write" <p><a href='../default.asp'>Re turn to End User
Consumer Service</a></p>"
End Sub
'************** *************** *************** ******
'* EMAIL STATEMENT *
'************** *************** *************** ******
Sub Mail()
Set Mail = Server.CreateOb ject("Persits.M ailSender")
Mail.Host = "gwfs1" ' Specify a valid SMTP server
Mail.From = CSREmail ' Specify sender's address
Mail.FromName = CSREmail ' Specify sender's name
Mail.IsHTML = True
Mail.Subject = Reason

Dim mail_body

mail_body = "CSR's Name : " & CSRName & "<br>" &_
"CSR's Ext : " & CSRExt & "<br>" &_
"Customer Name : " & CustName & "<br>" &_
"Customer's Phone Number : " & CustPhone & "<br>" &_
"Customer's Address : " & CustAddress & "<br>" &_
"City / State / Zip : " & CityStateZip & "<br>" &_
"Ecometry Order # : " & EcomOrder & "<br>" &_
"Customer's Expected Dollar Amount : " & CustExpect & "<br>" &_
"Gift Card # : " & GCNumber & "<br>" &_
"PIN : " & PIN & "<br>" &_
"Reason : " & Reason & "<br>" &_
"Solution : " & Solution & "<br>" &_
"Credit Card Number : " & CCNumber & "<br>"

mail.body = mail_body & request.serverv ariables("REMOT E_ADDR")

On Error Resume Next
Mail.Send
If Err <> 0 Then
Response.Write "Error encountered: " & Err.Description
End If
End Sub
'************** *************** *************** *************** *************** ***

'************** *************** *************** *************** *************** ***
'* DATABASE APPENDING
*
'************** *************** *************** *************** *************** ***
Sub Database()
'create db connection
Set gcredemption = Server.CreateOb ject("ADODB.Con nection")

'open db in a DSN-less method
gcredemption.Op en "PROVIDER=MICRO SOFT.JET.OLEDB. 4.0;DATA SOURCE="&
Server.MapPath( "/jax/CS/eucs/Online_Forms/Secured_Archive s/eucs.mdb")

'correct syntax for INSERT statement "INSERT INTO
<tablename>(<fi eldname>) VALUES (<data>)"
stateSQL = "INSERT INTO gcredemption(cs r_name, csr_ext, cust_name,
address, city_state_zip, phone_number, ecom_order, expected,
giftcard_number , pin, reason, solution, cc_number) " &_
"VALUES ('" & Replace(CSRName ,"'","''") & "','" &
Replace(CSRExt, "'","''") & "','" & Replace(CustNam e,"'","''") & "','"
&_
Replace(CustAdd ress,"'","''") & "','" &
Replace(CitySta teZip,"'","''") & "','" & Replace(CustPho ne,"'","''") &
"','" &_
Replace(EcomOrd er,"'","''") & "','" & Replace(CustExp ect,"'","''")
& "','" & Replace(GCNumbe r,"'","''") & "','" &_
Replace(PIN,"'" ,"''") & "','" & Reason & "','" & Solution & "','" &
CCNumber & "')"

'display results of statement on screen for testing purposes
Response.Write( stateSQL)

'remind the SQL statement who it works for
gcredemption.Ex ecute(stateSQL)

'smack around the db connection until it lets go
gcredemption.Cl ose

'kill the connection with extreme prejudice
set gcredemption = nothing

End Sub
'************** *************** *************** *************** *************** ***

'************** *************** *************** *************** *************** ***
'* CONFIRMATION PAGE AFTER ENTERING DATA
*
'************** *************** *************** *************** *************** ***
Sub Confirm()
Response.Write "<h2><img border='0'
src='../../../images/success.jpg'></h2>"
Response.Write "<p>The following message has been successfully
submitted!</p>"
Response.Write "CSR's Name : <font color='#0000FF' >" & CSRName &
"</font><br>"
Response.Write "CSR's Ext. : <font color='#0000FF' >" & CSRExt &
"</font><br>"
Response.Write "Customer's Name : <font color='#0000FF' >" & CustName
& "</font><br>"
Response.Write "Customer Phone # : <font color='#0000FF' >" &
CustPhone & "</font><br>"
Response.Write "Customer's Address : <font color='#0000FF' >" &
CustAddress & "</font><br>"
Response.Write "City / State / Zip : <font color='#0000FF' >" &
CityStateZip & "</font><br>"
Response.Write "Ecometry Order # : <font color='#0000FF' >" &
EcomOrder & "</font><br>"
Response.Write "Customer's Expected Dollar Amount : <font
color='#0000FF' >" & CustExpect & "</font><br>"
Response.Write "Gift Card # : <font color='#0000FF' >" & GCNumber &
"</font><br>"
Response.Write "PIN : <font color='#0000FF' >" & PIN & "</font><br>"
Response.Write "Reason : <font color='#0000FF' >" & Reason &
"</font><br>"
Response.Write "Solution : <font color='#0000FF' >" & Solution &
"</font><br>"
Response.Write "Credit Card # : <font color='#0000FF' >" & CCNumber &
"<p>&nbsp;</p>"
Response.Write" <p><a href='../default.asp'>Re turn to End User
Consumer Service</a></p>"
End Sub
'************** *************** *************** *************** *************** ***

Response.Write "<title>Gif t Card Redemption</title>"

If Mode <> "Send" Then
Call Form
End If

If Mode = "Send" Then
' Call Validation
Call Database
Call Mail
End If

'If Validated_Form = True Then
' Call Mail
' Call FileAppend
' Call Database
' Call Confirm
'End If

%><!-- #INCLUDE VIRTUAL="/_borders/bottom_nav.asp" -->

*****END OF CODE*****

[kaeli]

In article <59************ *************@p osting.google.c om>, dmiller23462
@yahoo.com enlightened us with...

Hi guys....I have absolutely NO IDEA what I'm doing with Javascript
but my end result is I need two text boxes to stay hidden until a
particular option is selected....I'v e cobbled together the JavaScript
in this code from a couple different sites but I'm not 100% sure what
each line is doing...This is the ASP code that I'm using for the
page....Take a look at the JavaScript code and please let me know what
each line is doing....I have been successful in hiding the two text
boxes in question ('ccnumber' and 'expdate') but can't display them
now....

ASP has no place in the this group. It just takes up space. :)

What matters is the client-side javascript.
The best thing to do in this case is to view the sourc ein your browser and
post it. That way, we see what the browser sees. Since the browser never sees
ASP, it is completely OT here.

That said...
Response.Write "<p><font size='1'>Gift Card Redemption form is to be
used when a customer reports a Gift Card as lost or "
Response.Write " stolen, an order for a new Gift Card was lost in
transit, or the customer requests the balance on a "
You're overcomplicatin g your life. ;)

You can backslash escape newlines so you don't have to keep writing
Response.Write over and over and over...

Response.Write "yada yada yada " \
"more yada yada yada " \
"the end."

Well, at least I can in normal VB. Try it.
Response.Write "gift card to be refunded by check.</font></p>"
Response.Write "<form method='POST' action='Gift_Ca rd_Redemption.a sp'
name='gcredeem' onSubmit='valid ate()'>"
onSubmit = "return validate()"
There's no point to validation in onSubmit unless you do something based on
the return value, really. I assume validate returns true or false...I haven't
gotten that far into the code yet.
Response.Write "&nbsp;<div align='left'>"
Response.Write "<table border='0' cellpadding='0' width='666'>"
Have you discovered CSS yet?

<script type='javascrip t'> type="text/javascript"

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getEl ementById){retu rn
document.getEle mentById(name). style;}
else if (document.all){ return document.all[name].style;}
else if (document.layer s){return document.layers[name];}
You supporting netscape 4?
If not, drop the layers.

You should also provide something to do in the case NONE is true.
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e){
if (value=='credit '){show('ccnumb er', 'expdate')}
else {hide('cc', 'exp')}
Why is it that the show and the hide have different things in the quotes?
My guess is that your javascript problem is right here.
<tr>
<td width='153' valign='top'><s pan id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><sp an id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

<%
Response.Write "<td width='503'>&nb sp;"

Again a chain of Response.Write statements that don't need to be here.
It makes the code harder to read.
There's nothing in this block that prevents it from being pure html code. No
need for ASP here at all.

On Error Resume Next

EWWWWW.

Don't you have .net or something?
Try/catch is a beautiful thing.

Anyway, if you want further help, post a testable HTML page - not ASP. I
don't have ASP here. I can't run it. I can't do anything with it but look at
it and make fun of you. Copy and paste the source from the browser and we'll
see what we can do. :)
(Just kidding about making fun, now, don't get all offended or anything.
*LOL*)

HTH
--
--
~kaeli~
Synonym: the word you use in place of a word you can't
spell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[dmiller23462]

My deepest apologies for posting ASP code.... :-) The only section of
my form that is in HTML is the following fields....As I mentioned
before, the JavaScript is a copy-n-paste from a couple sites....The
only problem is that I haven't been able to figure out exactly what
each line of the script accomplishes... ..The bottom line is that when
the option "Credit to CC" is selected (via the HTML select), I want to
allow the user to input the CC information ('ccnumber' and 'expdate'
HTML text fields) but if the previous two options are chosen
('Replacement GC' or 'Check Refund') then I don't want these two
fields displayed.....H elp?!?!?

****START****
<tr><td width='153' valign='top'>So lution :</td><td width='503'>

<script type='javascrip t'>

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getEl ementById){retu rn
document.getEle mentById(name). style;}
else if (document.all){ return document.all[name].style;}
else if (document.layer s){return document.layers[name];}
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e){
if (value=='credit '){show('ccnumb er', 'expdate')}
else {hide('cc', 'exp')}
// else return;
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id){
var styleObj=getSty le(id);
styleObj.displa y='block';
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id){
var styleObj=getSty le(id);
styleObj.displa y='none';
}
</script>

<select name='solution' size='1' value=''
onchange='check Input(value)'>
<option value='none'>Ch oose 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>

<br>
<tr>
<td width='153' valign='top'><s pan id='cc' style="display: none;">
Credit Card Number</td>
<td width='503'><sp an id='ccnumber' style="display: none;">
<textarea cols='25' rows='1'></textarea>
<!--<input type='text' name='ccnumber' id='cc'>--></span>
<br>
<tr>
<td width='153' valign='top'><s pan id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><sp an id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp'></span> </span></span>

<td width='503'>&nb sp;<tr><td width='153' valign='top'>&n bsp;</td><td
width='503'>&nb sp;</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></table></div><input type='hidden' name='mode'
value='Send'>
</form><p><a href='../default.asp'>Re turn to End User Consumer
Service</a></p></td>
</tr>
</table>
*****END****
kaeli <ti******@NOSPA M.comcast.net> wrote in message news:<MP******* *************** **@nntp.lucent. com>...

In article <59************ *************@p osting.google.c om>, dmiller23462
@yahoo.com enlightened us with...

Hi guys....I have absolutely NO IDEA what I'm doing with Javascript
but my end result is I need two text boxes to stay hidden until a
particular option is selected....I'v e cobbled together the JavaScript
in this code from a couple different sites but I'm not 100% sure what
each line is doing...This is the ASP code that I'm using for the
page....Take a look at the JavaScript code and please let me know what
each line is doing....I have been successful in hiding the two text
boxes in question ('ccnumber' and 'expdate') but can't display them
now....

ASP has no place in the this group. It just takes up space. :)

What matters is the client-side javascript.
The best thing to do in this case is to view the sourc ein your browser and
post it. That way, we see what the browser sees. Since the browser never sees
ASP, it is completely OT here.

That said...

Response.Write "<p><font size='1'>Gift Card Redemption form is to be
used when a customer reports a Gift Card as lost or "
Response.Write " stolen, an order for a new Gift Card was lost in
transit, or the customer requests the balance on a "

You're overcomplicatin g your life. ;)

You can backslash escape newlines so you don't have to keep writing
Response.Write over and over and over...

Response.Write "yada yada yada " \
"more yada yada yada " \
"the end."

Well, at least I can in normal VB. Try it.

Response.Write "gift card to be refunded by check.</font></p>"
Response.Write "<form method='POST' action='Gift_Ca rd_Redemption.a sp'
name='gcredeem' onSubmit='valid ate()'>"

onSubmit = "return validate()"
There's no point to validation in onSubmit unless you do something based on
the return value, really. I assume validate returns true or false...I haven't
gotten that far into the code yet.

Response.Write "&nbsp;<div align='left'>"
Response.Write "<table border='0' cellpadding='0' width='666'>"

Have you discovered CSS yet?

<script type='javascrip t'>

type="text/javascript"

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getEl ementById){retu rn
document.getEle mentById(name). style;}
else if (document.all){ return document.all[name].style;}
else if (document.layer s){return document.layers[name];}

You supporting netscape 4?
If not, drop the layers.

You should also provide something to do in the case NONE is true.

}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(valu e){
if (value=='credit '){show('ccnumb er', 'expdate')}
else {hide('cc', 'exp')}

Why is it that the show and the hide have different things in the quotes?
My guess is that your javascript problem is right here.

<tr>
<td width='153' valign='top'><s pan id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><sp an id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

<%
Response.Write "<td width='503'>&nb sp;"

Again a chain of Response.Write statements that don't need to be here.
It makes the code harder to read.
There's nothing in this block that prevents it from being pure html code. No
need for ASP here at all.

On Error Resume Next

EWWWWW.

Don't you have .net or something?
Try/catch is a beautiful thing.

Anyway, if you want further help, post a testable HTML page - not ASP. I
don't have ASP here. I can't run it. I can't do anything with it but look at
it and make fun of you. Copy and paste the source from the browser and we'll
see what we can do. :)
(Just kidding about making fun, now, don't get all offended or anything.
*LOL*)

HTH
--

[kaeli]

In article <59************ **************@ posting.google. com>, dmiller23462
@yahoo.com enlightened us with...

My deepest apologies for posting ASP code.... :-) The only section of
my form that is in HTML is the following fields....As I mentioned
before, the JavaScript is a copy-n-paste from a couple sites....The
only problem is that I haven't been able to figure out exactly what
each line of the script accomplishes... ..The bottom line is that when
the option "Credit to CC" is selected (via the HTML select), I want to
allow the user to input the CC information ('ccnumber' and 'expdate'
HTML text fields) but if the previous two options are chosen
('Replacement GC' or 'Check Refund') then I don't want these two
fields displayed.....H elp?!?!?

Okay, for starters, if you copied and pasted, you've got invalid HTML. TD's
require </td> and TRs require </TR>. You also overcomplicated the heck out of
this. ;)
You also used IE-only syntax for the call to the function and were calling
show and hide with two arguments when they only take one. You had the names
of the elements all mucked up.

Here's my solution, tested in IE6, Opera 7.23, Netscape 7, and Firefox 1.0.
For some reason, IE sucks ass on this one and doesn't support table-row for
style, so we had to do a tiny workaround. See code.

Check this out and apply it as you like to your code. Watch for word-wrap.

<!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);
/* IE doesn't support table-row, but not using table-row mucks up
Mozilla/Netscape/Opera, so...*sigh*, we have to do this to work around it.
table-row is CSS-2 or something. */
if ((document.getE lementById && !document.all) || window.opera)
styleObj.displa y='table-row';
else
styleObj.displa y='inline';
}

//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~
Do not taunt Happy Fun Ball!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Richard Cornford]

kaeli wrote:
<snip>

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id)
{
var styleObj=getSty le(id);
/* IE doesn't support table-row, but not using table-row
mucks up Mozilla/Netscape/Opera, so...*sigh*, we have to do
this to work around it. table-row is CSS-2 or something. */

<snip>

While the differences in support described are real there is no need to
branch and assign different values (and it would be difficult to
determine good criteria for the branch test anyway). Instead assigning
an empty string removes the locally specified display:none; and allows
the browsers to revert to the default/inherited/cascaded value
regardless of what that value is on the browser in question (CSS display
property is not inherited anyway, but other properties have similar
behaviour when an empty string is assigned):-

if(styleObj){
styleObj.displa y = '';
}
Richard.

[kaeli]

In article <ck************ *******@news.de mon.co.uk>,
Ri*****@litotes .demon.co.uk enlightened us with...

While the differences in support described are real there is no need to
branch and assign different values (and it would be difficult to
determine good criteria for the branch test anyway). Instead assigning
an empty string removes the locally specified display:none; and allows
the browsers to revert to the default/inherited/cascaded value
regardless of what that value is on the browser in question (CSS display
property is not inherited anyway, but other properties have similar
behaviour when an empty string is assigned):-

if(styleObj){
styleObj.displa y = '';
}

One of the browsers had a problem with that. I don't remember which. The none
works fine.

The real issue was not the unassigning for the hide, but the assigning for
the show. IE didn't support table-row, but using block or inline mucked up
every other browser in how they displayed the table. The issue was discussed
here before, as I found the solution in the archives. :)

I'd love to know a better way to test if a browser supports
style.display:t able-row, but I couldn't find one.

--
--
~kaeli~
The Bible contains six admonishments to homosexuals and
three hundred sixty-two admonishments to heterosexuals.
That doesn't mean that God doesn't love heterosexuals. It's
just that they need more supervision.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Richard Cornford]

kaeli wrote:

Richard Cornford wrote: <snip>

if(styleObj){
styleObj.displa y = '';
}

One of the browsers had a problem with that. I don't
remember which. The none works fine.

I was proposing this for the row displaying code, not to hide the row.

<snip> I'd love to know a better way to test if a browser supports
style.display:t able-row, but I couldn't find one.

Where supported - getComputedStyl e - should be a way of finding out,
assuming you could test an element in its normal default state. It would
even be possible to fall-back to the - currentStyle - object on IE 5.0+,
and have a value that was closely related to the a value that the
browser understood in context. That would just leave deciding how to
default the setting on browsers that did not provide either mechanism.
Though that would be a heavyweight approach in comparison to assigning
an empty string.

Richard.

[kaeli]

In article <ck************ ******@news.dem on.co.uk>,
Ri*****@litotes .demon.co.uk enlightened us with...

kaeli wrote:

Richard Cornford wrote:

<snip>

if(styleObj){
styleObj.displa y = '';
}

One of the browsers had a problem with that. I don't
remember which. The none works fine.

I was proposing this for the row displaying code, not to hide the row.

I'm so confused.

How would clearing the display help show the row?

*cries*
--
--
~kaeli~
Shotgun wedding: A case of wife or death.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Lasse Reichstein Nielsen]

kaeli <ti******@NOSPA M.comcast.net> writes:

I'm so confused.

How would clearing the display help show the row?
Remember that the style object in DOM corresponds to the style
attribute in HTML. Properties set in the style attribute/object
has the highest precedence, so it overrules whatever is in a
style sheet or the default style of the element.

Clearing the "display" property of the style object will remove that
property, so it no longer has a high precedence property
assigned. That means that the computed (effective) value of that
property reverts to its normal value, which for display is not "none"
.... thereby making it visible.

The extra bonus here is that table rows should have
"display:ta ble-row", but IE doesn't understand that, and setting
"display:bl ock" will break the table in other, standards compliant,
browser. That means that there is no good value to assign, but the
*original* value is always correct, so merely removing the overriding
"display:no ne" will revert to something useful, no matter what it is.
*cries*

*comfort*
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

On Fri, 15 Oct 2004 12:50:27 -0500, kaeli <ti******@NOSPA M.comcast.net>
wrote:

[snip]

I'm so confused.

How would clearing the display help show the row?

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?

Mike
[1] Obviously it shouldn't as that would make the page script-dependent.
[2] Yes, it is block, not inline.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.