Question

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

这是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>

Answer 1

您是否需要这样：在click.apply $(this).html()按钮值添加到texbox时将按钮文本添加到文本框中

＆＃13;

    $('#button1').on('click', function () {
       $('#kategori').val($('#kategori').val()+$(this).html());
        
    });

＆＃13;

<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" />
  <button id="button1">before</button>
</div>



<div class="btn-group">


</div>

＆＃13;

<强> 替代

如果你创建像

这样的按钮

`<input type="button" id="button1" value="before">

在jquery中使用。 $(this).val()

Answer 2

$('#button1').on('click', function () {
    $('#kategori').val($('#kategori').val() + $('#button1').attr('value'));    
});

Answer 3

＆＃13;

<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>


<div class="btn-group">
<button type="button" class="btn btn-primary" id="button1" value="1">1</button>
  <script type="text/javascript">
$(function () {
    $('#button1').on('click', function () {
        var text = $('#kategori');
        text.val(text.val() + $('#button1').val());    
    });
});
</script>
<button type="button" class="btn btn-primary" id="button2" value="2">2</button>
  <script type="text/javascript">
$(function () {
    $('#button2').on('click', function () {
        var text = $('#kategori');
        text.val(text.val() + $('#button2').val());    
    });
});
</script>
</div>

＆＃13;

Answer 4

借助数据属性，使按钮标记看起来像这样：

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

然后您可以使用此脚本：更新

＆＃13;

// 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}`);
});

＆＃13;

<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>

＆＃13;

Answer 5

$( '.button-input' ).on( 'click', function () {

    $( '#kategori' ).val( $(this).val() );

} );

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>

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

    $hasil = $query->result();
?>

<div class="btn-group">

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

    <input type="button" class="btn btn-primary button-input" id="button<?= $row->id; ?>" value="<?= $row->kategori; ?>" />
    
<?php   } ?>    

</div>

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

5 个答案: