CODEWITHSUNDEEP
javascriptphpjquery
Billy Adelphia
Billy Adelphia

Reputation: 1027

Jquery Add string from button value into an input field

I'm trying to add some string from button that has a value into an input field but doesn't work ..

here's jquery code, can anyone please fix it ?

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

and here html + php code

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

Upvotes: 1

Views: 2416

Answers (5)

antelove
antelove

Reputation: 3348

$( '.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>

Upvotes: 0

four
four

Reputation: 564

with the help of data-attributes which makes the button markup look like this:

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

Then you can use this script: 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>

Upvotes: 1

prasanth
prasanth

Reputation: 22490

Are you need like this: button text added into textbox at the time of click.apply $(this).html() button value add to texbox

    $('#button1').on('click', function () {
       $('#kategori').val($('#kategori').val()+$(this).html());
        
    });
<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>

Alternate

if you create the button like 

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

in jquery use with. $(this).val()

Upvotes: 2

Suyog
Suyog

Reputation: 181

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

Upvotes: 2

Brijal Savaliya
Brijal Savaliya

Reputation: 1091

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

Upvotes: 1

Related Questions