Which object in control array was clicked?

I have a control array of checkboxes in HTML and they all have the same OnClick function.  Is there a way for me to know which object in the array was the one that triggered the OnClick function inside the function?

For example:

function chkBox_onclick()
{
  //What is the value or index of the control array that was clicked?
}

....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick()">

Thanks for any help.

Jolhid
LVL 2
JolhidAsked:
Who is Participating?
 
fritz_the_blankConnect With a Mentor Commented:
Here you go:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function getCheckedIndex(strControlName){
     var objFormField = document.forms[0].elements[strControlName];
     for(i=0;i<objFormField.length;i++){
          if(objFormField[i].checked){
               alert("The selected index is: " + i);
               break;
          }
     }
}
//-->
</SCRIPT>

</HEAD>
<BODY>

<FORM action="" method=POST id=form1 name=form1>
<input type=checkbox name=chkBox id=chkBox value=1 onclick="getCheckedIndex(this.name)">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="getCheckedIndex(this.name)">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="getCheckedIndex(this.name)">


</FORM>
</BODY>
</HTML>


Fritz the Blank
0
 
fritz_the_blankCommented:
Don't forget, the array index starts at 0, so the first box will return 0, the second 1 and so forth.

Fritz the Blank
0
 
ZvonkoSystems architectCommented:
Try this:


<script>
function chkBox_onclick(theCaller)
{
 //What is the value or index of the control array that was clicked?
 alert(theCaller.value)
}
</script>
....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick(this)">



0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
lil_puffballCommented:
You could also use srcElement. I've never used it personally but have seen it used. I think you just need to call window.event.srcElement or just event.srcElement to get its name.
0
 
ZvonkoSystems architectCommented:
Yeap!!!

<script>
function chkBox_onclick(theCaller)
{
 //What is the value or index of the control array that was clicked?
 alert(theCaller.value)
 alert(event.srcElement.value)
}
</script>
....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick(this)">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick(this)">


0
 
jamesyuCommented:
simplest way:   using variable "this"

keep in mind that variable "this" is the object fire the event.

function chkBox_onclick()
{
   //  variable "this" is the object(checkbox) who trigger the event
   alert(this.value);
}

....

<input type=checkbox name=chkBox id=chkBox value=1 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=2 onclick="return chkBox_onclick()">
<input type=checkbox name=chkBox id=chkBox value=3 onclick="return chkBox_onclick()">
0
 
ZvonkoSystems architectCommented:
"this" is not true :-)
0
 
JolhidAuthor Commented:
Perfect.  this.name is what I was looking for.  Thanks.

Jolhid
0
 
fritz_the_blankCommented:
0
 
fritz_the_blankCommented:
Glad to have helped,

Fritz the Blank
0
 
JolhidAuthor Commented:
Yeah, I guess he did more exactly answer the question, Fritz.  But yours was first and the fact you showed that 'this' can be used as a parameter is what I really wanted to know.  <g>

Thanks to both of you.

Jolhid
0
 
JolhidAuthor Commented:
Yeah, I guess he did more exactly answer the question, Fritz.  But yours was first and the fact you showed that 'this' can be used as a parameter is what I really wanted to know.  <g>

Thanks to both of you.

Jolhid
0
 
ZvonkoSystems architectCommented:
You are welcome :-)

See you,
Zvonko
0
 
jamesyuCommented:
This is true: :-)

you have two choice:

1. pass "this" as a parameter to event handler function

or

2. simply use "this" variable inside handler function, like this:

function chkBox_onclick()
{
  //  variable "this" is the object(checkbox) who trigger the event
  alert(this.value);
}

PLEASE BE NOTICED that:
In normal function, "this" referes to javascript object himself (like "me" in vb).
While in event handler, "this" refers to the DOM object who triggered the event.

James
0
 
ZvonkoSystems architectCommented:
Hello James,

it is good that JavaScript rules can not be voted in democratic manner :-)

Simply test your code in a browser and tell me what you see.

This is Experts Exchange and so I am thankful for any knowledge exchange. Perhaps I am wrong, but I have tested your proposal. So please test you too. If you can confirm it then I will offer 300 points to you, ok!

So long,
Zvonko

PS: and I want to see it in IE5.5 <|:-)




0
 
jamesyuCommented:
Hello Zvonko,

This is the code for you to test. It works both in IE 6 and IE 5.

James

<input id=id1 type=text value="Click here to test--Text"><br>
<input id=id2 type=button value="Click here to test--Button"><br>
<input id=id3 type="Checkbox" value="1">Check Box<br>
<input id=id4 type="Radio" value="1">Radio 1
<input id=id4 type="Radio" value="2">Radio 2<br>
<a id=id5 value="value of link" href="javascript:">Link</a>

<script>
function TestClick()
{
    alert("Name: "+this.id + "\nValue:" +this.value);
}

id1.onclick=TestClick
id2.onclick=TestClick
id3.onclick=TestClick
id4[0].onclick=TestClick
id4[1].onclick=TestClick
id5.onclick=TestClick

</script>
0
 
jamesyuCommented:
another example:

<input name=id1 id=id1 type=text value="Click here to test--Text"><br>
<input name=id2 id=id2 type=button value="Click here to test--Button"><br>
<input name=id3 id=id3 type="Checkbox" value="1">Check Box<br>
<input name=id4 id=id4 type="Radio" value="1">Radio 1
<input name=id4 id=id4 type="Radio" value="2">Radio 2<br>
<a id=id5 value="value of link" href="javascript:">Link</a><br>
<select id="id6" name="id6">
     <option >0</option>
     <option >1</option>
     <option >2</option>
</select><br>
<select id="id7" name="id7" multiple>
     <option value=0>0</option>
     <option value=1>1</option>
     <option value=2>2</option>
</select><br>


<script>
function TestClick()
{
    var msg = "Id: "+this.id + "\nName: "+this.name + "\nValue:" +this.value + "\n";
    if (this.type=="checkbox" || this.type=="radio")
         msg += "checked:"+this.checked + "\n";
    if (typeof(this.selectedIndex) != "undefined")
         msg += "selecteIndex:"+this.selectedIndex + "\n";
    alert(msg);
}


id1.onclick=TestClick
id2.onclick=TestClick
id3.onclick=TestClick
id4[0].onclick=TestClick
id4[1].onclick=TestClick
id5.onclick=TestClick
id6.onchange=TestClick
id7.onchange=TestClick

</script>
0
 
ZvonkoSystems architectCommented:
Hey James, now I saw it, you are right! :)

this 300 points absolutely yours.

I was testing only inline onClick assignment trough html.
Now you showed to me that JavaScript assignment of onclick yields the this object assignment. I was pretty sure this is only Netscape property.

Thanks,
Zvonko

0
 
fritz_the_blankCommented:
I have been following this last thread with some interest, but I think that I will remain an old fuddy-duddy and actually pass the object as a parameter literally. I think that it makes the code easier to read and I won't stay awake at nights wondering what happens under Opera 1.x.

It's always good to learn something new, however.


Fritz the Blank
0
 
ZvonkoSystems architectCommented:
I see it the same, learning all aspects.

Hello James, please take this points offer:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20562029.html

0
 
jamesyuCommented:
fritz_the_blank,

What I want to say is that it is not difficult to understand. It's normal and reasonable.
Now, let me told you what's going on.

As you see, the following code works(I mean "this" inside function TestClick refers to id1):
<input name=id1 id=id1 type=text value="Click here to test--Text">
.....
id1.onclick=TestClick

But, this will not work:
<input name=id1 id=id1 type=text value="Click here to test--Text" onclick="TestClick()">


Why? Let's look at a simple sample first.

function f1()
{
    alert(this.v1);
}

function obj(){
    this.v1 = "value of obj";
    this.showValue = f1
}

var a = new obj();
a.showValue();    // <--  what value should be shown? "value of obj"

actually,
this.showValue = f1  makes f1 becomes obj's member, and named as showvalue, so variable "this" inside f1 refers to instance of obj.

You can do "this.showValue = f1" inside function obj(as show above), it will affect ALL instance of obj.

Another way, you can assign(add or replace) object member for a specific instance of object. Try the following:

//we create a new function f2

function f2()
{
    alert(this.v1);
}

var a = new obj();
//and we add a new member to instance a
a.showvalue2 = f2;
a.showValue2();    // <--  what value should be shown? "value of obj"

var b = new obj();
// how about b?
b.showValue2();  // <-- this will yield an error, says showValue2 not defined

Now, I think you already know:
What "id1.onclick=TestClick" does? Samething. :-)


Hold on one second, why the following doesn't work?
<input name=id1 id=id1 type=text value="Click here to test--Text" onclick="TestClick()">

Because the onclick="TestClick()" is a string. It does not add member to object id1. What it acutally does is do an eval(onclick). Inside the string of code(onclick string), "this" refers to the object id1. But, when it goes into function you called, "this" refers the function.

Interesting? or Cool? What do you guys think?

Have fun.

James

0
 
netamanCommented:
James very good
0
 
lil_puffballCommented:
Hmm. Definitely cool AND interesting. Thanks for showing me something new! :)
0
All Courses

From novice to tech pro — start learning today.