Unable to get Radio button value on clicking button - html

Question

I have radio buttons for each row of my table. On clicking radio button and clicking on submit button selected values must appear in the dialogue box.
My code is:
<form action="" method="POST">
<table border="1" id="escalationTable" >
<thead>
<tr>
<td style="width: 20px;"></td>
<td><h3>Date<h3></td>
<td><h3>Status<h3></td>
<td><h3>Ward<h3></td>
<td><h3>Source Address<h3></td>
<td><h3>Escalated by MPW on<h3></td>
<td><h3>Action to be taken<h3></td>
</tr>
</thead>
<tbody>
<?php for($i=$start;$i<$end;$i++)
{
$address=$ARRAY[$i]['source_address'];
$add=str_replace('"',"'",$address);
$wardd=$ARRAY[$i]['ward_name'];
$typo=$ARRAY[$i]['type_desc'];
$action=$ARRAY[$i]['action_required'];
$Reptime = date('d-m-Y',strtotime($ARRAY[$i]['source_repTime']));
$category=$ARRAY[$i]['scat_desc'];
$subtype_s=$ARRAY[$i]['subtype_desc'];
$credai_s=$ARRAY[$i]['source_credai'];
$floor=$ARRAY[$i]['source_floorNo'];
$breed_s=$ARRAY[$i]['source_breedingSite'];
$recc_s=$ARRAY[$i]['source_recurrence'];
$closedate = date('d-m-Y',strtotime($ARRAY[$i]['action_closeDate']));
$statuss=$ARRAY[$i]['escl_status'];
$source_id=$ARRAY[$i]['source_id'];
$escl_id=$ARRAY[$i]['escl_id'];
$comma="(!#!)";
$tot1=$add.$comma.$wardd.$comma.$typo.$comma.$action.$comma.$Reptime.$comma.$category.$comma;
$tot2=$subtype_s.$comma.$credai_s.$comma.$floor.$comma.$breed_s.$comma.$recc_s.$comma.$closedate.$comma.$statuss.$comma.$source_id.$comma.$escl_id;
$total=$tot1.$tot2;
?><tr>
<td><input type="radio" name="ID[]" value="<?php echo $total; ?>" <?php echo $_POST['ID'][0]==$total ? 'checked':'';?> required /></td>
<?php
$dmydate = date('d-m-Y',strtotime($ARRAY[$i]['escl_date']));
echo'<td>'.$dmydate.'</td>';
echo'<td>'.$ARRAY[$i]['escl_status'].'</td>';
echo'<td>'.$ARRAY[$i]['ward_name'].'</td>';
echo'<td>'.$ARRAY[$i]['source_address'].'</td>';
echo'<td>'.$ARRAY[$i]['source_escMPW_Date'].'</td>';
echo'<td>'.$ARRAY[$i]['action_required'].'</td>';
?>
</tr>
<?php }?>
</tbody>
</table>
<div id="RecordNo">
<?php echo"<p id='messages'>$records:$match</p>";?>
</div>
<table id="escButtons">
<tr>
<td>
<input type="submit" name="details" value="Details" id="btndetails" />
</td>
</tr>
</table>
<?php
if(isset($_POST['details']))
{
$n=$_POST['ID'];
$a=implode("</br>",$n);
echo"</br>";
list($add, $ward,$typo,$action,$Reptime,$category,$subtype_s,$credai_s,$floor,$breed_s,$recc_s,$closedate) = explode("(!#!)", $a);
$address=str_replace("'",'"',$add);
if($breed_s=='1')
{$breed_s="Yes";}
else{$breed_s="No";}
if($recc_s=='1')
{$recc_s="Yes";}
else{$recc_s="No";}
?><div id="element_to_pop_up">
<a class="b-close">x<a/>
<table id="RowDetails">
<tr>
<td>
<ul><?php echo"<b>Source reported date:</b>$Reptime</br>";?></ul>
<ul><?php echo"<b>Source Address:</b>$address</br>";?></ul>
<ul><?php echo"<b>Source Category:</b>$category</br>";?></ul>
<ul><?php echo"<b>Source Type:</b>$typo</br>";?></ul>
<ul><?php echo"<b>Source Subtype:</b>$subtype_s</br>";?></ul>
<ul><?php echo"<b>Source CREDAI:</b>$credai_s</br>";?></ul>
<ul><?php echo"<b>Source Floor No :</b>$floor</br>";?></ul>
<ul><?php echo"<b>Breeding site:</b>$breed_s</br>";?></ul>
<ul><?php echo"<b>Recurrence:</b>$recc_s</br>";?></ul>
<ul><?php echo"<b>Source Action Required:</b>$action</br>";?></ul>
<ul><?php echo"<b>Suggested Closure Date:</b>$closedate</br>";?></ul>
</td>
</tr>
</table></div><?php
}
I need my control flow as Click radio->click details button->Pop up with radio button details message. Please help me !

Answer 1

First you dont have any form submit action means you dint submit the form anywhere is the reason you dint get any value from post.If you dont want to reload page you can use jquery to set the value of popup.
Fiddle
Second to place required field in radio button just put required in only one radio button.Source
Do this
<form id="myform">
<p>
Untraced :<input type="radio" name="inc_untraced" value="No" required />No
<input type="radio" name="inc_untraced" value="Yes" />Yes
</p>
<input type="submit" name="details" value="Details" id="my-button" />
</form>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
U have clicked on <?php $_POST['inc_untraced'];?>
</div>
Fiddle

Answer 2

(function($) {
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
if($('input:radio:checked')){
var v = $('input:radio:checked').val();
if(v!=undefined){
$('.radioVal').text(v)
}else{
alert('please select radio button')
return false;
};
}
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
<p>
Untraced :<input type="radio" name="inc_untraced" value="No" required />No
<input type="radio" name="inc_untraced" value="Yes" required />Yes
</p>
<input type="submit" name="details" value="Details" id="my-button" />
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
U have clicked on <span class="radioVal"> </span> <?php $_POST['inc_untraced'];?>
</div>