Checkbox to Enable Input Box

Discussion in 'Javascript' started by Ben, Jun 3, 2005.

  1. Ben

    Ben Guest

    Here's what I have se far:

    <script type="text/javascript">
    other_text.disabled = true;
    function other_text() {
    other_text.disabled = (other_check.checked == false)? false :
    true;
    }
    </script>
    <input type="checkbox" id="other_check" name="other_check"
    onchange="other_text()" /><label for="other_check">Other</label><br />
    <input type="text" id="other_text" />


    But it doesn't work.

    I did have it working using a onchange on the checkbox and having the
    "other_text" text box disabled by default, but this ment that if the
    browser didn't support or have JS enabled then the text box would stay
    disabled. So I need to disable it using javascript, and re-enable it
    when the checkbox is checked.

    Any suggestions?
     
    Ben, Jun 3, 2005
    #1
    1. Advertising

  2. Ben

    Randy Webb Guest

    Ben wrote:
    > Here's what I have se far:
    >
    > <script type="text/javascript">
    > other_text.disabled = true;


    2 things:

    1) When that statement is executed, the other_text field doesn't exist
    yet. That means it can't disable what doesn't exist.
    2) The fieldName.property syntax is IE only and as such won't work in
    any other browser.

    document.formName.elementName.property;

    Use the onload event handler to fire a function that does what you are
    trying to do:

    window.onload = someFunction;

    function someFunction(){
    document.forms['formName'].elements['other_text'].disabled;
    }

    Or better yet, just set your onload to point to your function

    window.onload = other_text;

    and ditch the first line.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
     
    Randy Webb, Jun 3, 2005
    #2
    1. Advertising

  3. Ben

    Ben Guest

    Still doesn't work. ;(
     
    Ben, Jun 3, 2005
    #3
  4. Ben

    Random Guest

    Ben wrote:
    > Here's what I have se far:
    >
    > <script type="text/javascript">
    > other_text.disabled = true;


    The element ID'd as 'other_text' doesn't exist at the time the above
    line is executed. This should be done either onLoad or in a <script>
    block after the <input id=other_text>

    This, I think, is the crux of your problem.

    > function other_text() {
    > other_text.disabled = (other_check.checked == false)? false :
    > true;


    Change the name of the function or change the id of the text input.

    You can also rewrite this more simply as:
    other_text.disable = ( !other_check.checked );


    > }
    > </script>
    > <input type="checkbox" id="other_check" name="other_check"
    > onchange="other_text()" /><label for="other_check">Other</label><br />
    > <input type="text" id="other_text" />
    >
    >
    > But it doesn't work.
    >
    > I did have it working using a onchange on the checkbox and having the
    > "other_text" text box disabled by default, but this ment that if the
    > browser didn't support or have JS enabled then the text box would stay
    > disabled. So I need to disable it using javascript, and re-enable it
    > when the checkbox is checked.
    >
    > Any suggestions?



    Consider instead:

    <script type="text/javascript">

    function endisable( ) {
    document.forms['other_form'].elements['other_text'].disabled =
    ! document.forms['other_form'].elements[
    'other_check'].checked;
    }

    </script>
    <body onload="document.forms['other_form'].elements[
    'other_text'].disabled=true;">
    <form id="other_form">
    <input type="checkbox" id="other_check" name="other_check"
    onchange="endisable()" />
    <label for="other_check">Other</label><br />
    <input type="text" id="other_text" />
     
    Random, Jun 3, 2005
    #4
  5. Ben

    Ben Guest

    Thanks, that works fine, but still one problem.

    Is there anyway to do it without the <body> tag?
     
    Ben, Jun 3, 2005
    #5
  6. Ben

    Random Guest

    Ben wrote:
    > Thanks, that works fine, but still one problem.
    >
    > Is there anyway to do it without the <body> tag?


    Sure. Just execute this line of JS code:
    document.forms['other_­form'].elements[
    'other_text'].disabled=true;

    Anywhere after the <input id=other_text /> tag.
     
    Random, Jun 3, 2005
    #6
  7. Ben

    Ben Guest

    Thanks again. :)
     
    Ben, Jun 3, 2005
    #7
    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. Patrick
    Replies:
    1
    Views:
    695
  2. ashutosh
    Replies:
    3
    Views:
    9,035
    Andrew Thompson
    Jun 16, 2005
  3. cjl
    Replies:
    1
    Views:
    10,533
    Michael Winter
    Oct 31, 2005
  4. cjl
    Replies:
    7
    Views:
    206
    Thomas 'PointedEars' Lahn
    Oct 30, 2005
  5. bigrich
    Replies:
    2
    Views:
    230
    Sean Berry
    Jan 18, 2006
Loading...

Share This Page