Develop Reference

Reporting Which Button Was Clicked when Clicked [duplicate]

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/

javascript autoclick with condition

I want to make a form where if someone type the word ok in the input field, the button will be auto clicked. How can this be done?
<input type="text" id="text"><br><br>
<input id="autoclick" type="button" value="type ok">

Try this:
HTML:
<input type="text" id="text"><br><br>
<input type="button" id="button" value="type ok">
jQuery:
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').trigger('click');
}
})
// this block is for test
$('#button').on('click', function() {
alert('clicked');
});
Working example: https://jsfiddle.net/fnoL4j7m/1

You need to apply keyup event on the input box.
Every time something is entered, it will check if the input is "ok".
If so, a click event is triggered on the button.
$("#text").on('keyup', function(){
if ($(this).val() == 'ok') {
$('input[type="button"]').trigger('click');
}
});
Refer to this: https://jsfiddle.net/dts2aa5o/10/

Try this code:
<input type="text" id="text"><br><br>
<a href="#" id="autoclick">
<input type="button" id="button" value="type ok">
</a>
Jquery:
$('#text').keyup(function(){
if($(this).val()=='ok')
{
$( '#button' ).trigger( "click" );
}
});

you can do something like this :
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').click()
}
})

Checking if an input file has been selected?

I am currently working on a website, where you are able to upload a file:
<input type="file" name="file" id="file" class="form-control" />
I then have a button which you can press to upload the selected file:
<button class="btn btn-primary" type="submit">Upload CV</button>
Here I would like the button to be clickable ONLY if a file has been selected. Is this possible using JS, and how?
Thanks in advance!

Using Jquery:
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$('input:submit').attr('disabled',false);
// or, as has been pointed out elsewhere:
// $('input:submit').removeAttr('disabled');
}
}
);
});
Add disabled attribute in button tag.

You can use JQuery as FullOfQuestions said, but it would be also good to verify that the file was selected before executing button code!
<input type="file" name="file" id="myFile"/>
<!--Add disabled attribute to the button so that is appears disabled at page load-->
<button id="myBtn" type="submit" disabled>Upload CV</button>
<script type="text/javascript">
$(function () {
//when input's value changes
$("#myFile").change(function () {
if($(this).val())
{
$("#myBtn").prop("disabled", false);
}
else
{
$("#myBtn").prop("disabled", true);
}
});
//when button is clicked
$("#myBtn").click(function () {
if($("#myFile").val())
{
console.log("file selected");
}
});
});
</script>

You can do this with native JS below. The button is enabled when a file has been selected, but if a file has not been selected, the button is disabled.
var button = document.querySelector('button[type=submit]');
button.disabled = true;
document.getElementById('file').addEventListener('change', function () {
if (this.value.length > 0) {
button.disabled = false;
} else {
button.disabled = true;
}
});
<input type="file" name="file" id="file" class="form-control" />
<button class="btn btn-primary" type="submit">Upload CV</button>

javascript click nearest asp button

I have javascript that will fire an alert box when the enter key is pressed within a telerik RadAutoCompleteBox. When enter is pressed i need to find the nearest asp.net (input button) and click this. Any Suggestions?
<script>
$(document).ready(function () {
var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {
handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic
if (e.keyCode == Sys.UI.Key.enter) {
this._onBlur();
alert('Enter has been pressed inside RadAutoCompleteBox');
}
}
});
</script>

I'm not sure this is what you are looking for since it requires jQuery, at any rate here are 2 options. One going through a parent element and then looking through the child elements, the second if they are on the same level through siblings.
$('#textbox').on('keyup', function() {
$(this).parent().find('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">
</div>
$('#textbox').on('keyup', function() {
$(this).siblings('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">

You can use closest() to find the nearest "button type" input or button tag
if (e.keyCode == Sys.UI.Key.enter) {
// Code
var input = $(e.target).closest('input[type="button"],input[type="submit"],button');
if (input.lenght > 0) {
input.click();
}
}
This will search the element itself and later will traverse up through its ancestors in the DOM tree to find the first match and click it

Jquery is not call on button click

i have a jquery for file selection
http://jsfiddle.net/parvathy/e8wr5/
please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..
<input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">
<button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function (e) {
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
alert('Only add Excel Files!');
}
else {
$('input[name="fake_section"]').val(filename);
}
});
});

Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id
<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>
then
$('.fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
Demo: Fiddle

Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.
<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">
<button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section1').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});