[DAL]

Hi everyone and merry christmas.

I am having problems with trying to make my website support various browsers. I have some cool functions which I have created using javascript. Im new to javascript so my code may or maynot be up to standards so please be patient and bit your tounges if you see anything Im being stupid about.


I want to have a check box which when turned on disables a few boxes. IE works fine with the code I have but firefox just sits there with a blank expression.

basically;

javascript function grayout

Code:

function grayout(onoffelement,groupid)
{
    var stateofbox = onoffelement.checked;
    if(stateofbox == false)
    {
        document.getElementById('inpText['+groupid+']').style.backgroundColor="#FFD543";
        document.getElementById('inpText['+groupid+']').disabled=false;
    }
 
    if(stateofbox == true)
    {
        document.getElementById('inpText['+groupid+']').style.backgroundColor="#EDEDED";
        document.getElementById('inpText['+groupid+']').style.backgroundColor="#EDEDED";
    }
 
}

Code:

<input type="checkbox" name="box[0]" id="box" value="somevalue" onClick="javascript:grayout(this.form.box[0],'0');">
 
<input type="checkbox" name="box[1]" id="box" value="somevalue" onClick="javascript:grayout(this.form.box[1],'1');">

It seems that IE works fine with the form array elements but FF doesnt. I build this all through a php function which has a far more complicated result than this but FF doesnt seem to support arrays for text boxes. IE just does it.

FF and IE both work for single elements of form entities which isnt dynamic enough for my needs. Is there an option like;

Code:

firefox.stupid=false;

Thanks in advance

[Nico]

Instead of this.form.box[0], use just this. This will referrer to the element without using array brackets.

And you can take out the "javascript" in:

Code:

onClick="javascript:grayout

The browser will only expect Javascript there, so there's no need to tell him.

Code:

onClick="grayout(...

[DAL]

Thanks Nico

The problem isnt with the respective control over the tickbox array but that of the array for the other boxes I want to disable. There are 8 other text boxes which need the attribute set to disable=true; when the box is checked. When the box is unchecked the text boxes are set to disable=false; IE can understand this but FF cant and I believe its down to the array element.

EG
var test = document.getElementById('inpText['+groupid+']').disabled;

alert(test);

will result in IE producing the value true or false in an alert box.
FF wont do a thing (not even poping up an alert box)

if I asked firefox to do the same with an element accessed via true text hard coding;
EG
var test = document.getElementById('inpText[1]').disabled;

alert(test);

it would show the value in an alert box. But what point would that be as I would know what value was being passed. Theres no way that Im going to hard code everything with functions for every option as the code would be huge. Dynamic ranges are accepted in IE, so why does FF have such a problem reading them?

[UnrealEd]

this probably won't work either, but just give it a shot:

function grayout(onoffelement,groupid)
{
    var stateofbox = onoffelement.checked;
    var inputName = 'inpText[' + groupid.toString() + ']';
    if(stateofbox == false)
    {
        document.getElementById(inputName).style.backgroundColor="#FFD543";
        document.getElementById(inputName).disabled=false;
    } else {
        document.getElementById(inputName).style.backgroundColor="#EDEDED";
        document.getElementById(inputName).style.backgroundColor="#EDEDED";
    }
 
} 

I just searched the web for a while, and i saw that the disabled attribute of any element should look like this (probably only if you're working with XHTML):

HTML Code:

<input type="text" disabled="disabled" />

So setting the attributes value to "true" might not disable the textfield. Try setting the value to "disabled", like this:

function grayout(onoffelement,groupid)
{
    var stateofbox = onoffelement.checked;
    var inputName = 'inpText[' + groupid.toString() + ']';
    if(stateofbox == false)
    {
        document.getElementById(inputName).style.backgroundColor="#FFD543";
        document.getElementById(inputName).disabled = "disabled";
    } else {
        document.getElementById(inputName).style.backgroundColor="#EDEDED";
        document.getElementById(inputName).style.backgroundColor="#EDEDED";
    }
 
}