Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile onchange event of checkbox in client side

    hi friends,

    Is there a method to call a javascript function on change of the state of a checkbox control in asp.net without having postback the control.

    it generates following html source at the client end.

    input id="chkInterest1" type="checkbox" name="chkInterest1" /><label for="chkInterest1">Interest1</label>


    thanks in advance

    regards
    sugeet

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    better us onclick

    <input id="chkInterest1" type="checkbox" name="chkInterest1" onclick="if(this.checked){myFunction()}"/><label for="chkInterest1">Interest1</label>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Be aware of the difference between using onclick and onchange on a checkboxes (and radio buttons). OnClick happens BEFORE the change occurs, so if you click a checkbox that is currently checked, onclick will see the box as checked and onchange will see it as unchecked.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Beagle
    Be aware of the difference between using onclick and onchange on a checkboxes (and radio buttons). OnClick happens BEFORE the change occurs, so if you click a checkbox that is currently checked, onclick will see the box as checked and onchange will see it as unchecked.
    Really?:

    <input id="chkInterest1" type="checkbox" name="chkInterest1" onclick="alert(this.checked)"/>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Hmmm, I could've sworn that worked.... but you're right.

    Very interesting indeed. If you return false from the onclick event, the checkbox will change on the event firing and then change back when you return false. I have a feeling that's not supposed to happen, I'll do some digging.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ussually almost all the events will fire first the javascript function than their default HTML action - if any, for instance onsubmit. For unknown reasons (or for good reasons) onclick (and onkeyup, and some other few, I guess) do the opposite.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    No, that's no entirely true. onclick fires before the default action for hrefs, which is why you can cancel the link before you follow it.

    That leads me to believe that there's something weird going on with the way checkboxes handle onclick, but it's definitely not onclick across the board.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Maybe this is the form's controls behaviour...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Nope, just tested a submit button with onclick = return false and it doesn't submit the form. So it looks like the checkbox. I'm gonna test radios.

  • #10
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    I created 4 radio buttons, none default selected, each with onclick="alert(this.checked);return false;"

    If you none are selected when you click one it alerts true and selects it.
    But then, if you click any other one after that, you get an alert that says true, and visually, the radio button selection has changed, but when click "OK" on the alert, the radio button snaps back to the first one you selected.

    So radios and checkboxes act weird with onclick.

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    don't, is the same as checkboxes, I know that for long while. I use onclick and this.checked for long time ago to validade or calculate values for checkboxes and radios.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Interesting is also that the "unsual" behaviour, as you say, it applies for the associated lebels as well

    Code:
    <input id="chkInterest1" type="checkbox" name="chkInterest1" onclick="alert(this.checked)"/><label for="chkInterest1">Interest1</label>
    <input id="chkInterest2" type="checkbox" name="chkInterest2" onclick="alert(this.checked)"/><label for="chkInterest2">Interest2</label>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #13
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    I understand that this has been the behavior for some time, but doesn't it seem unusual that instead of cancelling the default behavior, the default behavior actually happens and then you reverse it? What could be the explanation for this? Why would you cancel the default action before it happens on links and on buttons, but not checkboxes or radio buttons?

    And why is it that for radio buttons, if none is selected, and you return false onclick (which should cancel the default behavior) it still selects one the first time but not subsequent times?

    I'm going to have dig through the w3c dom standard on this to see what they have to say about some of it, but I'm currently of the opinion that this is not standards compliant behavior.

  • #14
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I don't think is non-standard. As a coder I feel that for checkboxes and radios things must be exactly like they are. I do need to have the HTML checked status triggered before I do something with my function.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #15
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    But that's what onchange would be for. If you want to fire an event when the checkbox value changes, that's one thing. If you want to prevent the checkbox from changing values when someone clicks on it (based on some dynamic conditions) then you have onclick for that. If you return false on the onclick, it even squelches the "change" event from firing, but somehow the value of the checkbox is changed ONLY for the duration of the click event. It just doesn't make sense.

    I don't think it's necessary or even sensible for the onclick behavior to do what it's doing when you have onchange to satisfy the need you have.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •