jQuery将按钮值中的字符串添加到输入字段中

debugcn 发表于 Dev

比利·阿德尔菲亚（Billy Adelphia）

我正在尝试从按钮中添加一些具有值的字符串到输入字段中，但是不起作用..

这是jquery代码，有人可以修复它吗？

<script type="text/javascript">
$(function () {
    $('#button1').on('click', function () {
        var text = $('#kategori');
        text.val(text.val() + $('#button1')(text.val());    
    });
});
</script>

和这里的HTML + PHP代码

<div class="form-group">
<label for="kategori">
Kategori:
</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
</div>

<?php $query = $this->db->query("SELECT * from kategori_elibrary"); 
$hasil = $query->result();

?>

<div class="btn-group">

<?php
        foreach($hasil as $row){

 echo '<button type="button" class="btn btn-primary" id="button1" value="'.$row->kategori.'">'.$row->kategori.'</button>';
   } ?>

</div>

四

在数据属性的帮助下，按钮标记看起来像这样：

<button type="button" class="btn btn-primary" id="button1" data-value="Food">
    Food
</button>

然后，您可以使用以下脚本：UPDATED

// NOTE: This will get all button elements of type button
// if you have other elements of this markup change the selector to:
// $('button[id^="button"]')
$('button:button').on('click', function() {
    var $target = $('#kategori'),
    	text = $('#kategori').val(),
        buttonVal = $(this).data('value');
    $target.val(`${text}${buttonVal}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="kategori">
        Kategori:
    </label>
    <input type="text" class="form-control" id="kategori" name="kategori" />
</div>

<button type="button" class="btn btn-primary" id="button1" data-value="Food">Food</button>
<button type="button" class="btn btn-primary" id="button2" data-value="Tools">Tools</button>
<button type="button" class="btn btn-primary" id="button2" data-value="Anything">Anything</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。