javascript thread: SV: RE: SV: Re: Show more input fields only when checkbox is check in a form
Robert,
I was unaware that it was non W3C compliant to reference ID'd elements by
other than the one way. I get amok with all the different ways to do one
thing - and then to find out that a particular way is acceptable and the
others aren't. Why are the unacceptable ways still around, then??
On a totally different subject:
I am using style sheets to set up some classes (e.g. border types,
background colors, etc.) When I issue a "window.print()" function or click
on the Print button, the pages only print out the text. If I use old
fashioned HTML loke: <table border=2 bgcolor = blue> then it will print the
border and color. How do you instruct the print mechanism to pass along
formatting when you use CSS classes?
Jerry
----- Original Message -----
From: "Robert Nyman" <robert.nyman@c...>
To: "javascript" <javascript@p...>
Sent: Sunday, October 27, 2002 2:24 PM
Subject: [javascript] SV: Re: SV: Re: Show more input fields only when
checkbox is check in a form
Jerry,
> NOTE: I don't use the "getElementById('ID_Name')." because all I do is
give the TRs an id name.
If I were you, I'd still use document.getElementById(objID) because that
is the way to correctly address an element by it's ID.
And even though this is for IE only for the moment, the day might come
when someone wants it, for example,
to work with Netscape 6+ or some other W3C compliant browser.
Of course it's up to you, but my advice is to code according to W3C
standards as often as possible.
But that's just my view on it! :-)
/Robert
-----Ursprungligt meddelande-----
Från: Jerry Scannell [mailto:JerryScannell@c...]
Skickat: den 27 oktober 2002 16:31
Till: javascript
Ämne: [javascript] Re: SV: Re: Show more input fields only when checkbox
is check in a form
Doods (and everyone else!)
Here it is:
NOTE: I don't use the "getElementById('ID_Name')." because all I do is
give the TRs an id name.
=======================================================================
<head>
<script language="javascript">
function checkPayType( form )
{
switch ( form.Pay_Type.selectedIndex )
{
case 0:
CheckNum.style.display = "none";
CreditCard.style.display = "none";
AccntNum.style.display = "none";
ExpDate.style.display = "none";
break;
case 1:
CheckNum.style.display = "block";
CreditCard.style.display = "none";
AccntNum.style.display = "none";
ExpDate.style.display = "none";
break;
case 2:
CheckNum.style.display = "none";
CreditCard.style.display = "block";
AccntNum.style.display = "block";
ExpDate.style.display = "block";
break;
}
return true;
}
</script>
<form name="getdata" method="post" action="yaddy.asp">
<table>
<tr><td width=250>Payment Method</td>
<td width=500><select name="Pay_Type" onClick = "checkPayType(
this.form )">
<option value = "Cash" >Cash
<option value = "Check" >Check
<option value = "Credit">Credit
</select></td></tr>
<tr id = "CheckNum" STYLE="display:none">
<td width=250>Check Number</td>
<td width=500><INPUT type = "text" name = "Check_Num" size = 7
maxlength = 7></td></tr>
<tr id = "CreditCard" STYLE="display:none">
<td width=250>Credit Card</td>
<td width=500><font size=2><select name="cc_Type" size="1">
<option value = "--- None ---" >--- None --- </option>
<option value = "Master Card" >Master Card </option>
<option value = "Visa" >Visa </option>
<option value = "Discover" >Discover </option>
<option value = "American Express" >American Express</option>
</select>
</td></tr>
<tr id = "AccntNum" STYLE="display:none">
<td width=250>Account Number</td>
<td width=500><input type="text" name="cc_Accnt"
size="20"></font></td></tr>
<tr id = "ExpDate" STYLE="display:none">
<td width=250>Expiration Month/Year</td>
<td width=500><font size=2><select name="cc_Month" size="1">
<option value = "01">01</option>
<option value = "02">02</option>
<option value = "03">03</option>
<option value = "04">04</option>
<option value = "05">05</option>
<option value = "06">06</option>
<option value = "07">07</option>
<option value = "08">08</option>
<option value = "09">09</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select>
<input type="text" name="cc_Year" size="4"></font></td></tr>
</table>
</form>
=======================================================================
Jerry
----- Original Message -----
From: "Doods Perea" <dindo.perea@a...>
To: "javascript" <javascript@p...>
Sent: Saturday, October 26, 2002 5:21 AM
Subject: [javascript] Re: SV: Re: Show more input fields only when
checkbox is check in a form
Hi Jerry,
Could you please post the complete code for your working script?
Thanks,
Doods
-----Original Message-----
From: Jerry Scannell [mailto:JerryScannell@c...]
Sent: Friday, October 25, 2002 9:16 PM
To: javascript
Subject: [javascript] Re: SV: Re: Show more input fields only when
checkbox is check in a form
Fellow developers,
The funny thing about all this is that I eventually got it to work but
NOT with <div>. I used to deal with the "visibility" style property of
<tr> to hide or show. The problem there, as this thread originally
pointed out, was the physical area of the screen didn't go away - it was
just blank.
Roy told me about using the "display = none" and "display = "block" in
<div> .. that didn't hide the <tr> so I use the display property of the
<tr> and it works great.
Write property - but the wrong element. \
thanks to all.
Jerry
----- Original Message -----
From: "Robert Nyman" <robert.nyman@c...>
To: "javascript" <javascript@p...>
Sent: Friday, October 25, 2002 2:11 PM
Subject: [javascript] SV: Re: Show more input fields only when checkbox
is check in a form
Nice. I'd rather write the function like this, though:
function test_PayType(rad) {
if(rad.checked){ document.getElementById("DIV_Check").style.display
(rad.value == "Check")? "block" : "none";
document.getElementById("DIV_Credit").style.display = (rad.value ==
"Credit")? "block" : "none"; } }
/Robert
-----Ursprungligt meddelande-----
Från: Joe Fawcett [mailto:joefawcett@h...]
Skickat: den 25 oktober 2002 18:27
Till: javascript
Ämne: [javascript] Re: Show more input fields only when checkbox is
check in a form
>From: "Jerry Scannell" <JerryScannell@c...>
>Reply-To: "javascript" <javascript@p...>
>To: "javascript" <javascript@p...>
>Subject: [javascript] Re: Show more input fields only when checkbox is
>check in a form
>Date: Fri, 25 Oct 2002 11:28:01 -0400
>
>Roy,
>
>I just tried this display idea and cannot seem to make the <tr>
>invisible. I've tried a couple of things. In the javascript routine
>tHere's the code:
>
><script language="javascript">
>
>function test_PayType( form )
>{
> if ( form.PAY_TYPE.value == "Cash" )
> {
> document.getElementById ( 'DIV_Check' ).style.display = 'none';
> document.getElementById ( 'DIV_Credit' ).style.display = 'none';
> }
>
> if ( form.PAY_TYPE.value == "Check" )
> {
> document.getElementById ( 'DIV_Check' ).style.display
'block';
> document.getElementById ( 'DIV_Credit' ).style.display = 'none';
> }
>
> if ( form.PAY_TYPE.value == "Credit" )
> {
> document.getElementById ( 'DIV_Check' ).style.display
'block';
> document.getElementById ( 'DIV_Credit' ).style.display
'block';
> }
>
> return true;
>}
>
></script>
>
><tr><td width=250>Payment Method</td>
> <td width=500><input type="radio" name="PAY_TYPE" value="Cash"
>onClick="test_PayType( this.form )">Cash
> <input type="radio" name="PAY_TYPE" value="Check"
>onClick="test_PayType( this.form )">Check
> <input type="radio" name="PAY_TYPE" value="Credit
>Card" onClick="test_PayType( this.form )">Credit Card </td></tr>
>
><div id = "DIV_Check>
><tr><td width=250>Check Number</td>
> <td width=500><INPUT type = "text" name = "Check_Num" size
6
>maxlength = 6 class = "Number_Input6" ></td></tr>
></div>
>
><div id = "DIV_Credit">
><tr><td width=250>Credit Card</td>
> <td width=500><font size=2><select name="cc_Type" size="1">
> <option value = "--- None ---" >--- None --- </option>
> <option value = "Master Card" >Master Card </option>
> <option value = "Visa" >Visa </option>
> <option value = "Discover" >Discover </option>
> <option value = "American Express" >American Express</option>
> </select>
> </td></tr>
></div>
>
This is because you're testing the wrong property, as well as
complicating matters with the div. The value of a radio button is fixed,
you need to check if it's checked. Change onclick argument from
this.form to this and then: function
test_PayType(rad) {
if (rad.checked)
{
switch (rad.value)
{
case "Cash":
document.getElementById('DIV_Credit').style.display = '';
document.getElementById('DIV_Check').style.display = 'none';
document.getElementById('DIV_Credit').style.display = 'none';
break;
case "Check":
document.getElementById('DIV_Credit').style.display = 'none';
document.getElementById('DIV_Check').style.display= '';
document.getElementById('DIV_Credit').style.display = 'none';
break;
case "Credit":
document.getElementById('DIV_Credit').style.display = 'none';
document.getElementById('DIV_Check').style.display = 'none';
document.getElementById('DIV_Credit').style.display = '';
break;
}
}
}
Joe
_________________________________________________________________
Get faster connections -- switch to MSN Internet Access!
http://resourcecenter.msn.com/access/plans/default.asp
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
View Cart
