javascript - fetching the <input> element value -

i have <table> , rows (varies depending on query run ) can radio button , <th> , <input> , want catch <input> value further processing please guide me

my html code

<tr>     <th>         <input type="radio" name="assignradio">     </th>     <th> <?= $nearestresponders[ $i ]->get('firstname') . " " . $nearestresponders[ $i ]->get('lastname'); ?></th>     <th> <?= $companyname; ?></th>     <th> <?= $nearestresponders[ $i ]->get('contactnumber'); ?></th>     <th> <?= $presentcity; ?></th>     <th><?= $distanceinkm; ?></th>     <input class="selectedresponder" type="hidden" value="<?= $nearestresponders[ $i ]->getobjectid(); ?>"> </tr> </table> 

my jquery code

$('input[name=assignradio]').on('change',function(){     console.log($(this).val());     console.log($(this).next('.selectedresponder').val());     console.log($(this).closest('.selectedresponder').val());     console.log($(this).find('.selectedresponder').val()); }); 

as can see tried methods value failed please advise

your issue due way have traverse dom find target element. it's not sibling or parent of radio button, none of methods you've tried work.

instead can use closest() find nearest common parent, tr, find() element there, this:

$('input[name=assignradio]').on('change', function() {    var $selectedresponder = $(this).closest('tr').find('.selectedresponder');    console.log($selectedresponder.val());  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tr>      <th>        <input type="radio" name="assignradio">      </th>      <th>firstname lastname</th>      <th>company name</th>      <th>contact number</th>      <th>present city</th>      <th>distance</th>      <input class="selectedresponder" type="hidden" value="foo">    </tr>    <tr>      <th>        <input type="radio" name="assignradio">      </th>      <th>firstname lastname</th>      <th>company name</th>      <th>contact number</th>      <th>present city</th>      <th>distance</th>      <input class="selectedresponder" type="hidden" value="bar">    </tr>  </table>