What am I doing wrong?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

killermookie@gmail.com - 29 Dec 2005 17:25 GMT

I'm not a javascripter so this is slightly unfamiliar to me. What I'm
trying to do is that if someone clicks the radio button for Other, then
the text input for other will become enabled.

What is wrong with this? Thank you!

<html>
<head>
<script language="JavaScript">

</script>
</head>

<body>

<form name="shipForm">
<input type="text" name="number" size="5">
<input type="radio" name="package"
onClick=Package(shipForm)>Pallet</span>
<input type="radio" name="package" onClick=Package(shipForm)>Box</span>
<input type="radio" name="package"
onClick=Package(shipForm)>Envelope</span>
<input type="radio" name="package"
onClick=Package(shipForm)>Other</span>
<input type="text" name="otherPackage" disabled>
</form>

</body>
</html>

Reply to this Message

killermookie@gmail.com - 29 Dec 2005 17:42 GMT

I figured it out. :) No need for a reply.

Reply to this Message

McKirahan - 29 Dec 2005 17:43 GMT

> I'm not a javascripter so this is slightly unfamiliar to me. What I'm
> trying to do is that if someone clicks the radio button for Other, then
[quoted text clipped - 35 lines]
> </body>
> </html>

Try this instead.

<html>
<head>
<title>Package.htm</title>
<script type="text/javascript">
function Package(thisform) {
if (thisform.package[3].checked) {
thisform.otherPackage.style.backgroundColor = "#FFFFFF";
thisform.otherPackage.disabled = false;
thisform.otherPackage.focus();
} else {
thisform.otherPackage.value = "";
thisform.otherPackage.style.backgroundColor = "#DDDDDD";
thisform.otherPackage.disabled = true;
}
}
</script>
</head>
<body>
<form name="shipForm">
<input type="text" name="number" size="5">
<input type="radio" name="package"
onClick="Package(shipForm)">Pallet
<input type="radio" name="package"
onClick="Package(shipForm)">Box
<input type="radio" name="package"
onClick="Package(shipForm)">Envelope
<input type="radio" name="package"
onClick="Package(shipForm)">Other
<input type="text" name="otherPackage"
disabled style="background-color: #DDDDDD">
</form>
</body>
</html>

Reply to this Message

killermookie@gmail.com - 29 Dec 2005 17:49 GMT

Thanks McKirahan. This is something I can learn from. :)

Reply to this Message

Thomas 'PointedEars' Lahn - 30 Dec 2005 07:46 GMT

> <html>
> <head>
> <title>Package.htm</title>

Not Valid. <URL:http://validator.w3.org/>

> <script type="text/javascript">
> function Package(thisform) {

Identifiers of methods not intended to be used as constructors should not
start with a capital letter, not even to work around a reserved word issue.

function _package(inp)
{

> if (thisform.package[3].checked) {

Should be

if (thisform.form.elements['package'][3].checked)

aso. `thisform' is a reference to the HTMLFormElement, but that should
not be passed with `shipForm' (it's IE-proprietary); instead, `this' should
be passed and the `form' property of the referenced event target object
should be used. Form controls should be referenced through the `elements'
collection when possible (as here).

> thisform.otherPackage.style.backgroundColor = "#FFFFFF";

<URL:http://www.w3.org/QA/Tips/color>

> thisform.otherPackage.disabled = false;
> thisform.otherPackage.focus();

<URL:http://pointedears.de/scripts/test/whatami#inference>

> } else {
> thisform.otherPackage.value = "";
> thisform.otherPackage.style.backgroundColor = "#DDDDDD";
> thisform.otherPackage.disabled = true;

Since `thisform.otherPackage' is used very often, it is prudent to assign
the reference to a variable and use the latter in place once it has been
established that it stores a valid reference:

var o = thisform.otherPackage;
if (o)
{
o.... = ...
}

or, if the recommendation above is followed:

var f, o;
if (inp
&& (f = inp.form)
&& (o = f.elements)
&& (o = o['otherPackage']))
{
var b = f.elements['package'][3].checked;
if (!b)
{
o.value = "";
}

o.style.backgroundColor = b ? '#fff' : '#ccc';
o.style.color = b ? '#000' : '#333';
o.disabled = b;

if (b && isMethodType(typeof o.focus))
{
o.focus();
}
}

> }
> }
> </script>
> </head>
> <body>
> <form name="shipForm">

Not Valid, the `action' attribute is missing.

> <input type="text" name="number" size="5">

type="text" is the default for `input' elements and can be safely omitted.

> <input type="radio" name="package"
> onClick="Package(shipForm)">Pallet
[quoted text clipped - 4 lines]
> <input type="radio" name="package"
> onClick="Package(shipForm)">Other

But then the `click' event bubbles by default and so could be better handled
at the parent `form' element:

function _package(f)
{
var o;
if (o = f.elements
&& (o = o['otherPackage']))
{
var b = f.elements['package'][3].checked;
if (!b)
{
o.value = "";
}

o.style.backgroundColor = b ? '#fff' : '#ccc';
o.style.color = b ? '#000' : '#333';
o.disabled = b;

if (b && isMethodType(typeof o.focus))
{
o.focus();
}
}
}

<form ... onclick="_package(this);">
<input type="radio" name="package" id="pkg_pallet" value="pallet"
><label for="pkg_pallet">Pallet</label><br>
<input type="radio" name="package" id="pkg_box" value="box"
><label for="pkg_box">Box</label><br>
<input type="radio" name="package" id="pkg_envelope" value="envelope"
><label for="pkg_envelope">Envelope</label><br>
<input type="radio" name="package" id="pkg_other" value="other"
><label for="pkg_other">Other</label><br>
...
</form>

> <input type="text" name="otherPackage"
> disabled style="background-color: #DDDDDD">

That color is not Truly Web-Safe[tm], and the foreground color should
be declared, too. See above.

Furthermore, the element should not be disabled by default but in the
`onload' event handler, because otherwise it becomes useless to users
without client-side script support:

<body onload="document.forms['shipForm'].elements['otherPackage'].disabled
= true;">
...
<form action="..." name="shipForm">
...
<input name="otherPackage" style="background-color:#ccc; color:#666">
...
</form>
...
</body>

PointedEars

Reply to this Message

Randy Webb - 30 Dec 2005 12:44 GMT

Thomas 'PointedEars' Lahn said the following on 12/30/2005 2:46 AM:

>><html>
>><head>
>><title>Package.htm</title>
>
> Not Valid. <URL:http://validator.w3.org/>

Irrelevant to the thread.

>><script type="text/javascript">
>>function Package(thisform) {
>
> Identifiers of methods not intended to be used as constructors should not
> start with a capital letter, not even to work around a reserved word issue.

Irrelevant to the thread.

> function _package(inp)
> {
[quoted text clipped - 4 lines]
>
> if (thisform.form.elements['package'][3].checked)

If thisform is a reference to the form itself then the reference back to
its form is redundant as you are already at the form level.

> aso. `thisform' is a reference to the HTMLFormElement, but that should
> not be passed with `shipForm' (it's IE-proprietary); instead, `this' should
[quoted text clipped - 5 lines]
>
> <URL:http://www.w3.org/QA/Tips/color>

Irrelevant to the thread.

>> thisform.otherPackage.disabled = false;
>> thisform.otherPackage.focus();
>
> <URL:http://pointedears.de/scripts/test/whatami#inference>

Irrelevant to the thread.

>> } else {
>> thisform.otherPackage.value = "";
[quoted text clipped - 4 lines]
> the reference to a variable and use the latter in place once it has been
> established that it stores a valid reference:

Irrelevant to the thread.

> var o = thisform.otherPackage;
> if (o)
[quoted text clipped - 34 lines]
>
> Not Valid, the `action' attribute is missing.

Irrelevant to the thread.

>><input type="text" name="number" size="5">
>
> type="text" is the default for `input' elements and can be safely omitted.

Irrelevant to the thread.

>><input type="radio" name="package"
>> onClick="Package(shipForm)">Pallet
[quoted text clipped - 7 lines]
> But then the `click' event bubbles by default and so could be better handled
> at the parent `form' element:

Irrelevant to the thread.

> function _package(f)
> {
[quoted text clipped - 36 lines]
> That color is not Truly Web-Safe[tm], and the foreground color should
> be declared, too. See above.

Irrelevant to the thread.

> Furthermore, the element should not be disabled by default but in the
> `onload' event handler, because otherwise it becomes useless to users
> without client-side script support:
>
> <body onload="document.forms['shipForm'].elements['otherPackage'].disabled
> = true;">

use window.onload, not <body onload

> ...
> <form action="..." name="shipForm">
[quoted text clipped - 6 lines]
>
> PointedEars

Signature

Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation

Reply to this Message

Michael Winter - 30 Dec 2005 15:34 GMT

[snip]

> Irrelevant to the thread.

And you've never posted something irrelevant to a thread? What about
others that have? I know you don't like Thomas, but come on, play nice.

[...]

> Answer:It destroys the order of the conversation

Didn't you forget the question?

Mike

Signature

Michael Winter
Prefix subject with [News] before replying by e-mail.

Reply to this Message

Randy Webb - 30 Dec 2005 17:44 GMT

Michael Winter said the following on 12/30/2005 10:34 AM:

> [snip]
>
>> Irrelevant to the thread.
>
> And you've never posted something irrelevant to a thread? What about
> others that have? I know you don't like Thomas, but come on, play nice.

Yes sir :)

> [...]
>
>> Answer:It destroys the order of the conversation
>
> Didn't you forget the question?

Or forgot to snip it all :)

Signature

Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Reply to this Message

Patient Guy - 30 Dec 2005 16:19 GMT

>> <html>
>> <head>
>> <title>Package.htm</title>
>
> Not Valid. <URL:http://validator.w3.org/>

Really?

The content for the TITLE element is parsed character data (#PCDATA), and
apparently can even include character references (character entity and
numeric character references). The HTML 4.01 specification refers the
reader to the ISO 8879 standard for a definitive reading of #PCDATA.

Cutting and pasting this HTML into the W3C validator and setting Doctype
for 4.01 Transitional, there was only one error making it invalid, which
was the missing 'action' attribute for the form element.

You must have caught the validator when it had a fever that day. ;-)

[excised rest of message]

> PointedEars

Reply to this Message

Thomas 'PointedEars' Lahn - 30 Dec 2005 17:26 GMT

> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote [...]:
>>> <html>
[quoted text clipped - 3 lines]
>
> Really?

Really.

> The content for the TITLE element is parsed character data (#PCDATA), and
> apparently can even include character references (character entity and
> numeric character references). [...]

I was not referring to the `title' element, but to all of the quoted code up
to this line which lacks the DOCTYPE declaration and lacks the character
set declaration for non-HTTP service. The snippet claims to be a HTML
document; it is not.

> Cutting and pasting this HTML into the W3C validator and setting Doctype

^^^^^^^^^^^^^^^

> for 4.01 Transitional,

^^^^^^^^^^^^^^^^^^^^^
See?

> there was only one error making it invalid, which was the missing 'action'
> attribute for the form element.

You have not validated the document through file upload which would have
revealed the missing character set declaration, too.

PointedEars

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / December 2005

What am I doing wrong?