I have two radio buttons as following in a form

<input type="radio" name="advice" value="office" class="office">
<input type="radio" name="advice" value="phone">

When i select the office radio button, I want to display a popup. This is working perfectly fine using the following script

$(function () {
    $('.office').click(function (e) {
        e.preventDefault();
        var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });
    });
});

The problem I am having is although on selecting the radio button office popup appears but the radio button is actually not getting selected. The DOT in radio button remains inside the other radio button, so on submitting the form i keep getting the value of same radio button.

I will really appreciate any help.

I have two radio buttons as following in a form

<input type="radio" name="advice" value="office" class="office">
<input type="radio" name="advice" value="phone">

When i select the office radio button, I want to display a popup. This is working perfectly fine using the following script

$(function () {
    $('.office').click(function (e) {
        e.preventDefault();
        var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });
    });
});

The problem I am having is although on selecting the radio button office popup appears but the radio button is actually not getting selected. The DOT in radio button remains inside the other radio button, so on submitting the form i keep getting the value of same radio button.

I will really appreciate any help.

• javascript
• jquery
• html

5 Answers 5

use change event by this when radio box change then dialog box open but now when you click dialog box open but not selected due to it's not open on change event

$(function () {
    $('.office').change(function (e) {
        e.preventDefault();
        var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });
    });
});

Just remove e.preventDefault(), Here's a fiddle

I think you should use change at the place of click

or you just remove e.preventDefault();

$(function () {
  $('.office').change(function (e) {
    var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
      buttons: {
       "Close": function () {
         dialog.dialog('close');
       }
     }
    });
  });
});

Simply use jQuery .change() event, no need to bother about it.

$('.office').change(function (e) {
   ....
}

Use change function. Click won't work in this scenario.

Check this Fiddle

HTML

<input type="radio" name="advice" value="office" class="office">Office
<input type="radio" name="advice" value="phone" class="phone">Phone
<div id="dialog_content"></div>

jQuery

$(function () {
    var dialog = $('#dialog_content').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });

         dialog.dialog('close');

    $('.office').change(function (e) {
        dialog.dialog('close');
        $('#dialog_content').html('<p>Please be aware that our office is located at ABC.</p>');
        dialog.dialog('open');
    });

    $('.phone').change(function (e) {
        dialog.dialog('close');
        $('#dialog_content').html('<p>This is Phone dialog.</p>');
        dialog.dialog('open');
    });
});