Question

我想创建一个功能，当用户点击屏幕上的项目时，说“苹果”，文本“苹果”进入下面名为“项目”的输入表单，这样他们就可以更新项目成本想要。

到目前为止，我已经设置了在单击某个项目时获取文本，但我还没有设法在表单上呈现文本。我该怎么做呢？

屏幕截图中的食品列表是通过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()，以便您点击所需的项目。

希望这有帮助。

Answer 2

解决这个问题的方法是使用val函数进行输入

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

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

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

2 个答案: