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>
Comments
Post a Comment