What am I doing wrong?

Discussion in 'Javascript' started by killermookie@gmail.com, Dec 29, 2005.

  1. Guest

    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>
     
    , Dec 29, 2005
    #1
    1. Advertising

  2. Guest

    I figured it out. :) No need for a reply.
     
    , Dec 29, 2005
    #2
    1. Advertising

  3. McKirahan Guest

    <> wrote in message
    news:...
    > 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>
    >


    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>
     
    McKirahan, Dec 29, 2005
    #3
  4. Guest

    Thanks McKirahan. This is something I can learn from. :)
     
    , Dec 29, 2005
    #4
  5. McKirahan wrote:

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


    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
     
    Thomas 'PointedEars' Lahn, Dec 30, 2005
    #5
  6. Randy Webb Guest

    Thomas 'PointedEars' Lahn said the following on 12/30/2005 2:46 AM:
    > McKirahan wrote:
    >
    >
    >><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)
    > {
    >
    >
    >> if (thisform.package[3].checked) {

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


    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 = "";
    >> 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:


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

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

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


    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">
    > ...
    > <input name="otherPackage" style="background-color:#ccc; color:#666">
    > ...
    > </form>
    > ...
    > </body>
    >
    >
    > PointedEars



    --
    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
     
    Randy Webb, Dec 30, 2005
    #6
  7. On 30/12/2005 12:44, Randy Webb wrote:

    [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

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
     
    Michael Winter, Dec 30, 2005
    #7
  8. Patient Guy Guest

    Thomas 'PointedEars' Lahn <> wrote in
    news::

    > McKirahan wrote:
    >
    >> <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
     
    Patient Guy, Dec 30, 2005
    #8
  9. Patient Guy wrote:

    > Thomas 'PointedEars' Lahn <> wrote [...]:
    >> McKirahan wrote:
    >>> <html>
    >>> <head>
    >>> <title>Package.htm</title>

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

    >
    > 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
     
    Thomas 'PointedEars' Lahn, Dec 30, 2005
    #9
  10. Randy Webb Guest

    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.

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

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Dec 30, 2005
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Salisha Khan
    Replies:
    1
    Views:
    11,705
    JohnFol
    Aug 1, 2003
  2. Keith R. Williams

    What am I doing wrong?

    Keith R. Williams, Jul 14, 2003, in forum: VHDL
    Replies:
    4
    Views:
    1,066
    Ed Diego
    Jul 15, 2003
  3. ed
    Replies:
    1
    Views:
    674
  4. Aaron Ackerman
    Replies:
    2
    Views:
    393
    Lewis Wang [MSFT]
    Jul 29, 2003
  5. J

    What am I doing wrong

    J, Aug 14, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    410
    John Saunders
    Aug 14, 2003
Loading...

Share This Page