onClick functions executes twice

Question

I'm trying to get JavaScript to execute correctly when either clicking a checkbox, or clicking a <tr>. However it seems to be executing the code twice; once for the checkbox and once for the <tr>.

Now you may say "Why not just put it on the checkbox and be done with it?" If it was that simple, I would have done that. But it was requested to have it trigger when they click the <tr> or on the checkbox.

Now to add some more complexity, when the onClick fires, it sends the data back to the parent, in an array, for processing until it is time for the update.

Child Window (Problem area)

function FnSearch(urembroid, embroideryID){
  if (document.getElementById("embroid"+embroideryID).checked == false){
                    try {
                            parent.window.EmbroideryDataReturned("add", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("add", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = true;
            } else {
                    try {
                            parent.window.EmbroideryDataReturned("remove", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("remove", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = false;
            }

Child window HTML -- Please note PHP is making the and fields.

echo "<tr id='embroideryData' onclick=\"javascript:FnSearch('" . $data['urembroidid'] . "', '".$data['EmbroideryID']."')\">"; // On a <tr> execute the update
    if (OrderKeyExists($data['EmbroideryID'])) {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."' checked='checked'/></td>";
    } else {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."'/></td>";
    }
echo "</tr>\n";

I only need this code to execute once. The code works correctly when clicking on the <tr> but executes twice when the checkbox is clicked on. However it also messes up the array inside the parent window to where it could have false data when clicking on the checkbox. When debugging, it sends a onClick to FnSearch as if the checkbox was originally "checked" when it was not. So it sends a "remove" to the parent, but the second time it does the complete opposite. This is causing the data integrity.

So the main question is: How do you get the checkbox to only execute FnSearch once?

If anyone has any input, that would be greatly appreciated!

When you're asking a JS question, it would be better to just show the HTML that's in the discussion instead of the PHP that produces the HTML. It just makes it easier to read. — Gezim
– Gezim, Commented Feb 4, 2014 at 17:19
The checkbox, when clicked fires off an event. This event is then bubbled up to the td then to the tr elements. Either move the event to the checkbox (where it actually belongs) or prevent the event from bubbling to the next level. — user2417483
– user2417483, Commented Feb 4, 2014 at 17:23
@jeff Then is there a way to prevent the checkbox from firing off its own event or to catch it and use it? — Twister1002
– Twister1002, Commented Feb 4, 2014 at 17:34
@Twister1002 if you cancel the event from the checkbox then your function will not execute. As for using the actual event - place the onclick event function in the checkbox. — user2417483
– user2417483, Commented Feb 4, 2014 at 17:53
@jeff if the onclick from the checkbox is canceled, then it would still execute from the <tr>, correct? — Twister1002
– Twister1002, Commented Feb 4, 2014 at 18:07

Premshankar Tiwari · Accepted Answer · 2014-02-05 17:56:51Z

1

There are many ways of fixing it...

(1) This is the way I fixed same issue...because I also wanted custom checkboxes...

You can use images of checked and unchecked boxes instead of checkbox and toggle the src on tr click...

Also you have provided same id checkbox to all td which wont work...

function toggleRowSelection(row){
   if(row.getElementsByTagName('img')[0].src == "checked.jpg")
       row.getElementsByTagName('img')[0].src = "unchecked.jpg"
   else
       row.getElementsByTagName('img')[0].src = "checked.jpg"
}

HTML (approx.)

<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>
<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>

(2) Get the element which is clicked in the row using event.target and if it is td check/uncheck the checkbox.....

and if it is checkbox just perform your operations

(3) Also check event.preventDefault() and event.stopPropagation() ...it might help you

edited Feb 5, 2014 at 17:56

answered Feb 5, 2014 at 17:31

Premshankar Tiwari

3,1263 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Twister1002 Over a year ago

Is there a way to just prevent the checkbox from taking any actions?

Premshankar Tiwari Over a year ago

check the 3rd point... event.stopPropagation() is used to stop the click event propagation on parent elements....

Collectives™ on Stack Overflow

onClick functions executes twice

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related