Checkbox to Enable Input Box

#1 July 23rd, 2005, 09:28 PM

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?

#2 July 23rd, 2005, 09:28 PM

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

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

#3 July 23rd, 2005, 09:28 PM

Still doesn't work. ;(

#4 July 23rd, 2005, 09:28 PM

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

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.
[color=blue]
> function other_text() {
> other_text.disabled = (other_check.checked == false)? false :
> true;[/color]

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

[color=blue]
> }
> </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?[/color]

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

#5 July 23rd, 2005, 09:28 PM

Thanks, that works fine, but still one problem.

Is there anyway to do it without the <body> tag?

#6 July 23rd, 2005, 09:28 PM

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

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.

#7 July 23rd, 2005, 09:28 PM

Thanks again. :)

Popular Articles

What is Bytes?