Question

I’m looking for a way through jQuery/Javascript to fill up some input fields with data I get out of a table. The table I have looks like this:

<tr>
        <th>ticketID</th>
            <th>eventID</th>
            <th>name</th>
            <th>price</th>
            <th>priceWithinAllocation</th>
          <th>&nbsp;</th>
</tr>
<tr >
      <td class="ticketID">1</td>
      <td class="eventID">1</td>
      <td class="name">Sun</td>
      <td class="price">300</td>
      td class="priceWithinAllocation">150</td>
      <td align="center"><input type="button" class="editRow" value="EDIT"/></td>
</tr>
<tr >
      <td class="ticketID">2</td>
      <td class="eventID">1</td>
      <td class="name">Mon</td>
      <td class="price">300</td>
      <td class="priceWithinAllocation">150</td>
        <td align="center"><input type="button" class="editRow" value="EDIT"/></td>
</tr>

I also have a form which I want the values to appear in. However, not all values should appear there.

<p>
<label for="">Name:</label>
<input type="text" name="name" />   

</p>
<p>
<label for="">Price:</label>
<input type="text" name="price" />  

</p>
<p>
<label for="">PriceWithinAllocation:</label>
<input type="text" name="priceWithinAllocation" />  

So, say I click on the EDIT button of the first row, I want the name, price and pricewithinallocation to appear in my input fields. However, I see no way to do this. I tried with some jquery DOM traversal, but that didn’t work out exactly. Anyone see any solution here? Is this even possible?

</p>
<p>
<input type="submit" id="saveNew" value="SAVE" />
<input type="button" id="cancelNew" value="CANCEL" />                                

Answer 1

Try this:

$(function(){
    $(".editRow").click(function(){
        var name = $(this).parent().siblings(".name").text();
        var price = $(this).parent().siblings(".price").text();
        var priceWithinAllocation = $(this).parent().siblings(".priceWithinAllocation").text();
        $("[name='name']").val(name);
        $("[name='price']").val(price);
        $("[name='priceWithinAllocation']").val(priceWithinAllocation);
    });
});

Working example: http://jsfiddle.net/2QVQ6/

Alternative:

$(function(){
    $(".editRow").click(function(){
        $("[name='name']").val($(this).parent().siblings(".name").text());
        $("[name='price']").val($(this).parent().siblings(".price").text());
        $("[name='priceWithinAllocation']").val($(this).parent().siblings(".priceWithinAllocation").text());
    });
})