<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h4>Bootstrap Snipp for Modal Data</h4> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#infomodal" >Open Modal</button> </p> <p data-placement="top" data-toggle="tooltip" title="Edit"> <input type="text" id="dataarea"> </p> <div class="modal fade" id="infomodal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog" style="width:1200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Service Data</h4> </div> <div class="modal-body"> <table id="mytable" class="table table-bordred table-striped"> <thead> <th></th> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Address</th> <th>Email</th> <th>Contact</th> </thead> <tbody> <tr> <td> <input type="radio" id="selectedradio" name="selectedradio" value="1" class="checkthis" /> </td> <td>1</td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> </tr> <tr> <td><input type="radio" id="selectedradio" name="selectedradio" value="2" class="checkthis" /></td> <td>2</td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> </tr> <tr> <td><input type="radio" id="selectedradio" name="selectedradio" value="3" class="checkthis" /></td> <td>3</td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> </tr> <tr> <td><input type="radio" id="selectedradio" name="selectedradio" value="4" class="checkthis" /></td> <td>4</td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> </tr> </tbody> </table> </div> <div class="modal-footer "> <button type="button" class="btn btn-success" id="dataselect"><span class="glyphicon glyphicon-ok-sign"></span>Select</button> </div> </div> </div> </div> </div> </div> </div>

$(document).ready(function(){ $("#dataselect").click(function () { var selectedlength = $("input[type='radio'][name='selectedradio']:checked").length; if(selectedlength > 0){ var selectedValue = $("input[type='radio'][name='selectedradio']:checked").val(); $('#dataarea').val(selectedValue); $('#infomodal').modal('hide'); } }); });