We Keep Coding

Trigger Button with Key instead of Mouse Click

Thanks for any help with this. Basically I have a stop button on a timer - and I need to have it be activated via a key press instead of or in addition to being able to click it with mouse. I've tried a few different ways using document.addeventlistener for example but nothing I have done has worked. Below is the relevant HTML/JS. Can anyone point me in the right direction of how I should best go about this? For example ideally I will press a number on the num pad to stop my counter. I'm not sure how to separate the two lines of code in the block format wise below, but just know button is in its proper html tags and the stop button is within script tags.
Thank you
<button id="stop" class="btn btn-danger">STOP</button>
/* Stop button */
stop.onclick = function() {
clear = true;
start.disabled = false;
stop.disabled = true;
}

Here, I created an example for the keydown event. Use tab key navigate to stop button and then press enter key it will get disabled.
document.getElementById("stop").addEventListener("keypress", stopTimer, false);
function stopTimer() {
document.getElementById("stop").setAttribute('disabled', true);
}
<button id="stop">STOP</button>

For the button element, click event has triggered on both, click and keypress as you can see below (this happen when you press spacebar or return, with another key just trigger keypress event); but on anyway you can set more than one event on your element.
document.getElementById("stop").addEventListener("click",function(){
console.log('Clicked!');
});
document.getElementById("stop").addEventListener("keypress",function(){
console.log('Keypressed!');
});
<button id="stop">Stop!</button>
if you need no-mouse interaction, you have to focus the element...
document.getElementById("stop").addEventListener("click",function(){
console.log('Clicked!');
});
document.getElementById("stop").addEventListener("keypress",function(){
console.log('Keypressed!');
});
document.getElementById("stop").focus();
<button id="stop">Stop!</button>

Disabled button still fires using ".click()"

It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>
function save(){
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
function byPassDisabled(){
$('#saveButton').click();
}
see http://jsfiddle.net/WzEvs/363/
In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.
But why? This behavior doesn't seem fair to me.
Any workaround?

The attribute only disables user interaction, the button is still usable programmatically.
So yeah, you gotta check
function byPassDisabled(){
$('#saveButton:enabled').click();
}
Alternatively don't use inline handlers.
$(document).on('click', '#saveButton:enabled', function(){
// ...
});

For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.
const element = document.getElementById('saveButton');
element.click() //this would not work

You can programmatically trigger click on a disabled button.
There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/
$(function () {
$("#saveButton").on('click', function (e) {
if (!e.isTrigger) {
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
});
$("#bypassButton").on('click', function (e) {
$("#saveButton").click();
});
});
e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.

You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) .
off or unbind the click will solve this issue.
Thanks

Bootstrap's button.js and Turbolinks issue

The custom CSS class .btn-loading disables the button and sets its text to loading state:
$(document).on('click', '.btn-loading', function() {
var btn = $(this);
btn.button('loading');
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
Rollbar.error("Button stuck");
btn.button('reset');
}, 10000);
});
// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
$('.btn-loading').button('reset');
});
Example button
button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue
When the button is pressed, text is changed to 'Processing...' and the button is disabled preventing multiple submits.
However, sometimes in development and production, the button gets stuck in the loading state and for some reason does not cause the submit and/or rendering of the new page. The setTimeout is firing multiple times a day on the production server. We are having hard times producing the problem on the development consistently.. it happens randomly now and then.
Rollbar's statistics shows that it's not browser specific nor a single button+action that's causing it. So the cause is not a slow server response either.
Any idea what might be causing this and how to fix it?

I faced similar problem some time back and solved the same with a different approach. Try to follow the below steps to solve your problem.
HTML:
Change your button type from “Submit” to “Button”. This will give you full control to execute your scripts.
<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>
JQUERY:
On Button Click, you need to disable the button. This will immediately stop users to click again. Then you can change the button text to "Processing". Below script will guide you make it happen.
$(function () {
$('#SubmitButton').click(function (e) {
e.preventDefault();
//Disable Button to avoid multiple clicks
$(this).attr("disabled", true);
// Change the button text to “Processing”
$(this).text(‘Processing’);
// Write Your Validation Scripts
// If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
// Else Submit Form
//Submit the Form
$("#targetForm").submit();
})
})

To prevent multiple submit you can use $.one() function also. and add remaining logic.

When the button is pressed, text is changed to 'Processing...' and the
button is disabled preventing multiple submits.
-- Note that there's not part in your code snippet that disables the button.
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
// if(stuck){
Rollbar.error("Button stuck");
btn.button('reset');
// } // end-if
}, 10000);
-- It looks like your fallback will always be executed. Shouldn't be executed when the button is stuck?
The setTimeout is firing multiple times a day on the production
server.
-- Because your button is never disabled, and because there is no condition restricting it from firing on being clicked.
Moreover, there's no jQuery method like button(). It looks like you're using jQueryUI, which you should have mentioned as well. But jQueryUI + Bootstrap seem like a weird combination, to me.

How to prevent event bubbling, rightnavbutton? Titanium

Here is my alloy code - snippet:
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
JS:
//edit profile button
function rightButtonClicked(e) {
Ti.API.info("testing bubble ");
//TODO: add functionality here
e.cancelBubble = true;
}
The event still bubbles. Normal buttons this works fine.
Thanks
Update:
<RightNavButton>
<Button id="btnRight" title='Chat' onClick="rightButtonClicked" bubbleParent='false'/>
</RightNavButton>
Still bubbles. i.e. if I click on that multiple times, it keeps on opening windows. Rather then wait for event to finish and then fire again.

Try
e.stopImmediatePropagation();

you should used bubbleParent property over the button, set it to false it will work. Here is the documentation

2 jQuery events on same action seem to cancel each other

**Update: I have pasted working code in order to erase any ambiguity about what is going on. I have also tried to remove the preventDefault on both handlers, does not help*
I have a form where upon the button click, a JS event needs to happen, and the form needs to submit.
As per the code below, what I thought would happen is: alert(button), then alert(form), or vice versa. I do not care about sequence.
If i run it however, the alert(button) will show up, but the alert(form) will not.
If i comment out the code for the button, the form alert comes up.
Do i have some fundamental misunderstanding of how this is supposed to work?
jQuery(document).ready(function(){
$("form.example").submit(function(event){
event.preventDefault();
alert("form submitted");
});
$("form.example button").click(function(event){
event.preventDefault();
alert("button clicked");
});
)};
<form class="example" action="/v4test">
<button type="submit">Meow!</button>
</form>

After edit of OP
You do not need to preventDefault of the click.... only the submit... here is you working code:
jsFiddle example
jQuery(document).ready(function(){
$('form.example').submit(function(event){
event.preventDefault();
alert("form submitted");
// stop submission so we don't leave this page
});
$('form.example button').click(function() {
alert("button clicked");
});
});​
old answer
You can simply put your .click() and .submit() handlers in series, and they should not cancel out. You have some syntax errors in your pseudo code.... maybe those are causing problems?
Another potential problem is that $("form button") targets the HTML <button> tags. If you use <input type="button" /> you should use $("form:button") and note that <input type="submit" /> is not a button. Anyway, I'll assume you are in fact using the <button> tags.
Usually return false is used inside .submit(function() { ... });. This stops the form from being submited through HTML. s**[topPropagation][6]** is very different. It deals with stopping events "bubbling up" to the parents of elements....... But I don't see how this would effect your case.
If you are doing a true HTML submission, make sure to put your .click() handler first, since a true HTML submission will cause you to leave the page.
If you use return false inside .submit(), the form will not be submitted through the HTML, and you'll have to handle the submission with jQuery / Javascript / AJAX.
Anyway, here is a demonstration of both the .click() and .submit() events firing in series... the code is below:
jsFiddle Example
$(function() {
$('form button').click(function() {
// Do click button stuff here.
});
$('form').submit(function(){
// Do for submission stuff here
// ...
// stop submission so we don't leave this page
// Leave this line out, if you do want to leave
// the page and submit the form, but then the results of your
// click event will probably be hard for the user to see.
return false;
});
});​
The above will trigger both handlers with the following HTML:
<button type="submit">Submit</button>
As a note, I suppose you were using pseudo code, but even then, it's much easier to read, and one is sure you're not writing syntax errors, if you use:
$('form').submit(function() { /*submits form*/ });
$('form button').click(function() { /*does some action*/ });

If you put a return false on the click, it should cancel the default behavior. If you want to execute one then the other, call $('form').submit() within the click function. e.g.
$('form').submit { //submits form}
$('form button').click {
// does some action
$('form').submit();
}

There seems to be a bit of confusion about propagation here. Event propagation (which can be disabled by stopPropagation) means that events "bubble up" to parent elements; in this case, the click event would register on the form, because it is a parent of the submit button. But of course the submit handler on the form will not catch the click event.
What you are interested in is the default action, which in the case of clicking a submit button is to submit the form. The default action can be prevented by either calling preventDefault or returning false. You are probably doing the latter.
Note that in Javascript functions which do not end with an explicit return do still return a value, which is the result of the last command in the function. You should end your click handler with return; or return true;. I have no idea where I got that from. Javascript functions actually return undefined when there is no explicit return statement.

Does clicking the button submit the form? If so:
// Disable the submit action
$("form").submit(function(){
return false;
});
$("form button").click(function(){
// Do some action here
$("form").unbind("submit").submit();
});
If you don't unbind the submit event when you click the button, the submit will just do nothing.