JavaScript Function is run twice?

Question

I'm a little bit confused.

I have a checkbox that a user can click which determines whether a Private Phone number on my page should be visible to all or only the administration. When the box is clicked I wanna make sure you are allowed to first then print the state of it just for testing purposes. And when I run this function, it's run twice.

I read somewhere else that it's because of Callbacks? But I am returning False so this shouldn't be the case right?

I am not a JavaScript wizard so there are many things I still don't know about JavaScript and its interaction with ASP.

/**
* Used to Check whether a Private Phone number should be hidden or shown.
*/
function ValidateHidePrivate() {
    if (scope["pickeduser"] != scope["credential"]) {
        alert("Not allowed");
        return false;
    } else {
        alert(document.getElementById("HidePrivate").checked);
        return false;
    }
}

And the HTML:

<label for="HidePrivate" onclick="ValidateHidePrivate()">
    <input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" />
    Hide my Private Phone Number
</label>

Any help?

@Tushar I accidentally posted the question too early. Yes, it's with a Label. Just added the part. — OmniOwl, Apr 20 '17 at 07:54

Mihai Alexandru-Ionut · Accepted Answer · 2017-04-20T09:08:48.660

It's because a <label> with a for attribute raises the click event of <input type="checkbox"> element that is associated for when clicked.

You should bind click event handler to input, not to label.

function ValidateHidePrivate() {
      alert();
}

<label for="HidePrivate" >
    <input type="checkbox" name="HidePrivate" onclick="ValidateHidePrivate()" id="HidePrivate" value="no" />
    Hide my Private Phone Number
</label>

score 4 · Answer 2 · answered Apr 20 '17 at 07:55

4

When you click your label, may it be there is event click runs also on checkbox? Try to add event.stopPropagation() inside your function.

answered Apr 20 '17 at 07:55

Brissy

349
1
2
10

It's still run twice even after adding that. – OmniOwl Apr 20 '17 at 07:59
It worked for me, I'm programming an extension for Chrome, and I'm using Jquery. I used the same command in my event and it worked! Thank you very much! – Gabriel Moreira Dec 15 '22 at 12:46

brk · Answer 3 · 2017-04-20T08:01:17.273

1

Add onclick event handler in only on input. Also the input is nested inside label .

Hope this snippet will be useful

HTML

<input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" onclick="ValidateHidePrivate()" />

<label for="HidePrivate">
  Hide my Private Phone Number
</label>

JS

function ValidateHidePrivate() {
  // rest of code
}

DEMO

edited Apr 20 '17 at 08:01

answered Apr 20 '17 at 07:59

brk

48,835
10
56
78

JavaScript Function is run twice?

3 Answers3