Want to get result from a radio button in popover

Question

My code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h2>Hello</h2>
    <button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="&lt;form id='myform' class='form-horizontal'&gt;
&lt;input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'&gt;
Adult  &lt;br&gt;
&lt;input type='radio' id='rb2' name='keys' value='Child' bind-value='key'&gt;
Child  &lt;br&gt;
&lt;input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'&gt;
Concession  &lt;/form&gt;" data-original-title="Select seat type">Hello
    </button>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#example').popover();
        $('#myform input').on('change', function() {
            alert($('input[name=keys]:checked').val());
        });
    });
    </script>
</body>

</html>

I want to display the value of selected radio button(placed in popover) in an alert. This code somehow doesn't bring up the alert at all. The popover is displayed perfectly and the radio buttons are displayed correctly too. Only the alert doesnt show up on selection of radio button in the popover. Please help!

score 4 · Accepted Answer · answered May 18 '15 at 07:31

The problem was with when to initialize the listener. The form does not exist untill the popup is shown. So you need to initialize the event listener after.

Here is the snippet:

$(document).ready(function() {
  $('#example').popover();

  $('#example').on('shown.bs.popover', function() {
    $('#myform input').on('click', function() {
      alert($('input[name=keys]:checked').val());
    });
  });

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>

<body>
  <h2>Hello</h2>
  <button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="&lt;form id='myform' class='form-horizontal'&gt;
&lt;input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'&gt;
Adult  &lt;br&gt;
&lt;input type='radio' id='rb2' name='keys' value='Child' bind-value='key'&gt;
Child  &lt;br&gt;
&lt;input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'&gt;
Concession  &lt;/form&gt;" data-original-title="Select seat type">Hello
  </button>
</body>

</html>

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Something like this;

$("input:radio[name=keys]").click(function() {
    var value = $(this).val();
    alert(value);
});

Similar answer here; In jQuery, how do I select an element by its name attribute?

edited May 23 '17 at 12:14

Community

1
1

answered May 18 '15 at 07:25

Darren S

920
5
15

score 0 · Answer 3 · answered May 18 '15 at 07:59

$(document).ready(function(){
  $('#example').popover();
  $("form").find('input[type="radio"]').on('change', function() {
     alert($('input[name=keys]:checked').val()); 
  });
 });

Here how i managed to get your goal completed. above is my code for getting alert the value of the the selected radio button.

Want to get result from a radio button in popover

3 Answers3