CODEWITHSUNDEEP
javascriptjquery
Dhaval Chheda
Dhaval Chheda

Reputation: 5147

fetching the <input> element value

I have a <table> and some rows (varies depending on the query run ) where I can a radio button and some <th> and an <input> and I want to catch that <input> value for further processing so 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 you can see I tried some methods to get the value but failed so please advise

Upvotes: 1

Views: 48

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your issue is due to the way you have to traverse the DOM to find your target element. It's not a sibling or parent of the radio button, so none of the methods you've tried will work.

Instead you can use closest() to find the nearest common parent, the tr, then find() the element from there, like 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>

Upvotes: 1

TSlegaitis
TSlegaitis

Reputation: 1310

This should work:

$('input[name="assignRadio"]').on('change',function(){
            console.log($('.selectedResponder').val());
        });

Upvotes: 0

Related Questions