?
Solved

Which object in control array was clicked?

Posted on 2003-03-21
23
Medium Priority
?
228 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:Jolhid
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 5
  • +3
23 Comments
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 1000 total points
ID: 8184288
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8184395
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8184691
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 12

Expert Comment

by:lil_puffball
ID: 8184695
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8184741
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
 
LVL 2

Expert Comment

by:jamesyu
ID: 8184826
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8184888
"this" is not true :-)
0
 
LVL 2

Author Comment

by:Jolhid
ID: 8184920
Perfect.  this.name is what I was looking for.  Thanks.

Jolhid
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8185017
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8185020
Glad to have helped,

Fritz the Blank
0
 
LVL 2

Author Comment

by:Jolhid
ID: 8185054
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
 
LVL 2

Author Comment

by:Jolhid
ID: 8185062
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8185736
You are welcome :-)

See you,
Zvonko
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8196979
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8197114
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
 
LVL 2

Expert Comment

by:jamesyu
ID: 8197435
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
 
LVL 2

Expert Comment

by:jamesyu
ID: 8197865
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8201089
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8203057
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 8203513
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
 
LVL 2

Expert Comment

by:jamesyu
ID: 8204248
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
 

Expert Comment

by:netaman
ID: 8204763
James very good
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8207144
Hmm. Definitely cool AND interesting. Thanks for showing me something new! :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question