Javascript function

Original Message

Name: shahram
Date: October 17, 2006 at 00:27:14 Pacific
Subject: Javascript function
OS: Win XP pro
CPU/Ram: p 4.2
Model/Manufacturer: asus

Comment:

ok ,
here is a code to show a textbox when a checkbox is clicked :
=====================================
<form>
<input type="checkbox" name="checkbox" onclick="form.textbox.style.visibility = this.checked?'visible':'hidden';" />
<input style="visibility:hidden;" type="text" name="textbox" />
</form>
=====================================
works perfectly

now , I will be calling a function with check box and the text input is infront of it:
=====================================
<input name="testchk" type="checkbox" id="igames" value="something" onclick="update('testchk')" onchange="update('testchk')"><label for="testchk">something<input type="text" id="textField" style="visibility:hidden;">
=====================================
and here is the function
=====================================
function update(clicked){
if(clicked == 'testchk'){
************************************
}
}
=====================================

Now what should I put instead of the stars to do the same job for me??????????

Tried lots of things,
no success!!
Thanx

Report Offensive Message For Removal

Response Number 1

Name: Michael J (by mjdamato)
Date: October 17, 2006 at 09:20:16 Pacific
Subject: Javascript function

Reply: (edit)

A few of things:
1) The onchange trigger does not work for checkboxes so you can remove that.
2) In calling the update function you are passing it the id of the label. You are not wanting to do anything with the label so that doesn't make sense.
3) You don't have a closing tag for the label. Some browsers may not render it correctly - IE is very forgiving with mistakes. Too forgiving in fact.
So, instead of passing the label id to the function, let's pass it the checkbox object and the id of the text field. This isn't really necessay since you are only trying to use it with these two fields, but doing so will allow you to use the same function on the page with other fields.
Then in the function create an object for the textfield using the getElementById function. Then simply use the same logic as you used before inline.
<html>
<head>
<script language="javascript">
function update(checkObj,textID) {
var textObj = document.getElementById(textID);
textObj.style.visibility = checkObj.checked?'visible':'hidden';
}
</script>
</head>
<body>
<input name="testchk" type="checkbox" id="igames" value="something" onclick="update(this,'textField')">
<label for="testchk">something</label>
<input type="text" id="textField" style="visibility:hidden;">
</body>
</html>
Michael J

Report Offensive Follow Up For Removal

Response Number 2

Name: shahram
Date: October 17, 2006 at 15:01:26 Pacific
Subject: Javascript function

Reply: (edit)

thank you for your help,
yes, when I was writing it here I missed the ending of the label,
I figured it out in a similar way
------
<script language="javascript">
function update(itemID){
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
<input name="name" type="checkbox" id="soemthing" onclick="update('someid');" onchange="update('soemid');">something

<p id="someid" style="display:none">
<input type="text" name="field">
</p>
-------

it's strange that you said onchange does not work for checkboxs, because it does work for me,
My situation is a little more complicated that the script above,
I have many checkboxes that will trigger hidden content to be shown and trigger some others to go invisible,
eg one checkbox will uncheck another checkbox which is an "onchange".

Report Offensive Follow Up For Removal

Response Number 3

Name: Michael J (by mjdamato)
Date: October 17, 2006 at 19:36:10 Pacific
Subject: Javascript function

Reply: (edit)

No, there is no "true" onchange event for a checkbox object. It is working for you because you have both the onchange AND the onclick events doing the same thing. The onchange "might" work in some browsers, but it is not correct. The onchange event is for when the value of a field changes. The value of a checkbox never changes (you can change it w/javascript but that wouldn't fire that event handler either) only the sate of whether the field is checked or not: http://www.devguru.com/Technologies...
As to your script I would highly recommend doing a check of the state of the checkbox. Even though checking the visibility of the textbox should work, it is possible for it to get out of sync with the checkbox.
And, since you will have many of these on the page I would also suggest enclosing sections that will be displayed/hidden within divs or spans with ids. Then just pass the checkbox object and the div/span id to the function.
Michael J

Report Offensive Follow Up For Removal


Calling Javascript Function JavaScript help please! Javascript, div, visibility, and IE Update DIV height - javascript Add BST & GMT to this javascript?	Font Changing Coding in Javascript Javascript: Cross input via link Javascript Question Javascript: How To.. Javascript form