What am I doing wrong?

K

killermookie

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">
<!--
function Package(thisform) {

if (thisform.package[3].checked) {
thisform.otherPackage.disabled = false
} else {
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</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>
 
M

McKirahan

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">
<!--
function Package(thisform) {

if (thisform.package[3].checked) {
thisform.otherPackage.disabled = false
} else {
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</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>
Click to expand...

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

Thomas 'PointedEars' Lahn

McKirahan said:
<html>
<head>
<title>Package.htm</title>
Click to expand...

Not Valid. said:
<script type="text/javascript">
function Package(thisform) {
Click to expand...

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

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

thisform.otherPackage.disabled = false;
thisform.otherPackage.focus();
Click to expand...

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

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

Not Valid, the `action' attribute is missing.
<input type="text" name="number" size="5">
Click to expand...

type="text" is the default for `input' elements and can be safely omitted.
<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
Click to expand...

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();
}
}
}

<label for="pkg_pallet">Pallet</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_box" value="box"
<label for="pkg_box">Box</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_envelope" value="envelope"
<label for="pkg_envelope">Envelope</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_other" value="other"
<label for="pkg_other">Other</label><br>
Click to expand...
...
<input type="text" name="otherPackage"
disabled style="background-color: #DDDDDD">
Click to expand...

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
 
R

Randy Webb

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




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

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

Irrelevant to the thread.
function _package(inp)
{

if (thisform.package[3].checked) {
Click to expand...


Should be

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

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




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

Irrelevant to the thread.
<URL:http://pointedears.de/scripts/test/whatami#inference>
Click to expand...

Irrelevant to the thread.
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:
Click to expand...

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


Not Valid, the `action' attribute is missing.
Click to expand...

Irrelevant to the thread.
type="text" is the default for `input' elements and can be safely omitted.
Click to expand...

Irrelevant to the thread.
But then the `click' event bubbles by default and so could be better handled
at the parent `form' element:
Click to expand...

Irrelevant to the thread.
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();
}
}
}

<label for="pkg_pallet">Pallet</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_box" value="box"
<label for="pkg_box">Box</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_envelope" value="envelope"
<label for="pkg_envelope">Envelope</label><br>
Click to expand...
<input type="radio" name="package" id="pkg_other" value="other"
<label for="pkg_other">Other</label><br>
Click to expand...
...
<input type="text" name="otherPackage"
disabled style="background-color: #DDDDDD">
Click to expand...


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

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

use window.onload, not <body onload
 
M

Michael Winter

On 30/12/2005 12:44, Randy Webb wrote:

[snip]
Irrelevant to the thread.
Click to expand...

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

Didn't you forget the question?

Mike
 
P

Patient Guy

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

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

Thomas 'PointedEars' Lahn

Patient said:
Thomas 'PointedEars' Lahn said:
Not Valid. <URL:http://validator.w3.org/>
Really?
Click to expand...

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

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

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


PointedEars
 
R

Randy Webb

Michael Winter said the following on 12/30/2005 10:34 AM:
On 30/12/2005 12:44, Randy Webb wrote:

[snip]
Irrelevant to the thread.
Click to expand...


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

Yes sir :)
Didn't you forget the question?
Click to expand...

Or forgot to snip it all :)
 

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

What "might" I be doing wrong with this snippet? 6
I dont get this. Please help me!! 2
Positioning CSS components 1
Uhhhhh, What can I do next? 6
Javascrip code wont run properly. 2
I need help making an html website 2
I am trying to detect Which image id="" was clicked ? 22
How can I arrange a series of radio buttons? 2

Members online

Total: 40 (members: 1, guests: 39)
Robots: 198

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,040
Latest member
papereejit

Latest Threads

Top