select radio value from popup modal without reloading page

I have a modal popup. If any clicks on that modal then a popup window opens and radio button appears. If click on any radio button and submit that popup then selected radio value should be show in paragraph tag without reloading page.

I have code but it is not working.

My modal button is: (index.php)

<div id="dvPassport1">
            <div class="col-md-6">
        <label>Select Loyalty Membership</label><br>
        <a class="showModal btn btn-primary btn-xs" data-queryid="q11" > View Loyalty Membership</a>
        <div class="col-md-6">
        <label>Employee IDs</label>

Now If clicks on View Loyalty Membership button then a popup opens (code is below)(index.php):

<!-- popup modal-->
<div id="id01" class="modal">

 <form class="modal-content animate" action="" method="post" autocomplete="off">
<div class="imgcontainer">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>


<div class="container">
     <div class="modalContent"></div>

// Get the modal1
var modal = $("#id01");
$("a.showModal").on("click", function(){
    var id = $(this).attr("data-queryid");
    var modalServiceUrl = "showstate.php?queryid7="+id;
// When the user clicks anywhere outside of the modal1, close it
window.onclick = function(event) {

if ( == modal1) { = "none";
<!-- end popup modal -->

script is(index.php)

$('#btnGetValue').click(function() {
    var selValue = $('input[name=rbnNumber]:checked').val(); 
    $('p').html('<br/>Selected Radio Button Value is : <b>' + selValue + '</b>');


Above all code is in index.php

showstate.php is:


$queryid7 = $_GET['queryid7'];
echo"<div align='center' style='height:660px; overflow:auto;'  class='w3l-table-info'><h2>Select your Loyalty membership</h2><table id='table'><thead>
 $query12=mysql_query("select * from loyalty_group ORDER BY id") or die (mysql_error());
echo"<th><input type='radio' id='rbnNumber' name='rbnNumber' value='$id11'/>".$group_name1.'</th>';

<tr><td>&nbsp;</td><td><br><button type='submit' id='btnGetValue' class='btn btn-primary'>Select</button></td></tr>


Now if any any radio button selects the click on Select button then value of value='$id11' should show in paragraph tag(p)(index.php) without reloading page(index.php) and popup should be close.

1 answer

  • answered 2018-01-14 13:58 user3647971

    Your <button type="submit"></button> sends the form and reloads current page, because <form action=.. is not specified. What you want to use here is <button type="button"></button>