CODEWITHSUNDEEP
javascriptjquery
user5388577
user5388577

Reputation:

Get value of the clicked button

I have multiple buttons containing different values.

My buttons :-

<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Now, if I click on Button1, I should get it's value. That is 1, and if I click Button2, I should get value 2. I have written this code :-

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $("button").val();
    alert(fired_button);
});
</script>

But it always alerts 1. What must I do to fix my code?

Upvotes: 14

Views: 177535

Answers (10)

Tan Nguyen
Tan Nguyen

Reputation: 1844

Plain JavaScript solution with ES6 syntax:

document.querySelectorAll('button').forEach(button => {
    button.addEventListener('click', () => {
        const fired_button = button.value;
        alert(fired_button);
        
    });
});

Upvotes: 1

Akash J
Akash J

Reputation: 99

this will give you the element that was clicked, $(this) to get a jquery version.

Update your code to:

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});

Upvotes: -1

Claeyssic
Claeyssic

Reputation: 21

If you're using jQuery, you're looking for the .attr() function.

$(this).attr("value")

That code will give you the value attribute of the html element designed by $(this) (or you precise the ID of the element).

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

UPDATED

Use this instead of button in :

var fired_button = $("button").val();

You have to use this to target the current button clicked instead of button that will select all buttons in the DOM, .val() makes it to get the value of the first button.

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Upvotes: 32

Akash Rao
Akash Rao

Reputation: 928

Try $(this).val(). 'this' always refers to the current object.

Upvotes: -1

Christos
Christos

Reputation: 53958

You could try something as simple as:

$(this).val();


$(function(){
    $("button").click(function() {
        var fired_button = $(this).val();
        alert(fired_button);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

Note: you should add your event listeners after the document is ready. This is why, I have enclosed the event handler in the 

$(function{})

This is a shorthand of 

$(document).ready(function(){})

For more information about this, please have a look here.

Upvotes: 3

Akshay
Akshay

Reputation: 2229

You need to use this variable in order to access the clicked button's value.

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});
</script>

This would return the value of the button.

Upvotes: 2

krishna
krishna

Reputation: 152

Try with $(this).val();. It will return clicked button value.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

this will give you the element that was clicked, $(this) to get a jquery version.

Update your code to:

$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});

Upvotes: 1

Daniel Rosano
Daniel Rosano

Reputation: 695

Use this inside the click handler

<script type="text/javascript">
$("button").click(function() {
    var fired_button = $(this).val();
    alert(fired_button);
});
</script>

Upvotes: 1

Related Questions