Automatically filling out a form when clicking a table row with javascript/jquery

Question

I have a dynamically generated table that looks like this

<table width="100%">
    <tr>
        <th>Client ID</th>
        <th>Shortname</th>
        <th>Client Name</th>
        <th>Client Name 2</th>
    </tr>
@foreach($clients as $client)
    <tr>
        <td>{{$client->customer_id}}</td>
        <td>{{$client->shortname}}</td>
        <td>{{$client->customer}}</td>
        <td>{{$client->customer_row2}}</td>
    </tr>
@endforeach

I would like to be able to click on a row, and automatically populate a form with the information in the table row.

I have thought of a solution that i think should work, but I haven't really got the JS skills to write the code. This is what im thinking:

{{$row=1}}
<table width="100%">
        <tr>
            <th>Client ID</th>
            <th>Shortname</th>
            <th>Client Name</th>
            <th>Client Name 2</th>
        </tr>
    @foreach($clients as $client)
        <tr id="row{{$num}}">
            <td class="clientId">{{$client->customer_id}}</td>
            <td class="shortname">{{$client->shortname}}</td>
            <td class="client">{{$client->customer}}</td>
            <td class="clientRow2">{{$client->customer_row2}}</td>
        </tr>
    {{$row++}}
    @endforeach

And here's some psuedo code to help you understand what im thinking:

onclick getElementById(.this)
input element with id clientId .put(this.#clientId)
input element with id shortname .put(this.#shortname)
input element with id client .put(this.#client)
input element with id clientRow2 .put(this.#clientRow2)

I hope that everybody understands what i'm trying to accomplish, and that someone is willing to help

Regards Johan

Your question is similar to the topic http://stackoverflow.com/questions/30330936/fill-form-with-table-row-data-using-javascript/30331939#30331939 — top.dev, May 20 '15 at 09:36
Hi, thanks for answering, I saw that post, and tried to change the jsfiddle that you created, but i was unable to make it work. Since i'm not very good at JS, something that applies more directly to my question, or information that is more general would be appriciated @top.dev — Johan Björklund, May 20 '15 at 13:36

score 0 · Accepted Answer · answered May 21 '15 at 07:16

I ended up doing this:

<tr onclick="var td = $(this).find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();
var row4 = td.eq(3).html();
$('.input1').val(row1);
$('.input2').val(row2);
$('.input3').val(row3);
$('.input4').val(row4);">

on each table row, not very elegant, but it gets the job done

Automatically filling out a form when clicking a table row with javascript/jquery

1 Answers1