I have an html page with various textbox and button
then I added this javascript
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(this.id);
}, false);
};
my goal is to return the ID of the control clicked by the user (as an alert)?
eventually I will add more to this. but as an alert is ok for now. Thank you
Use the target of the event. Here's a runnable sample:
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(evt.target.id);
}, false);
};
<input id="button" type="button" value="button" />
<input id="text" type="text" />
You have added eventListener to the window object.So "this"keyword refers windows object and not your buttons.check for ev.srcElement
window.onload = function () {
window.addEventListener('click', function (evt) {
alert(evt.srcElement.id);
}, false);
};
Related
I have an external JS file that contains the following jQuery code:
var globalNames = { next: 'input[name="next"]'};
var globalElements = { next: $e.find(globalNames.next) };
initQuiz: function() {
globalElements.next.click(function () {
if (y.forcingQuestionSolve && !j[c.index()] && (y.quizSummeryHide || !y.reviewQustion)) {
alert(WpProQuizGlobal.questionNotSolved);
return false
}
i.methode.nextQuestion()
}
);
the globalElements.next.click function is triggered by a click on a button:
<input type="button" name="next" value="Next" class="Button" ">
What I would like to do is call this p.next.click function from a Input Checkbox click.
I have added the following code:
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('next').trigger('click');
});
</script>
As you can see, I have tried to call the trigger event but its not working.
I have to note that the 2 jQuery statements are not combined in document, they are separate.
EDIT: Added Correct Variables (global*)
Hi i think you only forgot to dedicate the button which has to be triggered.
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('[name=next]').trigger('click');
// $('.Button').trigger('click');
});
thanks everyone.. I used the following code from Calvin Nunes-
$("[name='next']").trigger('click');
Craig.
I want to cancel change event of a text box on keypress then I want to trigger it on button click.
This is example of my HTML
$('#btn1').on('click', function() {
var target = '#test';
$(target).on("change");
$(target).focus();
$(target).val('HELLO').trigger('change');
});
$("#test").change(function(event) {
alert($(this).val())
});
$('#test').on('keypress', function(event) {
if (event.keyCode === 13) {
event.stopImmediatePropagation();
$(this).off("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />
<input type="submit" id="btn1" value="BUTTON1" />
but it is not firing change event.
Please suggest.Thanks in advance.
JSFiddle
i think you forget add "event" in javascript code
replace :
$('#test').on('keypress', function() {
event.stopImmediatePropagation();
$(this).off("change");
});
with:
$('#test').on('keypress', function(event) {
event.stopImmediatePropagation();
$(this).off("change");
});
$('#btn1').on('click', function () {
var target='#test';
$(target).on("change",changeText($(target)));
$(target).focus();
$(target).val('HELLO').trigger('change');
});
function changeText($this) {
alert($this.val())
}
$('#test').on('keypress', function (event) {
event.stopImmediatePropagation();
$(this).off("change");
});
event was not in function param and trying to use propogation https://jsfiddle.net/0624eq86/20/
function test(val){
alert(val);
}
$('#btn1').on('click', function() {
var target = '#test';
$(target).focus();
$(target).val('HELLO').trigger('change');
$(target).on("change", test($(target).val()));
});
$('#test').on('keypress', function(event) {
event.stopImmediatePropagation();
$(this).off("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />
<input type="submit" id="btn1" value="BUTTON1" />
Please check the answer, I hope this will work for you.
I have created a function test, which is called when I ON the change event on click function.
I'm currently working on a mobile app using cordova. I've ran into this problem where I have coded a function to detect whenever an user has typed into a text input field and pressing the enter key.
Here's the JavaScript snippet;
<script type="text/javascript">
$(function () {
$("#searchForm").on("input", function (e) {
e.preventDefault();
});
$("input").on("keydown", function (e) {
if (e.keyCode === 13) {
var keyField = document.createElement('input');
keyField.setAttribute('type', 'text');
document.body.appendChild(keyField);
setTimeout(function () {
keyField.focus();
setTimeout(function () {
keyField.setAttribute('style', 'display:none;');
}, 50);
}, 50);
}
});
});
</script>
the HTML part;
<form onsubmit="return false" id="searchForm">
<input type="text" id="fieldOne">
<input type="text" id="fieldTwo">
<input type="button" value="Search" id="search" onclick="executeSearches()"/>
</form>
This code works to achieve hiding the mobile keyboard, but when the hiding function executes the view is being moved because of the keyField -variable.
Is there any other ways I could achieve this function without the view being moved or can I somehow determine where the view is being moved to?
you are missing "#", check jquery selectors
$("#searchForm").on("input", function (e) {
e.preventDefault();
});
I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});
I have tried this :
<script type="text/javascript">
$(function() {
$("#button").click( function()
{
alert('button clicked'); // this is calling
setTimeout(function(){
alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
}, 9000);
}
);
});
</script>
my HTML code:
<form>
<input type="text" id="clearTxt"/>
<input type="submit" value="Search" id="button" />
</form>
But this code is not working.Please help me to solve this issue.
When I pasted your code into a fiddle, the alert did fire. However the timeout function won't execute because due to the form tags surrounding the inputs, when you click the submit button you navigate away from the page and the timeout doesn't have time to execute. You should either change the submit to a button, or call preventDefault() in the function to stop the form from submitting.
This code works:
HTML:
<form>
<input type="text" id="clearTxt" />
<input type="button" value="Search" id="button" />
</form>
Script:
$(function() {
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "";
}, 5000);
});
});
See http://jsfiddle.net/acfkU/1/
Your code is fine, but you are submitting the form, you can use preventDefault method of the event object and make sure jQuery is loaded in your page.
$("#button").click(function(event) {
event.preventDefault();
//alert('button clicked'); // this is calling
setTimeout(function() {
// alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
// $('form').submit();
}, 9000);
});
Instead of adding it to click event you can try adding it on form submit.
function onSubmit() {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
$('#clearTxt').attr('value',"hi");
}, 5000);
return false;
}
Since your are updating the value attribute directly it will take immediate effect in the UI.
If don't want to add to the onsubmit, better change the type of the button from submit.
override the default submit action (that has a preventDefault method) like below:
$("#yourform").submit(function(event) {
event.preventDefault();
});
Here it is:
HTML
<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />
JS
$(function(){
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "hi";
}, 5000);
});
});
Demo JSFiddle