jQuery click / change function on radio button set

Question

I have a radio button set called "pick_up_point". There are 3 options and clicking on an option will display a set of input fields relevant to the option.

Now by default when the user clicks on an option I run the change() function which will run a function called "clearInputFields" - which as you might guess will clear out any text entered in the input fields.

$("input[name='pick_up_point']").change(function()
{
 clearInputFields(); 
});

Now I have tried extending this so that a prompt is displayed to the user to let them know that the input fields will be cleared:

$("input[name='pick_up_point']").click(function(event)
{
 if(confirm('Address details will be cleared. Continue?'))
 {
  return true;
 }
 else
 {
  return false;
 }
});

The 'click' function is before the 'change' function.

This works "OK" in Firefox and does not work properly in IE.

In Firefox the radio button gets selected and the prompt is displayed, and clicking on the Cancel button will go back to the previous option with all values retained.

In IE the radio button gets selected and the prompt is displayed but the values get cleared out. If you click Cancel then no radio button is selected.

The way I would like this to work is if you click another radio button it should not select it unless you click OK on the prompt. If you click Cancel the values should be retained.

bobince · Accepted Answer · 2010-08-09 13:44:35Z

13

In IE, the change event on checkboxes and radio buttons doesn't fire immediately, but only after the field has been unfocused. In this way it behaves like text input boxes.

jQuery monkeys about with the change event quite significantly, in a way that hides this behaviour from you. However it is unable to accurately reproduce the behaviour of other browsers in IE, so in some cases it will trigger change in response to interaction with an element even when another click event handler tries to preventDefault.

Another problem: in IE, if you return false from click on a radio button, the new radio button won't get checked, but the previous button will still lose its checkedness, leaving you with no radios checked!

So you'll probably have to do some kind of annoying state-tracking, and manually put the radio buttons back to their old state when the confirm is refused. eg.:

var currentradio= $("input[name='pick_up_point']:checked")[0];
$("input[name='pick_up_point']").change(function(event) {
    var newradio= $("input[name='pick_up_point']:checked")[0];

    if (newradio===currentradio)
        return;
    if (confirm('Address details will be cleared. Continue?')) {
        clearInputFields();
        currentradio= newradio;
    } else {
        currentradio.checked= true;
    }
});

edited Aug 9, 2010 at 13:44

answered Aug 9, 2010 at 13:33

bobince

538k111 gold badges675 silver badges846 bronze badges

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

1 Comment

Mark Schultheiss Over a year ago

This is true as you can see from the demontrations I put together as part of my answer.

Mark Schultheiss · Accepted Answer · 2010-08-09 14:38:31Z

In order to ensure that the selection actually changed place the function call in the .change event handler and REMOVE the .click event handler.

$("input[name='pick_up_point']").change(function(event) 
{ 
 if(confirm('Address details will be cleared. Continue?')) 
 { 
   clearInputFields();  
   return true; 
 } 
 else 
 { 
  return false; 
 } 
});

Not really sure you need the return xx statements but I don't know the rest of you code base so I left them in there.

EDIT:

To demonstrate the effect of the .change vs the .click (on actual changes) I have put together a small demo here:

http://jsfiddle.net/KMjan/

Note the counter increments and displays at the bottom (not fancy, but demonstrates the point)

EDIT2: Added some indication of the effect of calling a clear function within the events for .click and .change

http://jsfiddle.net/KMjan/1/

EDIT3: Added another demonstration where I set the background color on event bubble to the parent div to demonstrate the effects of the return value (true and false) - just click the same radio buttons multiple times, and change - use the negative and positive answers to view the results of each choice.

http://jsfiddle.net/KMjan/3/

These show the need for the event propogation methods you might want to investigate if the effect there is not as desired.
See this page for details on event propogation: http://api.jquery.com/category/events/

Collectives™ on Stack Overflow

jQuery click / change function on radio button set

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related