Get table row based on radio button using prototype/javascript

Posted by David Buckley on Stack Overflow See other posts from Stack Overflow or by David Buckley
Published on 2010-06-08T16:42:22Z Indexed on 2010/06/08 17:12 UTC
Read the original article Hit count: 251

Filed under:
|
|
|
|

I have an html table that has a name and a radio button like so:

<table id="cars">
  <thead>
    <tr>
      <th>Car Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="car">Ford Focus</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="8398"></td>
    </tr>

    <tr>
      <td class="car">Lincoln Navigator</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="2994"></td>
    </tr>

  </tbody>
</table>
<input type="button" value="Select Car" onclick="selectCar()"></input>

I want to be able to select a radio button, then click another button and get the value of the radio button (which is a unique ID) as well as the car name text (like Ford Focus). How should I code the selectCar method? I've tried a few things like:

val1 = $('tr input[name=selectedCar]:checked').parent().find('#cars').html();
val1 = $("td input[name='selectedCar']:checked").parents().find('.cars').html();
val1 = $('selectedCar').checked;

but I can't get the proper values.

I'm using prototype, but the solution can be plain javascript as well.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html