SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Triggering radio button event

    I want an event trigger to call an AJAX function on a radio button element when it changes as a result of another button being selected.

    Using ONCHANGE has no effect. It triggers the event when that button is selected, but nothing happens when it is unselected as a result of another button being selected.

    I'm doing something like this:

    if (button1.checked) {do action1} else {do action2};

    When I click on that button, action1 takes place, but when I click another button, either nothing happens or action1 takes place again (I can't tell which, I just know the state doesn't change).

    As far as I can figure, being unselected by clicking on another button either does not create an ONCHANGE event for the button previously selected or it happens before its "checked" state changes so my function thinks it is still checked.

    Can anyone help me with this?

    Thanks,

    --Kenoli

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You probably need to use an elements click() method.

    This is a quick demo.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
     
    function myFunction(status) {
         if(status) {
             alert("Do this");
         } else {
             alert("Do something else");
         }
    }
     
    </script>
     
    </head>
    <body>
    <div>
     
    <input type="checkbox" onclick="document.getElementById('chk1').click();">Click me to click "Checkbox 2"
     
    <br /><br /><br />
     
    <input type="checkbox" name="chk1" id="chk1" value="chk1_value" onclick="myFunction(this.checked)"> Checkbox 2
     
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but, as you demonstrate, what I am struggling with works fine with checkboxes. When I check or uncheck the box, an ONCLICK event handler fires and triggers my function related to that element in either case. The problem I have is with radio buttons. When I click one button it triggers an event for that radio button element the way I want it to. When I click another button which unchecks the first button, I want an event handler to fire and trigger a function that makes changes to the first button. If it were only two buttons, I could trigger a function on the second button and have that function make the changes I want to the first button. The problem is I have a number of buttons so the function would have to make changes to all of them which is starting to sound a bit rube goldbergish.

    I'm looking for an event handler that will fire for a radio button when a click to another button unsets it.

    --Kenoli

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, it's not clear to me exactly what you want from the description in your post. I would have thought you could modify the demo code to suit radio buttons.

    It will help if you post your code and explain exactly what should happen when any particular button in your code is clicked.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will send the code. I will have to condense it as it includes some AJAX calls and other functions that make it hard to follow.

    The root of my question is this: What event trigger fires when a radio button is deselected when another button is checked?

  6. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whisher -- I get an error when I try to go to the link in your email.

    Kalon -- I hope I inserted this code correctly and I hope it demonstrates my issue.

    If you will notice, there is an onchange event trigger atttached to each radio button and checkbox in the html code. In theory a change in state from checked to unchecked should fire the onchange event.

    This happens as expected with the check boxes. If you check one, you get the alert, 'Your item is changed to checked'. If you uncheck it, you get the alert, 'Your item is changed to unchecked'.

    With the radio buttons, when you check button one, you get, as expected, the alert, 'Your item is changed to checked' since the button changed from unchecked to checked. However, when you check the second button and the first radio button is changed from checked to unchecked the "onchange" event trigger does not fire and the 'else' alert is not triggered.

    So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked?

    I appreciate everyone's assistance on this.

    --Kenoli

    Code JavaScript:
     
    <html>
    <head>
    <title></title>
     
    <script type="text/javascript">
     
    function clickAction() {
     
    //alert ('Your item changed');
     
    if (this.checked == true) {alert ('Your item is changed to checked');}
     
    else if (this.checked == false) {alert('Your item is changed to unchecked');}
     
    }
     
     
     
    </script>
     
    <script type="text/javascript">
     
    function initializeToggles() {
     
    var button1= document.getElementById('button1');
    button1.onchange = clickAction;
     
    var box1= document.getElementById('box1');
    box1.onchange = clickAction;
     
    var box2= document.getElementById('box2');
    box2.onchange = clickAction;
     
    }
     
    </script>
     
    <script type="text/javascript">window.onload = initializeToggles;</script>
     
    </head>
    <body>
     
    <input type="radio" name="testRadio" id="button1" >Button one<br/>
    <input type="radio" name="testRadio" id="button2" >Button two<br/><br/>
     
    <input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
    <input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>
     
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got an answer from another forum. there doesn't seem to be an event trigger for the event. I will try to do it another way.

    Thanks all,

    --Kenoli

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenoli View Post
    So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked?
    I'm not sure if an even trigger is fired for the radio button in this case.

    I am still not exactly sure what you want to happen when each checkbox is clicked. It would help if you state exactly what you want to happen when a particular checkbox is clicked.

    Guessing a bit as to what you want, the code below has your 2 radio buttons and checkboxes. Checkbox 1 clicks radio button 1 and checkbox 2 clicks radio button 2. When a radio button is clicked, either directly or indirectly by a checkbox, clickAction() checks each radio button to see whether it is now checked or unchecked and alerts an appropriate message.

    Code:
     
    <html>
    <head>
    <title></title>
     
    <script type="text/javascript">
     
    function clickAction() {
     for(var i=0; i < radBtns.length; i++) {
         if(radBtns[i].checked) {
             alert(radBtns[i].id + ' is checked');
            } else {
             alert(radBtns[i].id + ' is unchecked');
            }
        }
    }
     
    function clickRadBtn(elemId) {
         document.getElementById(elemId).click();
    }
     
    var radBtns = new Array();
    window.onload=function() {
         radBtns = document.getElementsByName('btnRad');
    }
     
    </script>
    </head>
    <body>
     
    <input type="radio" name="btnRad" id="btnRad1" onclick="clickAction();" />Button one<br/>
    <input type="radio" name="btnRad" id="btnRad2" onclick="clickAction();" />Button two<br/><br/>
     
    <input type="checkbox" name="chkBox1" onclick="clickRadBtn('btnRad1')" />Box one<br/>
    <input type="checkbox" name="chkBox2"  onclick="clickRadBtn('btnRad2')"  />Box two<br/><br/>
     
    </body>
    </html>


Bookmarks

Posting Permissions

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