javascript - 如何将点击事件收集的数据添加到表单中？

Question

我想创建一个功能，当用户单击屏幕上的某个项目(例如“apples”)时，文本“apples”会进入下面名为“item”的输入表单，这样他们就可以更新项目成本想要。

到目前为止，我已经设法在单击某个项目时获取文本，但我还没有设法让文本呈现在表单本身上。我该如何去做呢？

屏幕截图中的食品列表是通过 PHP 查询并创建单独的表生成的。

Javascript:

$(document).ready(function(){

    $('.item').one('click', function(e){
        var txt = $(e.target).text();
        var form = document.forms['item'];
        $(form).append(txt);
        console.log(form);
    });
});

HTML:

<div id="itemListContainer"> 
    <?php
    $sql = "SELECT quanity, package, item, cost, store 
            FROM ingredients
            ORDER BY item, store ";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        echo  "<table class='headertable'>
                    <tr class='tableheader'>
                        <th class='quanity cell'>Quanity</th>
                        <th class='package cell'>Packages</th>
                        <th class='item cell'>Item</th>
                        <th class='cost cell'>Cost</th>
                        <th class='store cell'>Store</th>
                    </tr>
                </table>";
        while($col = $result->fetch_assoc()) {
            echo  "<table>
                        <tr>
                            <td class='quanity cell'>$col[quanity]</td>
                            <td class='package cell'>$col[package]</td>
                            <td class='item cell'>$col[item]</td>
                            <td class='cost cell'>$col[cost] &euro;</td>
                            <td class='store cell'>$col[store]</td>
                        </tr>
                </table>";
        }
    } else {
        echo "no results";
    }
    ?>
</div>

<form id="addingredientsform" action="index.php" method="post">
 <input type="text" name="quanity" size="6" placeholder="Quanity">
 <input type="text" name="package" size="6" placeholder="Packages">
 <input type="text" name="item" size="25" placeholder="Item">
 <input type="text" name="cost" size="5" placeholder="Cost">
 <select name="store" placeholder="Store">
  <option value="Lidl" selected>Lidl</option>
  <option value="S-Mart">S-Mart</option>
  <option value="K-Mart">K-Mart</option>
 </select>
 <input type="submit" name="submit" value="Add Ingredient">
 <input type="submit" name="update" value="Update Ingredient">
</form> 

Answer 1

<强> Working fiddle 。

由于您使用的是 jQuery 并且 item 元素是一个 input 您应该使用 .val() 来设置/获取值而不是 .text()，例如:

$('.item').on('click', function(e){
    var txt  = $(this).text();
    var form = $("input[name='item']");

    form.val( txt );

    console.log( form.val() );
});

注意: one() 事件仅适用于第一次点击，请使用 on() 代替，以便您可以点击该项目你想要的。

希望这有帮助。