Need click event to trigger alert during else - javascript

So, this code is working:
<script>
$(document).ready(function(){
  var btn = $('#submit_send_order');
  btn.attr({disabled: 'disabled'});
  var chk = $('.end-box');
  chk.click(function(){
    if ($(this).attr('checked'))
      btn.removeAttr('disabled');
    else
      btn.attr({disabled:'disabled'});
  });
});
</script>
but I can't get any working version of a click, onclick, or event handler to cause a popup message during the else condition. Unless users checks a box, they cannot send their order on my site. Right now they click the button and nothing happens until they check the box. But I'd like an alert to show as well, e.g.:
$(document).ready(function(){
$('#submit_send_order').click(function(){
alert("You cannot proceed until you check the end box");
});
});

As Verhaeren said above, if the button is disabled, then it can't fire the click event. Rather than disabling the button, I would just put an if/else check in the click event.
So...
$(document).on('click', '#submit_send_order', function(event) {
event.preventDefault();
if ($('.end-box').prop('checked')) {
//Handle form submission
} else {
alert('You cannot proceed until you check the end box');
}
});

The onclick event doesn't fire when the element is disabled. Also, notice which is the right method to see if the checkbox is checked:
$(document).ready(function(){
var btn = $('#submit_send_order');
btn.attr({disabled: 'disabled'});
var chk = $('.end-box');
chk.on('click', function(){
if ($(this).is(':checked'))
btn.removeAttr('disabled');
else
btn.attr({disabled:'disabled'});
});
btn.on('click', function(){
alert("You cannot proceed until you check the end box");
});
});
I build a "solution" for this if you REALLY whant to do that. You can check it at this fiddle:
http://jsfiddle.net/2f1wsb8c/3/
It's placing an element with the same size of the button over it to catch the click when the button is disabled.

Related

jquery selector for future element if visible

One of my ajax popup is loading too late.so my condition of jquery to check visibility is not working.
$(document).ready(function() {
if($('#emailCart').is(':visible')){
alert('yes');
let shouldFire = true;
$("input, select").click(function(){
if(shouldFire) {
alert('sent');
sendGAEvent('Email', 'click','Email Cart');
shouldFire = false;
}
});
};
});
seems "is(':visible')" only checks for dom loaded elements.How can i apply this conditions to future elements also.
Email cart image
When clicking on this Email cart button many textboxes appear on clicking any one of those my code should work. I am using a tool tempormonkey by which i inject my code to websites.But my code is not working when i inject using tempormonkey but instead works with console.
Do it the other way around: check the visibility in the handler function.
$(document).ready(function() {
$("input, select").click(function() {
if ($('#emailCart').is(':visible')) {
alert('sent');
sendGAEvent('Email', 'click', 'Email Cart');
}
});
});
If the input and select elements are loaded dynamically, use event delegation as described in Event binding on dynamically created elements?. But that doesn't change the logic of how to check for visibility of the cart.
Its not possible to write such code which will execute in future but we can monitor that on click of document because you are saying that on click of Email Cart button you want to execute it.
I hope it will resolve your issue, try it:-
$(document).on('click', function (e) {
if (!$('#emailCart').is(':visible')) return;
alert('yes');
let shouldFire = true;
$("input, select").click(() => {
if (!shouldFire) return;
alert('sent');
sendGAEvent('Email', 'click', 'Email Cart');
shouldFire = false;
});
});

why unable to get alert on click of button

Can anybody tell why in my given code I am unable to get alert? Why is clicked always false even after my button gets clicked?
$(document).ready(function() {
var clicked = false;
$(document).on('click', '#submit-catalog', function() {
var clicked = true;
});
if(clicked){ // never get executed
alert("button clicked")
//i am executing some function only if that button clicked
}
});
JavaScript does not wait for the click listener to be executed before going into the if-block.
The variable never gets set to any other value before it's checked.
You also have some syntax errors in your code pointed out by #BraveButter's answer.
If you want to alert once the element has been clicked use this code:
$(document).ready(function() {
$(document).on('click', '#submit-catalog', function() {
alert("button clicked");
});
});
Document ready is executed as soon as the the form finishes loading. Your button is not clicked at that point.
You are adding an event handler to the button that will change the value of the clicked variable as soon as the user clicks the button.
All good and well but If you want something to happen on the click of the button (the functionality you mention) you should run this functionality on the click event. Something like that
function doWhatIWant(){
alert("button clicked")
//i am executing some function only if that button clicked
}
and change your event handler like that
$(document).on('click', '#submit-catalog', function() {
clicked = true;
doWhatIWant();
// Or just add your functionality here
});
because you created a new variable with another scope inside of your eventhandler
remove the var before it so you set your variable in the document ready function.
Also your queue will handle the if before you can trigger the onclick event.
$(document).ready(function() {
$(document).on('click', '#submit-catalog', function() {
alert("button clicked")
});
});
Now each time your button fires the onclick event it will show the alert window
If you just want to show the alert window once try this
$(document).ready(function() {
var clicked = false;
$(document).on('click', '#submit-catalog', function() {
if(!clicked) {
clicked = true;
alert("button clicked")
}
});
});
the problem is that your if statement is outside the evaluation of the onClick function, thus, your if is never evaluated.
also you are doing var clicked = true inside the function.
here you have a working example:
$(document).ready(function() {
var clicked = false;
$(document).on('click', '#submit-catalog', function() {
clicked = true;
if (clicked) {
alert("button clicked")
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='submit-catalog'> clickme </button>
check that if you change the value of clicked, as soon as you enter to the document, it will trigger an alert. this is because the if is evaluated as soon as you enter.
$(document).ready(function() {
var clicked = true;
$(document).on('click', '#submit-catalog', function() {
//you call this when you click the button.
});
if(clicked){ // never get executed
alert("button clicked")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
just cancel default submit action, set clicked to true and call a function to alert and submit form
$(document).ready(function() {
var clicked=false;
$(document).on('click', '#submit-catalog', function(e) {
e.preventDefault();
clicked=true;
click();
});
function click(){
alert("button clicked")
//submit catalog form
$('#catalog-form').submit();
}
});

How to call one button click event in another by stopping specific properties

After clicking on btn triggering btn1 click event, but clicking on btn it is triggering btn1 event and closing the popup but it should not how can i stop that.
While clicking on btn only form validation should happen need to stop closing fancybox.
$('.btn').on('click', function(){
$('.btn1').css('display','block');
$('.btn1').trigger('click');
});
$('.btn1').on('click', function(){
//form validation
$.fancybox.close();
});
you can pass a parameter while triggering click event on btn1.
Javascript code:
$('.btn').on('click', function(){
$('.btn1').css('display','block');
$('.btn1').trigger('click', [true]);
});
$('.btn1').on('click', function(event, dontClose){
//form validation
if(error == 0 && !dontClose){
$.fancybox.close();
}
});
when click event is triggered automatically on btn1, dontClose will be undefined in which case depending on error fancy box will close.
I don't know if i understood what you need, if not tell me and i'll remove this answer.
$('.btn').on('click', function(){
console.log("click btn");
$('.btn1').trigger('click', 1);
});
$('.btn1').on('click', function(e, data){
//form validation
if (data != 1) { // if event is not triggered
$.fancybox.close();
}
});

disable button with timeout

I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks
$('#send').click(function(){
var self = $('#send');
setTimeout(function() {
self.disabled = false;
if(!$('#text').val()){
alert('field empty');
}else{
$('#message').html('done');
$('#text').val('');
}
}, 3000);
});
I've written a small example for you, of disabling a button on click. The timeout will enable the button after 3000 miliseconds.
Working demo
html:
<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>
Javascript:
$('#send').click(function(){
var button = $(this);
button.attr('disabled', 'disabled');
setTimeout(function() {
button.removeAttr('disabled');
},3000);
if(!$('#text').val()){
alert('field empty');
button.removeAttr('disabled');
}else{
$('#message').html('done');
$('#text').val('');
}
});
You could use jQuery's one() instead of click(). Once the function is run it will be unbound.
If you want to re-enable it you could put the timeout to re-bind it at the end of the function.
Using your method, it looks like you're never actually disabling the button:
this.disabled = 'disabled';
You are not correctly disabling the button. You are setting the .disabled property on a jQuery object, not the wrapped DOM element.
Try:
self.prop('disabled', false);
Instead of:
self.disabled = false;
EDIT:
Actually the code above was attempting to re-ebable the button. There was no code to disable the button.
I also think you want to perform the validation right away. The call to setTimeout() should just be for re-enabling the button, like this:
$('#send').click(function() {
var self = $(this);
// Disable the button.
self.prop('disabled', true);
// Process click.
if (!$('#text').val()) {
alert('field empty');
} else {
$('#message').html('done');
$('#text').val('');
}
// Cause the button to re-enable after 3 seconds.
setTimeout(function() {
self.prop('disabled', false);
}, 3000);
});

Do not fire one event if already fired another

I have a code like this:
$('#foo').on('click', function(e) {
//do something
});
$('form input').on('change', function(e) {
//do some other things
));
First and second events do actually the same things with the same input field, but in different way. The problem is, that when I click the #foo element - form change element fires as well. I need form change to fire always when the content of input is changing, but not when #foo element is clicked.
That's the question )). How to do this?
Here is the code on jsfiddle: http://jsfiddle.net/QhXyj/1/
What happens is that onChange fires when the focus leaves the #input. In your case, this coincides with clicking on the button. Try pressing Tab, THEN clicking on the button.
To handle this particular case, one solution is to delay the call to the change event enough check if the button got clicked in the meantime. In practice 100 milisecond worked. Here's the code:
$().ready(function() {
var stopTheChangeBecauseTheButtonWasClicked = false;
$('#button').on('click', function(e) {
stopTheChangeBecauseTheButtonWasClicked = true;
$('#wtf').html("I don't need to change #input in this case");
});
$('#input').on('change', function(e) {
var self = this;
setTimeout(function doTheChange() {
if (!stopTheChangeBecauseTheButtonWasClicked) {
$(self).val($(self).val() + ' - changed!');
} else {
stopTheChangeBecauseTheButtonWasClicked = false;
}
}, 100);
});
});
And the fiddle - http://jsfiddle.net/dandv/QhXyj/11/
It's only natural that a change event on a blurred element fires before the clicked element is focused. If you don't want to use a timeout ("do something X ms after the input was changed unless in between a button was clicked", as proposed by Dan) - and timeouts are ugly - you only could go doing those actions twice. After the input is changed, save its state and do something. If then - somewhen later - the button is clicked, retrieve the saved state and do the something similar. I guess this is what you actually wanted for your UI behaviour, not all users are that fast. If one leaves the input (e.g. by pressing Tab), and then later activates the button "independently", do you really want to execute both actions?
var inputval = null, changedval = null;
$('form input').on('change', function(e) {
inputval = this.value;
// do some things with it and save them to
changedval = …
// you might use the value property of the input itself
));
$('#foo').on('click', function(e) {
// do something with inputval
});
$('form …').on('any other action') {
// you might want to invalidate the cache:
inputval = changedval;
// so that from now on a click operates with the new value
});
$(function() {
$('#button').on('click', function() {
//use text() not html() here
$('#wtf').text("I don't need to change #input in this case");
});
//fire on blur, that is when user types and presses tab
$('#input').on('blur', function() {
alert("clicked"); //this doesn't fire when you click button
$(this).val($(this).val()+' - changed!');
});
});​
Here's the Fiddle
$('form input').on('change', function(e) {
// don't do the thing if the input is #foo
if ( $(this).attrib('id') == 'foo' ) return;
//do some other things
));
UPDATE
How about this:
$().ready(function() {
$('#button').on('click', function(e) {
$('#wtf').html("I don't need to change #input in this case");
});
$('#input').on('change', function(e) {
// determine id #input is in focus
if ( ! $(this).is(":focus") ) return;
$(this).val($(this).val()+' - changed!');
});
});

Categories

Resources