473,320 Members | 2,027 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Problem using onClick on a radio button to enable/disable check boxes

Okay, here's the problem - I have 3 radio buttons, and 11 check boxes
(which are disabled by default). I have the javascript below which when
the last radio button is clicked, enables the checkboxes.

<script type="text/javascript">
//<![CDATA[
function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabl ed = disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disable d = disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm.permfitness_classes.dis abled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;
}
//]]>
</script>

I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.

The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38

I'm sorry I can't point you to the actual pages, but they're within a
login-protected admin interface.

Any help would be appreciated.

Thanks!

Marc
Nov 23 '05 #1
9 4348

Marc wrote:
I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.


That's because the code is trying to act upon a non-existent form,
which would have been immediately obvious if you had enabled error
reporting.

As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements[i].type=='checkbox' )
elements[i].disabled = disabledCheckboxes;
}

--
S.C.

Nov 23 '05 #2
Marc wrote:
[...] I have 3 radio buttons, and 11 check boxes (which are disabled by
default). I have the javascript below which when the last radio button
is clicked, enables the checkboxes.

<script type="text/javascript">
//<![CDATA[
<URL:http://hixie.ch/advocacy/xhtml>
function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabl ed =
disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disable d =
disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm..permfitness_classes.di sabled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;
Did it not occurred to you that there is much redundancy which makes
this hard to maintain?

var es = document.forms['addUserForm'].elements;
es['permhome'].disabled =
es['permswimming'].disabled =
... = (onoff == 'off');

Or you could easily do a loop.

var es = document.forms['addUserForm'].elements;
for (var a = ['permhome', 'permswimming', ...], i = a.length; i--;)
{
es[a[i]].disabled = disabledcheckboxes;
}
}
//]]>
</script>

I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.

The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38


The second form is named/IDed "manageUserForm", not "addUserForm" as the
first, hence document.forms.addUserForm evaluates to `undefined' and
document.forms.addUserForm.something results in a ReferenceError.

<URL:http://jibbering.com/faq/#FAQ4_43>

| onsubmit="try { var myValidator = validate_manageUserForm; } catch(e)
| { return true; } return myValidator(this);"

is bogus. `try..catch' breaks with script engines that do not
support it, and it does not strike me as being necessary here.
Especially there is no such identifier as `validate_manageUserForm'
anywhere in the document.

| <input onclick="checkIt('on');"

Instead of lengthy inefficient `document.forms.addUserForm.', you could
easily pass `this' for second argument of checkIt() and use its `form'
property. This would also eliminate dependency of the `form' elements
name/ID:

function checkIt(onoff, e)
{
if (e.form)
{
var es = e.form.elements;
if (es)
{
// ...
}
}
}

<form ... name="whatever">
...
<input ... onclick="checkIt('on', this);"
...
</form>

You should consider using numbers, instead of strings, for disabled states.
PointedEars
Nov 23 '05 #3
Stephen Chalmers wrote:
I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.
That's because the code is trying to act upon a non-existent form,
which would have been immediately obvious if you had enabled error
reporting.


JavaScript isn't my strong point, how do I turn error reporting on?
As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements[i].type=='checkbox' )
elements[i].disabled = disabledCheckboxes;
}


I didn't write the function - someone in this group did, but that JS
seems to make sense to me, so I'll modify it using that, thanks.

Marc
Nov 23 '05 #4
Thomas 'PointedEars' Lahn wrote:
<script type="text/javascript">
//<![CDATA[
<URL:http://hixie.ch/advocacy/xhtml>


Thanks, I'll have a read of this in detail later.
function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabl ed =
disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disable d =
disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm..permfitness_classes.di sabled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;


Did it not occurred to you that there is much redundancy which makes
this hard to maintain?

var es = document.forms['addUserForm'].elements;
es['permhome'].disabled =
es['permswimming'].disabled =
... = (onoff == 'off');

Or you could easily do a loop.

var es = document.forms['addUserForm'].elements;
for (var a = ['permhome', 'permswimming', ...], i = a.length; i--;)
{
es[a[i]].disabled = disabledcheckboxes;
}


I didn't write the function, someone in this group did, but I take your
point and will act accordingly.
The second form is named/IDed "manageUserForm", not "addUserForm" as the
first, hence document.forms.addUserForm evaluates to `undefined' and
document.forms.addUserForm.something results in a ReferenceError.
Thanks, I should have noticed that, but after a long day with JavaScript
not being my strong point, I obviously missed it when trying to debug.
<URL:http://jibbering.com/faq/#FAQ4_43>
That URL doesn't seem to work for me...
| onsubmit="try { var myValidator = validate_manageUserForm; } catch(e)
| { return true; } return myValidator(this);"

is bogus. `try..catch' breaks with script engines that do not
support it, and it does not strike me as being necessary here.
Especially there is no such identifier as `validate_manageUserForm'
anywhere in the document.
There is, it's just that I snipped that JavaScript out as it wasn't
relevant to my problem. In any event, I have no control over that
scripting, it's outputted by a PEAR package. (see http://pear.php.net/
if you have no clue what I'm referring to.

| <input onclick="checkIt('on');"

Instead of lengthy inefficient `document.forms.addUserForm.', you could
easily pass `this' for second argument of checkIt() and use its `form'
property. This would also eliminate dependency of the `form' elements
name/ID:

function checkIt(onoff, e)
{
if (e.form)
{
var es = e.form.elements;
if (es)
{
// ...
}
}
}

<form ... name="whatever">
...
<input ... onclick="checkIt('on', this);"
...
</form>
Can you explain this in a bit simpler terms please? JavaScript isn't my
strong point and I'm not really following what you're saying. :(
You should consider using numbers, instead of strings, for disabled states.


Fair point.

Marc
Nov 23 '05 #5

Marc wrote:
JavaScript isn't my strong point, how do I turn error reporting on?
Presumably I.E. something like:

Tools / Internet Options / Advanced / Browsing / 'Display notification
about every script error'

Remember this will be reset if a broken website reports an error and
you select 'do not show me this again'.
I didn't write the function - someone in this group did,


They may have written it to act on one or two elements, but if they had
offered it the way you had it, then others would have had something to
say about it.

--
S.C.

Nov 23 '05 #6
Marc wrote:
Thomas 'PointedEars' Lahn wrote:
<URL:http://jibbering.com/faq/#FAQ4_43>


That URL doesn't seem to work for me...


Should work again. I also had a short timeout a few minutes ago.

Summarized, you should enter `javascript:' in Firefox's/Mozilla's Location
Bar as "Does not work" is a useless error description. [psf 4.11] :)
| <input onclick="checkIt('on');"

Instead of lengthy inefficient `document.forms.addUserForm.', you could
easily pass `this' for second argument of checkIt() and use its `form'
property. This would also eliminate dependency of the `form' elements
name/ID:

function checkIt(onoff, e)
{
if (e.form)
{
var es = e.form.elements;
if (es)
{
// ...
}
}
}

<form ... name="whatever">
...
<input ... onclick="checkIt('on', this);"
...
</form>


Can you explain this in a bit simpler terms please? JavaScript isn't my
strong point and I'm not really following what you're saying. :(


I'll try, however it is mostly not related to JavaScript but to markup/DOM.

The `input' element is a descendant (child, or child of a child, aso.)
element of a `form' element, meaning in markup/DOM terms that the former
is (part of) the latter's content. That `form' element is referred to in
`checkIt' (or so it appears to be) invoked by an event listener for the
former element.

In intrinsic event handler attribute's values like onclick's, `this' refers
to the element that fired the event. So you can pass `this' as second
argument to checkIt(), providing a reference to the `input' element. In
checkIt(), after feature-testing it, you access the HTMLFormElement object
referred to by the `form' property of the passed object which happens to be
the element object representing the ancestor `form' element. This is what
you are looking for in order to access the other controls in that form.

Then you retrieve a reference to the HTMLCollection object referenced by
the `elements' property of the HTMLFormElement object which encapsulates
references to all controls in that `form' element. An additional feature
test makes sure that this collection exists before you access its
properties, i.e. the element objects representing the form controls.

Since passing `this' removes any dependence on the value of the `form'
element's `name' or `id' attribute, they do not matter anymore. What
matters now is only the ancestor-descendant relationship between the
`form' element and the `input' element.
HTH

PointedEars
Nov 23 '05 #7
Stephen Chalmers wrote:
JavaScript isn't my strong point, how do I turn error reporting on?


Presumably I.E. something like:

Tools / Internet Options / Advanced / Browsing / 'Display notification
about every script error'

Remember this will be reset if a broken website reports an error and
you select 'do not show me this again'.


I use Firefox, but I'm it has a similar feature.
I didn't write the function - someone in this group did,


They may have written it to act on one or two elements, but if they had
offered it the way you had it, then others would have had something to
say about it.


Nope, I had 10 checkboxes initially so I've only added 1. I didn't get
much of a response to the thread in the first place.

Marc
Nov 24 '05 #8
VK

Marc wrote:
The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38

I'm sorry I can't point you to the actual pages, but they're within a
login-protected admin interface.

Any help would be appreciated.


Try to name both forms equally - either "addUserForm" or
"manageUserForm" - that should help greatly ;-)

Or even better (if guaranteed to have only one form per screen) address
you form this way:
document.forms[0]

Nov 24 '05 #9
Stephen Chalmers wrote:
As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements[i].type=='checkbox' )
elements[i].disabled = disabledCheckboxes;
}


Okay, so I used this function, but I still have one problem. Sometimes,
the 'user' radio button (the one which when clicked enables the
checkboxes) is checked when the page is loaded. This means you have to
click the already checked radio button to enable the checkboxes.

Is there a way to detect that the radio button is checked and enable the
checkboxes immediately without involving a whole load of javascript?

Thanks!

Marc
Nov 29 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Claes Andersen | last post by:
Hi, I got this piece of code that i intend to use for a quiz program. What it does is the following. When a user makes a choice in a family of radio buttons, the other choices are automatically...
8
by: rdlebreton | last post by:
Hi, Folks! I've been trying to develop my own version of these draggable layers and I have been limiting myself to IE6...for now. I have looked at some other examples to get ideas of creating...
1
by: sman | last post by:
Hi, I recently read this article on About.com on how to create required fields for a form: http://javascript.about.com/library/scripts/blformvalidate.htm Everything works great except that there...
2
by: jimi_xyz | last post by:
Sorry if this isn't the correct group, i don't think there is a group for straight HTML. I am trying to create a type of search engine. There are two radio buttons at the top, in the middle there...
2
by: DataSmash | last post by:
Hello, I've created a simple form with 2 radio boxes, 2 text boxes and a button. When I click the button, I'd like to write each "choice" to a text file. I can't figure out how to "link" the...
1
by: s.chelliah | last post by:
Hi, I am trying to use javascript, div tag and radio button to disable/enable a text box. It works fine in netscape and firefox, but in IE, the text box is not disabled when the user checks the...
3
by: acecraig100 | last post by:
I am fairly new to Javascript. I have a form that users fill out to enter an animal to exhibit at a fair. Because we have no way of knowing, how many animals a user may enter, I created a table...
1
by: scanreg | last post by:
My form needs to (1) direct to specified URLs based on a combination of form selections and (2) enable/disable form features based on selections within the form FORM Radio 1 - A - B - C ...
2
by: viki1967 | last post by:
Hi everyone. My form page htm: <html> <head> <script language="javascript"> function controlla_combo() { document.form1.Nacionalidad_text.disabled =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.