Inserting values from table row into form input

Question

<tr class="entries">
        <td class="lalign"><?php echo($place); ?></td>
        <td><?php echo($title); ?></td>
        <td><?php echo($genre); ?></td>
        <td><?php echo($year); ?></td>
        <td><?php echo($director); ?></td>
        <td class="hiddenInfo"><?php echo($actors); ?></td>
        <td class="hiddenInfo"><?php echo($format); ?></td>
        <td class="hiddenInfo"><?php echo($id); ?></td>
        <td><?php if(empty($link)==false){?><a href="<?php echo($link); ?>" target="_blank"><p>IMDB</p></a><?php } else {?> <p>N/A</p><?php }?></td>
</tr>

<div id="movieUpdate">

<h3>UPDATE MOVIE</h3>

    <form action="index.php" method="POST">

    <div class="formRow">
        <input class="searchField" type="text" name="id" placeholder="ID"/>
    </div>
    <div class="formRow">
        <input class="searchField" type="text" name="place" placeholder="Placering"/>
    </div>
    <div class="formRow">
        <input class="searchField" type="text" name="title" placeholder="Titel"/>
    </div>

    <div class="formRow">
        <input class="searchField" type="text" name="director" placeholder="Regissör"/>
    </div>

    <div class="formRow">
        <input class="searchField" type="text" name="actors" placeholder="Skådisar"/>
    </div>

    <div class="formRow">
        <input class="searchField" type="text" name="genre" placeholder="Genre"/>
    </div>

    <div class="formRow">
        <input class="searchField" type="number" name="year" placeholder="År"/>
    </div>

    <div class="formRow">
        <input class="searchField" type="text" name="format" placeholder="Format"/>
    </div>
    <div class="formRow">

        <input class="searchField" type="text" name="link" placeholder="Länk"/>
    </div>

    <input id="submitButton" type="submit" value="Submit" />

</form>

If I want to make clicking the tr fill the fields of the form inside #movieUpdate. How would I go about doing that? I have tried re-purposing the code from this question(Fill inputs by clicking on div - jQuery) but have had no luck.

You where wanting to do this in JavaScript? I ask because there is no JS posted in your question. — MattSizzle, Dec 14 '15 at 20:08
Possible duplicate of [jQuery: Insert text to textarea](http://stackoverflow.com/questions/1882890/jquery-insert-text-to-textarea) — zod, Dec 14 '15 at 20:11
@zod, close to a duplicate of [this](http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery), but not directly. The user who posted the question will need to include the JavaScript code they have tried to use in order to get assistance with this question (which will meet the quality question requirements after) — MattSizzle, Dec 14 '15 at 20:24

score 0 · Answer 1 · answered Dec 15 '15 at 16:46

It's exactly the solution of the other question you mentioned. Your problem is that you need to adjust the 3 selectors to match your code.

$('tr') to match each row
$(this).find('td') to match each cell in the clicked row
$('input:not([type="submit"])') to match each (non-submit) input in the form

Something like this should do the trick:

$(function () {
    $('tr').click(function() {
        var data = $(this).find('td').map(function () {
            return this.innerHTML;
            // or return $(this).text();
        }).get();

        $('input:not([type="submit"])').each(function (i) {
            this.value = data[i];
            // or  $(this).val(data[i]);
        });
    });
});

Be careful, the input fields in your form should have the exact same order and number as the ones in each tr.

Inserting values from table row into form input

1 Answers1