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 stackoverflow.com/questions/30330936/… — top.dev
– top.dev, Commented May 20, 2015 at 9: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
– Johan Björklund, Commented May 20, 2015 at 13:36

Johan Björklund · Accepted Answer · 2015-05-21 07:16:57Z

0

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

answered May 21, 2015 at 7:16

Johan Björklund

7842 gold badges7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related