fetching the <input> element value

Question

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

Try not to include your php file, rather actually get the final HTML and paste it here. Making a replicable jsfiddle or snippet would help. — A. L
– A. L, Commented Apr 6, 2017 at 10:37

Rory McCrossan · Accepted Answer · 2017-04-06 10:37:14Z

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>

TSlegaitis · Accepted Answer · 2017-04-06 10:32:55Z

0

This should work:

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

answered Apr 6, 2017 at 10:32

TSlegaitis

1,3202 gold badges16 silver badges30 bronze badges

1 Comment

Dhaval Chheda Over a year ago

This selects the first <input> in the table and not the one that was selected..I have multiple rows and i need to the know the <input> of the row that was clicked

Collectives™ on Stack Overflow

fetching the <input> element value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related