Why won't my function work?

[vozzek]

Hi all,

I've got a simple function I can't get to work. I've got two checkboxes that are associated with two textarea inputs. I disable the text areas initially. When the associated checkbox is clicked, I want it to enable that text area... and vice versa. Like a toggle.

My form is called pay_form. (The form actually spans several tables, in case that matters). Here's the tag for it:

<form ACTION="checkout3.php" method="POST" name="pay_form" id="pay_form" onSubmit="return chkPayForm();" style="margin:0;">

Here are the two checkboxes:

<input type="checkbox" name="commentbox" id="commentbox" value="0" onClick="msgBox('order_msg');" align="bottom"/>
 
<input type="checkbox" name="giftbox" id="giftbox" value="0" onClick="msgBox('gift_msg');" align="bottom"/>

And here are the two associated textareas:

<textarea name="order_msg" id="order_msg" cols="20" rows="3" maxlength="255" disabled></textarea>
 
<textarea name="gift_msg" id="gift_msg" cols="40" rows="3" maxlength="255" disabled></textarea>

Finally, here is my function:

function msgBox(element) {
 var frm = document.pay_form;
 if (frm.element.disabled == true) {
    frm.element.disabled = false;
    } else { frm.element.disabled = true; }
}

Am I doing the parameter passing correctly? How come the textareas aren't toggling on and off? Please help! :) Thanks in advance.

[acoder]

Try this instead:

function msgBox(element) {
 var txtarea = document.getElementById(element);
 if (txtarea.disabled == true) {
    txtarea.disabled = false;
    } else { txtarea.disabled = true; }
}

Use the ID whenever you can to access elements.

[vozzek]

Hey that worked! Thanks!

Being a javascript newbie, I've never used getElementById. Gonna have to go check out more about it. Thanks again.

[acoder]

Glad it helped. Have a look at this link.