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

【问题标题】：How to add data gathered by a click event, into a form?如何将点击事件收集的数据添加到表单中？
【发布时间】：2017-10-23 18:07:03
【问题描述】：

我想创建一个函数，当用户点击屏幕上的一个项目时，比如“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>

【问题讨论】：

请向我们展示您的 HTML 代码。

标签： javascript php jquery database forms

【解决方案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()，以便您可以点击所需的项目。

希望这会有所帮助。

【讨论】：

表单是否像数组一样处理？在尝试查找我的元素时，我不会考虑输入 [ ] 。这工作，谢谢^^

【解决方案2】：

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

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

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

【讨论】：