CODEWITHSUNDEEP
javascriptjquerybutton
fightstarr20
fightstarr20

Reputation: 12568

jQuery buttons - Get pressed value

I have a simple jQuery UI button set that looks like this...

<div class="buttons">
    <button id="button1" class="ui-button ui-widget ui-corner-all" value="orange">Orange</button>
    <button id="button2" class="ui-button ui-widget ui-corner-all" value="banana">Banana</button>
    <button id="button3" class="ui-button ui-widget ui-corner-all" value="apple">Apple</button>
</div>

How can I get the value of the button that has been pressed? Does anybody have an example they can point me in the direction of?

Upvotes: 0

Views: 81

Answers (6)

realpac
realpac

Reputation: 572

try this code:

 $('button').click(function() {
    alert($(this).val())
 });

Upvotes: 0

grt812
grt812

Reputation: 170

Gets the value of the button last clicked.

document.ready(function(){
   var button = $(".ui-button.ui-widget.ui-corner-all");
   button.click(function(){
       buttonValue = $(this).val();
   });
});

Upvotes: 1

HEldursi
HEldursi

Reputation: 48

You can add an event listener for the button element:

$('button').click(function() {
    var value = this.value;
});

Check this JSFiddle Link

I hope it helps.

Upvotes: 1

Liaqat Saeed
Liaqat Saeed

Reputation: 428

Here is the working example

Html

<div class="buttons">
    <button id="button1" class="ui-button ui-widget ui-corner-all" value="orange">Orange</button>
    <button id="button2" class="ui-button ui-widget ui-corner-all" value="banana">Banana</button>
    <button id="button3" class="ui-button ui-widget ui-corner-all" value="apple">Apple</button>
</div>

<span id="buttonValue"></span>

in jQuery you can do it like this JS Code

  $('button').click(function(){

        var buttonValue = $(this).val();

        $('#buttonValue').text(buttonValue);
        });

Working fiddle here

Upvotes: 1

Sasha B.
Sasha B.

Reputation: 9

document.querySelectorAll('.ui-button').forEach(function(item){
  item.addEventListener('click', function(event) {
    var target = event.target.value;
    console.log(target);
  });
});

Upvotes: 1

kyun
kyun

Reputation: 10264

var buttons = $(".buttons > button");
buttons.on('click',function(){
  console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
    <button id="button1" class="ui-button ui-widget ui-corner-all" value="orange">Orange</button>
    <button id="button2" class="ui-button ui-widget ui-corner-all" value="banana">Banana</button>
    <button id="button3" class="ui-button ui-widget ui-corner-all" value="apple">Apple</button>
</div>

Upvotes: 1

Related Questions