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
– MattSizzle, Commented Dec 14, 2015 at 20:08
@zod, close to a duplicate of this, 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
– MattSizzle, Commented Dec 14, 2015 at 20:24

Skwal · Accepted Answer · 2015-12-15 16:46:14Z

0

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.

answered Dec 15, 2015 at 16:46

Skwal

2,1562 gold badges21 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Inserting values from table row into form input

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