By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,680 Members | 1,475 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,680 IT Pros & Developers. It's quick & easy.

JavaScript - HIDE/DISPLAY text boxes

P: n/a
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've 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("csrname")
CSRExt = Request.Form("csrext")
CSREmail = Request.Form("csremail")
CustName = Request.Form("custname")
CustAddress = Request.Form("custaddress")
CityStateZip = Request.Form("citystatezip")
CustPhone = Request.Form("custphonenbr")
EcomOrder = Request.Form("ecomnumber")
CustExpect = Request.Form("custexpect")
GCNumber = Request.Form("gcnumber")
PIN = Request.Form("pin")
Reason = Request.Form("reason")
Solution = Request.Form("solution")
CCNumber = Request.Form("ccnumber")

'************************************************* ****************************
'* 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_Card_Redemption.asp'
name='gcredeem' onSubmit='validate()'>"
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'><input 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'><input 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'><input type='text' name='csremail'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153'>Customer's Name :</td>"
Response.Write "<td width='503'><input type='text' name='custname'
size='20'></td>"
Response.Write "</tr>"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Customer Address :</td>"
Response.Write "<td width='503'><input type='text' name='custaddress'
size='20'></td>"
Response.Write "</tr>"

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

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

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

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

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Gift 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'>PIN # </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'>&nbsp;</td>"
Response.Write "<td width='503'>&nbsp;"

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>Reason :</td>"
Response.Write "<td width='503'>"
Response.Write "<select size='1' name='reason'>"
Response.Write "<option selected>Choose From List</option>"
Response.Write "<option>Redeem 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'>Solution :</td>"
Response.Write "<td width='503'>"
%>

<script type='javascript'>

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getElementById){return
document.getElementById(name).style;}
else if (document.all){return document.all[name].style;}
else if (document.layers){return document.layers[name];}
}

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

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

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

<select name='solution' size='1' value=''
onchange='checkInput(value)'>
<option value='none'>Choose From List</option>
<option value='replace'>Replacement GC</option>
<option value='check'>Check Refund</option>
<option value='credit'>Credit to Credit Card</option>
</select>

<br>
<tr>
<td width='153' valign='top'><span id='cc' style="display: none;">
Credit Card Number</td>
<td width='503'><span 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'><span id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><span id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

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

Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>&nbsp;</td>"
Response.Write "<td width='503'>&nbsp;</td>"
Response.Write "</tr>"
Response.Write "<tr>"
Response.Write "<td width='153' valign='top'>&nbsp;</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'>Return to End User
Consumer Service</a></p>"
End Sub
'************************************************* *
'* EMAIL STATEMENT *
'************************************************* *
Sub Mail()
Set Mail = Server.CreateObject("Persits.MailSender")
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.servervariables("REMOTE_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.CreateObject("ADODB.Connection")

'open db in a DSN-less method
gcredemption.Open "PROVIDER=MICROSOFT.JET.OLEDB.4.0;DATA SOURCE="&
Server.MapPath("/jax/CS/eucs/Online_Forms/Secured_Archives/eucs.mdb")

'correct syntax for INSERT statement "INSERT INTO
<tablename>(<fieldname>) VALUES (<data>)"
stateSQL = "INSERT INTO gcredemption(csr_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(CustName,"'","''") & "','"
&_
Replace(CustAddress,"'","''") & "','" &
Replace(CityStateZip,"'","''") & "','" & Replace(CustPhone,"'","''") &
"','" &_
Replace(EcomOrder,"'","''") & "','" & Replace(CustExpect,"'","''")
& "','" & Replace(GCNumber,"'","''") & "','" &_
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.Execute(stateSQL)

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

'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'>Return to End User
Consumer Service</a></p>"
End Sub
'************************************************* ****************************

Response.Write "<title>Gift 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*****
Jul 23 '05 #1
Share this Question
Share on Google+
19 Replies


P: n/a
In article <59*************************@posting.google.com> , 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've 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 overcomplicating 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_Card_Redemption.asp'
name='gcredeem' onSubmit='validate()'>"
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='javascript'> type="text/javascript"

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getElementById){return
document.getElementById(name).style;}
else if (document.all){return document.all[name].style;}
else if (document.layers){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(value){
if (value=='credit'){show('ccnumber', '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'><span id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><span id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

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

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

Jul 23 '05 #2

P: n/a
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.....Help?!?!?

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

<script type='javascript'>

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getElementById){return
document.getElementById(name).style;}
else if (document.all){return document.all[name].style;}
else if (document.layers){return document.layers[name];}
}

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

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

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

<select name='solution' size='1' value=''
onchange='checkInput(value)'>
<option value='none'>Choose From List</option>
<option value='replace'>Replacement GC</option>
<option value='check'>Check Refund</option>
<option value='credit'>Credit to Credit Card</option>
</select>

<br>
<tr>
<td width='153' valign='top'><span id='cc' style="display: none;">
Credit Card Number</td>
<td width='503'><span 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'><span id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><span id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp'></span> </span></span>

<td width='503'>&nbsp;<tr><td width='153' valign='top'>&nbsp;</td><td
width='503'>&nbsp;</td></tr><tr><td width='153' valign='top'>&nbsp;
</td><td width='503'><input type='submit' value='Send Message'
name='Send'></td></tr></table></div><input type='hidden' name='mode'
value='Send'>
</form><p><a href='../default.asp'>Return to End User Consumer
Service</a></p></td>
</tr>
</table>
*****END****
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <59*************************@posting.google.com> , 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've 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 overcomplicating 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_Card_Redemption.asp'
name='gcredeem' onSubmit='validate()'>"


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='javascript'>

type="text/javascript"

//RETURNS THE STYLE OBJECT
function getStyle(name){
if (document.getElementById){return
document.getElementById(name).style;}
else if (document.all){return document.all[name].style;}
else if (document.layers){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(value){
if (value=='credit'){show('ccnumber', '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'><span id='exp' style="display: none;">
Expiration Date</td>
<td width='503'><span id='expdate' style="display: none;">
<input type='text' name='expdate' id='exp' size="20"></span>
</span></span>

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


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
--

Jul 23 '05 #3

P: n/a
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.....Help?!?!?


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.getElementById)
{
s = document.getElementById(name).style;
}
else if (document.all)
{
s = document.all[name].style;
}
else if (document.layers)
{
s = document.layers[name];
}
return s;
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(value)
{
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=getStyle(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.getElementById && !document.all) || window.opera)
styleObj.display='table-row';
else
styleObj.display='inline';
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id)
{
var styleObj=getStyle(id);
styleObj.display='none';
}
</script>
</head>

<body>
<form name="f1">
<table border='1'>
<tbody>
<tr>
<!-- this row has the options in it -->
<td width='153' valign='top'>Solution:</td>
<td width='503'>
<select name='solution' onchange='checkInput(this.options
[this.selectedIndex].value)'>
<option value='none' selected>Choose From List</option>
<option value='replace'>Replacement GC</option>
<option value='check'>Check 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'>Credit Card Number</td>
<td width='503'><textarea 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'><input type='text' name='exp'></td>
</tr>
<tr>
<td width='153' valign='top'>&nbsp;</td>
<td width='503'><input 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

Jul 23 '05 #4

P: n/a
kaeli wrote:
<snip>
//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO BLOCK
function show(id)
{
var styleObj=getStyle(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.display = '';
}
Richard.
Jul 23 '05 #5

P: n/a
In article <ck*******************@news.demon.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.display = '';
}


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:table-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

Jul 23 '05 #6

P: n/a
kaeli wrote:
Richard Cornford wrote: <snip>
if(styleObj){
styleObj.display = '';
}


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:table-row, but I couldn't find one.


Where supported - getComputedStyle - 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.
Jul 23 '05 #7

P: n/a
In article <ck******************@news.demon.co.uk>,
Ri*****@litotes.demon.co.uk enlightened us with...
kaeli wrote:
Richard Cornford wrote:

<snip>
if(styleObj){
styleObj.display = '';
}


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

Jul 23 '05 #8

P: n/a
kaeli <ti******@NOSPAM.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:table-row", but IE doesn't understand that, and setting
"display:block" 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:none" 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/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #9

P: n/a
On Fri, 15 Oct 2004 12:50:27 -0500, kaeli <ti******@NOSPAM.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.
Jul 23 '05 #10

P: n/a
[This might be double-posted. Apologies if that is the case.]

On Fri, 15 Oct 2004 12:50:27 -0500, kaeli <ti******@NOSPAM.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.
Jul 23 '05 #11

P: n/a
You are the greatest!!!! Thanks a ton....Appreciate the help....
Jul 23 '05 #12

P: n/a
kaeli wrote:
Richard Cornford wrote:
kaeli wrote: <snip>
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?


Lasse and Mike have already posted explanations so I won't repeat them.
*cries*


Now I feel guilty; sorry.

Richard.
Jul 23 '05 #13

P: n/a
In article <59**************************@posting.google.com >, dmiller23462
@yahoo.com enlightened us with...
You are the greatest!!!! Thanks a ton....Appreciate the help....


You're welcome.
And see my last response to Michael for a slightly cleaner version without
the table-row style.
(thanks michael)

--
--
~kaeli~
I love God.
It's His fanclub that I can't stand.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #14

P: n/a
In article <8y**********@hotpop.com>, lr*@hotpop.com enlightened us with...
kaeli <ti******@NOSPAM.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:table-row", but IE doesn't understand that, and setting
"display:block" will break the table in other, standards compliant,
browser.


I found that one out about block, but didn't know why.
Thanks.
I just changed it to inline and it did fine.
I like not assigning it at all better, even if it's taking me a bit to wrap
my head around the why it works part. The less I have to piss about with
browser-dependent stuff, the better.

Thanks!!

--
--
~kaeli~
I love God.
It's His fanclub that I can't stand.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #15

P: n/a
In article <opsfxb9nr2x13kvk@atlantis>, M.******@blueyonder.co.invalid
enlightened us with...

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?


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.getElementById)
{
s = document.getElementById(name).style;
}
else if (document.all)
{
s = document.all[name].style;
}
else if (document.layers)
{
s = document.layers[name];
}
return s;
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(value)
{
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=getStyle(id);
styleObj.display='';
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id)
{
var styleObj=getStyle(id);
styleObj.display='none';
}
</script>
</head>

<body>
<form name="f1">
<table border='1'>
<tbody>
<tr>
<!-- this row has the options in it -->
<td width='153' valign='top'>Solution:</td>
<td width='503'>
<select name='solution' onchange='checkInput(this.options
[this.selectedIndex].value)'>
<option value='none' selected>Choose From List</option>
<option value='replace'>Replacement GC</option>
<option value='check'>Check 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'>Credit Card Number</td>
<td width='503'><textarea 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'><input type='text' name='exp'></td>
</tr>
<tr>
<td width='153' valign='top'>&nbsp;</td>
<td width='503'><input 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.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #16

P: n/a
On Fri, 15 Oct 2004 14:56:06 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:
In article <opsfxb9nr2x13kvk@atlantis>, M.******@blueyonder.co.invalid
enlightened us with...
[snip]
Does that help?


Not really.


Reading it again, it can see why. :(

Sorry, it seemed a good explanation at the time.
But it works.
Good. :)
Hey, it's Friday. My brain's dead.
Don't worry. Mine's too.
Modified verion: I like this better. It's cleaner. And it works in the
browsers I tested in.


I'm tempted to suggest a few minor optimisations, but I've already been
(rightfully) accused of being pedantic today so I'll watch Battlestar
Galactica instead. :)

Mike
Again, my apologies for my previous double-post. I blame Opera...

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #17

P: n/a
On Fri, 15 Oct 2004 14:56:47 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:

[snip]
(thanks michael)


I sign, Mike, for a reason. :P

Michael's too formal.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #18

P: n/a
Agreed; this is too complicated.

Just change the style display properties of your show/hide element
onchange.

Jul 23 '05 #19

P: n/a
UPDATE!!!! I've noticed that this only works "once" and then not
again....I tried to clear out my cache and get rid of all temp files
and then try again but no luck....The only time it worked again was
when I saved a 2nd version of the file and then went to THAT file in
the URL bar....Help?
*****
This is the code that is in my "<head>" section...
<script type='text/javascript'>
//RETURNS THE STYLE OBJECT
function getStyle(name)
{
var s=null;
if (document.getElementById)
{
s = document.getElementById(name).style;
}
else if (document.all)
{
s = document.all[name].style;
}
else if (document.layers)
{
s = document.layers[name];
}
return s;
}

//HANDLES THE CHANGE IN SELECT BOX
function checkInput(value)
{
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=getStyle(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.getElementById && !document.all) || window.opera)
styleObj.display='table-row';
else
styleObj.display='inline';
}

//CHANGES THE DISPLAY PROPERTY OF ELEMENT 'ID' TO NONE
function hide(id)
{
var styleObj=getStyle(id);
styleObj.display='none';
}
</script>
</head>
*****
This is the code that is actually in the body of the code
<tr>
<!-- this row has the options in it -->
<td width='153' valign='top'>Solution:</td>
<td width='503'>
<select name='solution' onchange='checkInput(this.options
[this.selectedIndex].value)'>
<option value='none' selected>Choose From List</option>
<option value='Replace'>Replacement GC</option>
<option value='Check'>Check 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'>Credit Card Number</td>
<td width='503'><input type='text' name='ccnumber'
size="20"></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'><input type='text' name='exp'></td>
</tr>
<tr>
<td width='153' valign='top'>&nbsp;</td>
<td width='503'><input type='submit' value='Send Message'
name='Send'>
</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'>
<select size='1' name='expmonth'>
<option selected>Month</option>
<option value='Jan'>Jan</option>
<option value='Feb'>Feb</option>
<option value='Mar'>Mar</option>
<option value='Apr'>Apr</option>
<option value='May'>May</option>
<option value='Jun'>Jun</option>
<option value='Jul'>Jul</option>
<option value='Aug'>Aug</option>
<option value='Sep'>Sep</option>
<option value='Oct'>Oct</option>
<option value='Nov'>Nov</option>
<option value='Dec'>Dec</option>
</select>
<select size='1' name='expyear'>
<option selected>Year</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
<option value='2006'>2006</option>
<option value='2007'>2007</option>
<option value='2008'>2008</option>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
</select></td>
</tr>
Jul 23 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.