GerryLavender
asked on
Get element ID from a clicked checkbox into numeric variable
I have a form with 200 plus checkboxes. When the checkbox is checked onClick passes (this) to a Javascript function. I need to get the element array ID of the just checked checkbox into a numeric variable. The following routine never finds a match. The value returned in thisCheckID is blank when I send it to a text field.
function getcheckboxid(formobj)
{
var checkboxname=formobj.name;
var checks = document.getElementsByTagN ame("INPUT ");
var len = checks.length;
var thisCheck, thisCheckID;
for (var i = 0; i < len; i++)
{
if (checks[i].name == checkboxname)
{
thisCheckID = checks[i].id;
}
document.form1.text1.value =thisCheck ID;
}
function getcheckboxid(formobj)
{
var checkboxname=formobj.name;
var checks = document.getElementsByTagN
var len = checks.length;
var thisCheck, thisCheckID;
for (var i = 0; i < len; i++)
{
if (checks[i].name == checkboxname)
{
thisCheckID = checks[i].id;
}
document.form1.text1.value
}
ASKER
I tried the routine. Still get a blank result. If I change theBox.id to theBox.name I get the name of the checkbox as you would expect. I need to get the ID so I can access all the checboxes by ID# in the elements array.
when you mean ID are you referring to the ID attribute? Zvonko's suggestion should work not unless you don't have id on the checkbox.
<input type="checkbox" name="chk1" id="chkID1" onclick="alert(this.id);">
<input type="checkbox" name="chk1" id="chkID1" onclick="alert(this.id);">
ASKER
There is no manually assigned ID in the control. The ID I am talking about is the DOM element[i] array ID. I am testing on the 8th control in the form which is a checkbox named SD1A. I can access the checkbox name by:
var checkboxname=document.theF orm.elemen t[8].name
I can also access the checkbox name by:
var checkboxname=document.theF orm.SD1A.n ame
If I pass the checkbox object (this) to a function as myObj I can get the name by:
var checkboxname=myObj.name
What I want to do is find the element array ID of the checkbox which in this case is 8. Then I can access all 230 of the checkbox controls in my application by the theForm.element[i]
Maybe there is no way query that from the Object itself.
Thanks,
Gerry
var checkboxname=document.theF
I can also access the checkbox name by:
var checkboxname=document.theF
If I pass the checkbox object (this) to a function as myObj I can get the name by:
var checkboxname=myObj.name
What I want to do is find the element array ID of the checkbox which in this case is 8. Then I can access all 230 of the checkbox controls in my application by the theForm.element[i]
Maybe there is no way query that from the Object itself.
Thanks,
Gerry
ok that's clearer.
try,
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Third Santor</title>
<script>
var numChecks = 1;
function getcheckboxid(formobj){
var index = 0;
formobj.setAttribute('tag' , numChecks);
var checkboxname=formobj.name;
var checks = document.getElementsByTagN ame("INPUT ");
var len = checks.length;
var thisCheck, thisCheckID;
for (var i = 0; i < len; i++){
if(checks[i].type == 'checkbox'){
if (checks[i].getAttribute('t ag') == numChecks){
thisCheckID = i;
break;
}
}
}
numChecks++;
document.theForm.text1.val ue = thisCheckID;
}
window.onload = function(){
var obj = document.theForm;
for(var i=0; i<obj.length; i++){
if(obj.elements[i].type == 'checkbox'){
obj.elements[i].onclick = function(){
getcheckboxid(this);
}
}
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form name="theForm" method="post" action="" onsubmit="return ">
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="text" name="text1">
</form>
</body>
</html>
try,
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Third Santor</title>
<script>
var numChecks = 1;
function getcheckboxid(formobj){
var index = 0;
formobj.setAttribute('tag'
var checkboxname=formobj.name;
var checks = document.getElementsByTagN
var len = checks.length;
var thisCheck, thisCheckID;
for (var i = 0; i < len; i++){
if(checks[i].type == 'checkbox'){
if (checks[i].getAttribute('t
thisCheckID = i;
break;
}
}
}
numChecks++;
document.theForm.text1.val
}
window.onload = function(){
var obj = document.theForm;
for(var i=0; i<obj.length; i++){
if(obj.elements[i].type == 'checkbox'){
obj.elements[i].onclick = function(){
getcheckboxid(this);
}
}
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form name="theForm" method="post" action="" onsubmit="return ">
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="text" name="text1">
</form>
</body>
</html>
Gerry, show some of the checkboxes that call the upper function. Copy their generated html source as seen in a browser page source.
ASKER
That did it. It did not dawn on me to just use the loop counter i, to get the array index. I can see now that I could also access the array index of a checkbox by name if each checkbox had a different name.
I need store other prompted data for each checkbox selected. By using the index, I can store data associated with each of the 200+ checkboxes in a couple of arrays instead of in 400+ hidden fields.
Thank you,
Gerry
I need store other prompted data for each checkbox selected. By using the index, I can store data associated with each of the 200+ checkboxes in a couple of arrays instead of in 400+ hidden fields.
Thank you,
Gerry
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hey check this out...
<script>
function ChkChecked(txtbox,chk)
{
if(chk.checked)
{
txtbox.value = ConcatStr(txtbox.value,chk .value)
}
else
{
txtbox.value = ChkCheckboxes(txtbox.value ,chk.value )
}
}
function ConcatStr(XVal,NewVal)
{
XVal += ',' + NewVal
if(XVal.substr(0,1) == ',')
{
XVal = XVal.substr(1,XVal.length)
}
return XVal;
}
function ChkCheckboxes(txtvals,ChkV al)
{
var tmpary = new Array();
var iLoop;
var Result;
tmpary = txtvals.split(",")
Result = '';
for(iLoop=0;iLoop {
if(tmpary[iLoop]!=ChkVal)
{
Result = ConcatStr(Result,tmpary[iL oop])
}
}
return Result;
alert(Result);
}
function SetAllCheckBoxes(FormName, FieldName)
{
if(!document.forms[FormNam e])
return;
var objCheckBoxes = document.forms[FormName].e lements[Fi eldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
//alert(countCheckBoxes);
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
var txtbox = document.getElementById("h dn");
if(document.forms[FormName ].elements ['all'].ch ecked)
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = true;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = false;
}
if(txtbox.value="")
{
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheck Boxes[i]);
}
}
else
{
txtbox.value="";
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheck Boxes[i]);
}
}
}
</script>
<FORM NAME="dd" METHOD="get">
<input type="text" name="hdn">
<INPUT TYPE="checkbox" name="aa" value="chk1" önclick=ChkChecked(dd.hdn, this)>
<INPUT TYPE="checkbox" name="aa" value="chk2" önclick=ChkChecked(dd.hdn, this)>
<INPUT TYPE="checkbox" name="aa" value="chk3" önclick=ChkChecked(dd.hdn, this)>
<INPUT TYPE="checkbox" name="aa" value="chk4" önclick=ChkChecked(dd.hdn, this)>
<INPUT TYPE="checkbox" name="all" value="chkall" önclick=SetAllCheckBoxes(' dd','aa')>
</FORM>
</html>
*** advert removed, mplungjan, ee page editor ***
<script>
function ChkChecked(txtbox,chk)
{
if(chk.checked)
{
txtbox.value = ConcatStr(txtbox.value,chk
}
else
{
txtbox.value = ChkCheckboxes(txtbox.value
}
}
function ConcatStr(XVal,NewVal)
{
XVal += ',' + NewVal
if(XVal.substr(0,1) == ',')
{
XVal = XVal.substr(1,XVal.length)
}
return XVal;
}
function ChkCheckboxes(txtvals,ChkV
{
var tmpary = new Array();
var iLoop;
var Result;
tmpary = txtvals.split(",")
Result = '';
for(iLoop=0;iLoop {
if(tmpary[iLoop]!=ChkVal)
{
Result = ConcatStr(Result,tmpary[iL
}
}
return Result;
alert(Result);
}
function SetAllCheckBoxes(FormName,
{
if(!document.forms[FormNam
return;
var objCheckBoxes = document.forms[FormName].e
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
//alert(countCheckBoxes);
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
var txtbox = document.getElementById("h
if(document.forms[FormName
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = true;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = false;
}
if(txtbox.value="")
{
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheck
}
}
else
{
txtbox.value="";
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheck
}
}
}
</script>
<FORM NAME="dd" METHOD="get">
<input type="text" name="hdn">
<INPUT TYPE="checkbox" name="aa" value="chk1" önclick=ChkChecked(dd.hdn,
<INPUT TYPE="checkbox" name="aa" value="chk2" önclick=ChkChecked(dd.hdn,
<INPUT TYPE="checkbox" name="aa" value="chk3" önclick=ChkChecked(dd.hdn,
<INPUT TYPE="checkbox" name="aa" value="chk4" önclick=ChkChecked(dd.hdn,
<INPUT TYPE="checkbox" name="all" value="chkall" önclick=SetAllCheckBoxes('
</FORM>
</html>
*** advert removed, mplungjan, ee page editor ***
Hi,
You can assign classname to checkbox and get the id using
document.getElementsByClas sName("che ckbox")
Hope this will help you
Sathish
*** advert removed, mplungjan, ee page editor ***
You can assign classname to checkbox and get the id using
document.getElementsByClas
Hope this will help you
Sathish
*** advert removed, mplungjan, ee page editor ***
@Satish: that would be in FF3, Safari and Opera only
http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html
And please do not advertise in questions. - you can link to your site from your profile
http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html
And please do not advertise in questions. - you can link to your site from your profile
function getcheckboxid(theBox){
var theForm = theBox.form;
theForm.text1.value = theBox.id;
}