Jquery Add string from button value into an input field

Question

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>

what value are you storing in button ? $row->kategori what it returns ? — Manthan Dave
– Manthan Dave, Commented Nov 9, 2016 at 5:12
better use data-attribute for the button to store that $row->kategori — four
– four, Commented Nov 9, 2016 at 5:13
@billy try below given answer , but write you button click event on class (don't use ID attribute) , and store your $row->kategori value to data-attribute. make this two change to fulfill your requirement. — Soni Vimalkumar
– Soni Vimalkumar, Commented Nov 9, 2016 at 5:29
answer below is work, but only work on first button on foreach loop — Billy Adelphia
– Billy Adelphia, Commented Nov 9, 2016 at 5:41

Suyog · Accepted Answer · 2016-11-09 05:19:12Z

2

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

answered Nov 9, 2016 at 5:19

Suyog

1817 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prasanth · Accepted Answer · 2016-11-09 05:26:14Z

2

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

edited Nov 9, 2016 at 5:26

answered Nov 9, 2016 at 5:16

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Comments

four · Accepted Answer · 2016-11-09 06:02:14Z

1

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>

edited Nov 9, 2016 at 6:02

answered Nov 9, 2016 at 5:20

four

5644 silver badges6 bronze badges

4 Comments

Billy Adelphia Over a year ago

the answer is work, but only work on first button on foreach loop. Is there anyway to work on next button ?

four Over a year ago

does each button target the same input text?

Billy Adelphia Over a year ago

no, every button has their own value, based on '.$row->kategori.'

four Over a year ago

i meant do they target the same input element?? like in the above example target only the input of id kategori ?

Brijal Savaliya · Accepted Answer · 2016-11-09 05:18:13Z

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

antelove · Accepted Answer · 2019-11-15 10:03:48Z

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

Collectives™ on Stack Overflow

Jquery Add string from button value into an input field

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related