JavaScript - HIDE/DISPLAY text boxes

D

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'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*****
 
K

kaeli

dmiller23462 said:
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....
Click to expand...

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 "
Click to expand...

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()'>"
Click to expand...

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'>"
Click to expand...

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];}
Click to expand...

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')}
Click to expand...

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;"
Click to expand...

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
Click to expand...

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
 
D

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.....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 said:
dmiller23462 said:
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....
Click to expand...

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 "
Click to expand...

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()'>"
Click to expand...

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'>"
Click to expand...

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];}
Click to expand...

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')}
Click to expand...

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;"
Click to expand...

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
Click to expand...

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
--
Click to expand...
 
K

kaeli

dmiller23462 said:
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?!?!?
Click to expand...

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>


--
 
R

Richard Cornford

kaeli wrote:
//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. */
Click to expand...
<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.
 
K

kaeli

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 = '';
}
Click to expand...

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
 
R

Richard Cornford

kaeli said:
Richard Cornford wrote:

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

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

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

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

Lasse Reichstein Nielsen

kaeli said:
I'm so confused.

How would clearing the display help show the row?
Click to expand...

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*
Click to expand...

*comfort*
/L
 
M

Michael Winter

[snip]
I'm so confused.

How would clearing the display help show the row?
Click to expand...

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

Michael Winter

[This might be double-posted. Apologies if that is the case.]

[snip]
I'm so confused.

How would clearing the display help show the row?
Click to expand...

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

kaeli

[email protected] said:
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?
Click to expand...

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
 
K

kaeli

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.
Click to expand...

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
 
M

Michael Winter

enlightened us with...
[snip]
Does that help?
Click to expand...

Not really.
Click to expand...

Reading it again, it can see why. :(

Sorry, it seemed a good explanation at the time.
But it works.
Click to expand...

Good. :)
Hey, it's Friday. My brain's dead.
Click to expand...

Don't worry. Mine's too.
Modified verion: I like this better. It's cleaner. And it works in the
browsers I tested in.
Click to expand...

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

!lurk

Agreed; this is too complicated.

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

dmiller23462

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
SendGrid email issue in responsive Gmail 1
Help with Visual Lightbox: Scripts 2
I need help fixing my website 2
Help with my responsive home page 2

Members online

Total: 41 (members: 1, guests: 40)
Robots: 229

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top