This question already has answers here:
Getting the ID of the element that fired an event
(24 answers)
Closed 6 years ago.
When I click on a button, I want to get the id of the button that was clicked. How can I do that with JavaScript?
For example:
<input type="button" id="1" class="buttonID" value="answer" onClick=myFunction() />
<input type="button" id="2" class="buttonID" value="answer" onClick=myFunction() />
<input type="button" id="3" class="buttonID" value="answer" onClick=myFunction() />
You can assign the button to a variable, and then target the ID of the button through that variable.
var button = document.getElementById('myButton');
button.onclick = function() {
alert(button.id);
}
This will alert "clicked" when a button with id my-button is clicked:
HTML
<button id="buttonID">Click me</button>
JavaScript
var el = document.getElementById("buttonID");
if (el.addEventListener) {
el.addEventListener("click", function() {
alert("Clicked " + el.id);
}, false);
} else { //IE8 support
el.attachEvent("onclick", function() {
alert("Clicked " + el.id);
});
}
The function passed to the onclick event receives an 'event' object in the scope. You can access it's target element, and then the id
window.myFunction = function() {
console.log(event.target.id)
}
You need to define function in your header (or JS file call in your header) otherwise this function will be undefined onclick event and you need to add 'this' param to function (for binding clicked element), like this:
<script>
function myFunction(e){
alert(e.id);
}
</script>
<input type="button" id="1" class="buttonID" value="answer" onClick=myFunction(this) />
<input type="button" id="2" class="buttonID" value="answer" onClick=myFunction(this) />
<input type="button" id="3" class="buttonID" value="answer" onClick=myFunction(this) />
Here is code on JsFiddle: https://jsfiddle.net/kv8y4q24/
Related
How can I filter e object from a click action?
I want to prevent Firefox href propagation over checkboxes but I have other input on my html and the way implementes as is, will prevent my inputs to submit:
<a href="picture-big.jpg">
<img src="https://imgur.com/gallery/DC0Iu" />
<input type="checkbox" name="delete" id="stopprop1"/>
<input type="checkbox" name="delete" id="stopprop"/>
<input type="checkbox" name="delete" class="stopprop"/>
<input type="checkbox" name="delete" class="stopprop"/>
<input type="checkbox" name="delete" class="stopprop"/>
</a>
JS:
$('input').click(function(e) {
e.preventDefault();
var _this = this;
console.log(_this.getElementById('stopprop'))
setTimeout(function() {
_this.checked = !_this.checked;
}, 1);
});
Can I filter e object? and if e has class or id x then prevent that from href propagation.
Some other input buttons on the same page which is prevented to submit.
<div class="cell empty" data-title="">
<input type="submit" class="recover-css" name="recover_vms" value="RECOVER" />
</div>
The <a> tag cannot have input inside of it. But for your quesion:
You can get the class or id of the clicked element with jQuery by using $(e.target).attr('id') for id and $(e.target).attr('class') for class
So your code may look like this:
$('input').click(function(e) {
if ($(e.target).attr('id') === 'someid') {
//do something
}
if ($(e.target).attr('class') === 'someclass') {
//do something else
}
});
how to change onclick="javascript:func-x()"
<input type="button" onclick="javascript:func-x()" value="MENU" id="btn">
to onclick="javascript:func-y()" with same id on javascript?
<input type="button" onclick="javascript:func-y()" value="MENU" id="btn">
I've tried:
var c = document.getElementById('btn'); //input#btn
// ...
But I don't know what to continue...
You can try to use setAttribute method, like this:
function func_x(input) {
console.log('I\'m func_x function');
input.setAttribute('onclick', 'javascript:func_y()');
}
function func_y() {
console.log('I\'m func_y function');
}
<input type="button" onclick="javascript:func_x(this)" value="MENU" id="btn">
Javascript :
document.getElementById("btn").attribute("onclick","javascript:func-y()");
Jquery :
$("#btn").attr("onclick","javascript:func-y()");
I have two buttons:
<input type="button" name="hideAll" value="Hide Descriptions"/>
<input type="button" name="showAll" value="Show Descriptions"/>
Using jQuery, how do I tell which button was clicked?
Add a class that your buttons share...
<input class="mybutton" type="button" name="hideAll" value="Hide Descriptions"/>
<input class="mybutton" type="button" name="showAll" value="Show Descriptions"/>
$(function() {
$('.mybutton').on('click', function() {
var isClicked = this.attr('name');
if (isClicked === 'hideAll') {
...
}
if (isClicked === 'showAll') {
...
}
});
});
Depending on your needs and scope, you could also make isClicked a global variable which will be available outside the click event.
isClicked = this.attr('name');
$('input[type="button"]').on('click', function() {
// which button was clicked?
alert($(this).attr('name') + ' was clicked');
});
In my code
<script>
$(document).ready(function(){
$("#btn").on('click', function() {
var caretPos = document.getElementById("txt").selectionStart;
var textAreaTxt = $("#txt").val();
var txtToAdd = $("#btn").val();
$("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
})
});
</script>
HTML
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
I want to give these values in textarea. But it is only giving value of Ok button. How I can give each button values in textarea
You have the same id on elements. ID's must be unique. You can use class and end to this:
$(".btn").on('click', function() {
$("#txt").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt" rows="5" cols="10"></textarea>
<input type="button" class="btn" value="OK" />
<input type="button" class="btn" value="Bye" />
<input type="button" class="btn" value="TC" />
try this
html
<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />
javascript
$('input#btn').click(function()
{
$('#txt').val($('#txt').val()+this.value); // append the value of each button
})
Demo here
<textarea name="insert" rows="5" cols="30" id="insert" onblur="myFunction()"></textarea>
<button class="myvalue" id="myvalue">Ok</button>
<button class="myvalue" id="myvalue">Bye</button>
<button class="myvalue" id="myvalue">Tc</button>
<script>
function insertAt (myField, myValue, startSel, endSel)
{
if (startSel || startSel == '0') {
var startPos = startSel;
var endPos = endSel;
myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));
}` else {
myField.val() += myValue;
}`}var targetBox = $('textarea#insert'),
startSel,
endSel;`targetBox.bind('focusout', function() {
startSel = this.selectionStart;
endSel = this.selectionEnd;
});
$(".myvalue").click(function() {
var myValue = $(this).text();
insertAt(targetBox, myValue, startSel, endSel);
});
</script>
Finally It Works
All your buttons have the same 'id', and 'OK' is the first one, so that's the one that's being returned...
To get the value of the button that's clicked you'd need to give each one a unique id (which should be the case anyway).
I would put your buttons in a separate container, probably a div, and apply the click handler to that. In the handler function, see if the event target has a value attribute, and if it has, send it to your textbox.
Or you could give each button a handler, it depends on your circumstances...
Danny
My suggestion to you change button id to class because id is unique for each element so you have to use class instead of id.
$("input.btn").on('click', function() {
$("#txt").val($("#txt").val()+$(this).val());
})
Demo
these days i read and learn more about my problem!the code is here:
<div align="right" id="parent" name="parent">
<select name="select30" id="select30" value=""/>here inside i have options values and work dynamically with query to my DB</select>
<input type="button" id="moreFields" value="+" onclick=""/> //add select tags
<input type="button" value="-" onclick="" /> //remove select tags
<div name="child" id="writeclone"></div> //here cloned the child from parent DIV
</div>
<input type="button" name="enter" id="" value="ENTER" onclick="getoptionvalues();"/>
My problem is how i can get the names or id's from child DIV when + button fired.When this button fired create child DIVs in Child DIV!!Can anybody HELP ME to correct my JAVASCRIPT code
<script>
function getoptionvalues() {
var parent=document.getElementById('parent');
for (var count=0;count<parent.childNodes.length;count++) {
if(parent.childNodes[count].tagName =='DIV') {
alert ('parent.childNodes[count]');
}
}
}
</script>
As ThiefMaster pointed out, 'parent.childNodes[count]' should be parent.childNodes[count]. Then to get the id, it is just .id and name is .name
if(parent.childNodes[count].tagName =='DIV') {
alert (parent.childNodes[count].id);
alert (parent.childNodes[count].name);
}
At the very least, you need to add a method name to your onClick:
<input type="button" id="moreFields" value="+" onclick="$:getoptionvalues()"/>
Then, using jquery, you can grab an array of components of a certain type, and then loop through w/ alerts:
function getoptionvalues() {
var dropdownMenus = $("select");
dropdownMens.each(function () {
var id = $(this).id;
alert(id);
});
}