I'm new to Javascript, seems I'm missing something simple here. I just want to return the ID of the button I am clicking but instead I'm getting "undefined."
HTML
<div class="btn-group" id="{{user.get('name')}}">
<button class="btn" id="voteup">^^</button>
<h4>{{user.get('vote')}}</h4>
<button class="btn" id="votedown">vv</button>
</div>
JAVASCRIPT
$(document).ready(".btn").click(function() {
var id = this.id;
alert(id);
)};
Try this
$(document).ready(function() {
$(".btn").click(function() {
alert($(this).attr("id"));
});
});
You mixed up the things. $(document).ready() accepts the handler function which is executed when the DOM tree is fully loaded. The correct solution is:
$(document).ready(function() {
$(".btn").click(function() {
var id = this.id;
alert(id);
});
});
Correct way to bind click listener is
$(function(){
$(document).on("click",".btn",function(e){
alert($(this).prop("id"));
});
});
I think you should try this way:
jQuery(document).ready(function(){
jQuery('.btn').live('click', function(){
var id = jQuery(this).attr('id');
alert(id);
});
});
Try it and tell us if worked or not (:
Ofcourse you have error in your javascript:
$(document).ready(".btn").click(function() { //<----here in doc ready handler
var id = this.id;
alert(id);
)}; //<---------------closing of the handler
this should be changed to this:
$(document).ready(function(){
$(".btn").click(function() {
var id = this.id;
alert(id);
});
});
If you are using jQuery, you can read the id attribute like this:
$(this).attr('id');
Related
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?
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>
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.
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.
Use this inside the click handler
<script type="text/javascript">
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
</script>
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);
});
Try with $(this).val();. It will return clicked button value.
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).
Try $(this).val().
'this' always refers to the current object.
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);
});
Plain JavaScript solution with ES6 syntax:
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
const fired_button = button.value;
alert(fired_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?
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>
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.
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.
Use this inside the click handler
<script type="text/javascript">
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
</script>
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);
});
Try with $(this).val();. It will return clicked button value.
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).
Try $(this).val().
'this' always refers to the current object.
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);
});
Plain JavaScript solution with ES6 syntax:
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
const fired_button = button.value;
alert(fired_button);
});
});
while submitting a form i want to get all checkboxes ids which are checked:
here $(this).id() throwing an error.what was the correct code to get ids of all
checkboxes which are checked
$("#pmhxform input:checkbox:checked").each(function() {
var id= $(this).id();
});
Here $(this).id() throwing an error
What was the correct code to get ids of all
checkboxes which are checked ?
jQuery doesn't have an id() function. Use
var id = $(this).attr('id');
or, more simply:
var id = this.id;
Use .attr('id') instead of .id(). The last is not a function of jQuery.
Try this:
$( "input[type=checkbox]" ).on( "click",function(){
alert($(this).attr('id'));
});
JSFIDDLE
try to change your div's id into a class since id's are unique and you are asking for each()
try too:
$( "input[type=checkbox]" ).on( "click",function(){
alert(this.id);
});
I am developing an application using JQuery. This is a fragment of the HTML code I am using:
<MarkNag class="altcheckboxoff" id="markable_38" Azpimark_id="100038">helburua </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_2" Azpimark_id="100002">Oriolek </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_39" Azpimark_id="100039">gas liberalizazioa </MarkNag>
I have the next JQuery script in the HTML page:
<script type='text/javascript'>
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
});
</script>
I would like to know how could I store "markable_39" in a variable if this MarkNag tag was clicked. I guess I should use .data(). But I dont really know how. Any ideas? Thanks
Do it like this
$("MarkNag").click(function ()
{
$(this).toggleClass("highlight");
var IdOfTag = this.id;
//or
IdOfTag = $(this).attr('id');
});
Also, you can just use this.id,
like:
var id = this.id;
Actually, the correct code would be $(this).attr("id").
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
alert(this.id); // Method 1: this.id
alert($(this).attr('id')); // Method 2: $(this).attr('id')
});
here u will get object from where the event occurs
var eventobject = arguments.callee.caller.arguments[0];
here u can access any attribute of currentTarget (in this case id)
var id = $(eventobject.currentTarget).attr("id");
I would like a jQuery function to know which link was clicked to call it, i.e. I would like the link's id value to be passed to the jQuery function.
Is this possible? If so what is the neatest way to do it.
Sure. Inside the click() event handler you can refer to the element clicked by this.
$("a").click(function() {
alert(this.id);
...
});
or
$("a").click(function() {
alert($(this).attr("id"));
...
});
$("a").click(function() {
var linkid = $(this).attr("id");
// use linkId here
});
Don't forget to cancel default behaviour, or you won't achieve nothing.
$("a").click(function(e) {
e.preventDefault();
var linkid = $(this).attr("id");
//do whatever here
});
$("a").click(function() {
alert($(this).attr("id"));
...
});
i can say this same..