I am writing a code to add or subtract from a total amount based on the change in an value of input box.
It is working when one click happens, but it does't work when mouse pressed event is triggered. The value changes alot but only one unit change occurs in total.
Edit Therefore I want to disable mousepressed event on page, so that change always occur one unit
$(document).ready(function (){
$('button').addClass('btn btn-danger');
var total=$('#totalspend').val();
console.log(glo);
total=parseInt(total);
$('button').on('click',function(){
if(glo==-1){
total++;
$('#totalspend').val(total);
}
else if(glo==-2){
total--;
$('#totalspend').val(total);
}
});
});
Variable "glo" detects the click on increment or decrement button.
<input type="tel" class="form-control" id="totalspend">
<div class="row">
<div class="col-md-6">
<table class="table table-hover table-sm">
<tr>
<td>Striking Speed</td>
<td><input class="form-control" type="number" value="35" id="ss"></td>
</tr>
</table>
Button to increase or decrease are added automatically by plugin
https://www.npmjs.com/package/jquery.nice-number
Target the div on which you want to disable clicking and then hook it to on click event and return false
Here is the code
$('divToDisable').on('click', function(){
return false;
});
Or you can either do this-
$('divToDisable').on('click', function(event){
event.preventDefault();
});
Hope it works!
What you want to do is to prevent default event that is being fired when button is clicked, then do your logic. Based on your code it could be done this way:
$('button').on('click', function (e) {
e.preventDefault();
if (glo == -1) {
total++;
$('#totalspend').val(total);
}
else if (glo == -2) {
total--;
$('#totalspend').val(total);
}
});
As I understand your issue, I think you need to disable the 'mouseDown' event and run your function on 'click' event.
$('divToDisable').on('mousedown', function(){
event.preventDefault();
}).on('click', function(){
//your click function goes here
});
Related
I have a textbox and a button. The functionality is that whenever textbox is empty, button is disabled and if not empty then button is enabled. I am doing this using following jQuery code:
$('#user_field').keyup(function(){
if($(this).val().length !=0){
$('#btn_disabled').removeAttr('disabled');
$('#btn_disabled').attr('class', 'upload_button_active');
}
else{
$('#btn_disabled').attr('disabled',true);
$('#btn_disabled').attr('class','upload_button_inactive');
}
})
However, when I am trying to paste input using mouse, the button is not enabling. I have tried binding other mouse events like mousemove, but for that to work we have to move the mouse after pasting. I want to avoid that. Suggest something else.
You should use 'input'
$("#tbx").on('input',function(){
var tbxVal=$(this).val();
if(tbxVal.length===0){
$("#btn").prop("disabled",true);
}else{
$("#btn").prop("disabled",false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tbx">
<button id="btn" disabled>Button</button>
You can use the paste event and retrieve the value of the input inside a setTimeout
$('#user_field').on('paste input', function() {
setTimeout(() => {
if ($(this).val().length !== 0) {
$('#btn_disabled').removeAttr('disabled');
$('#btn_disabled').attr('class', 'upload_button_active');
} else {
$('#btn_disabled').attr('disabled', true);
$('#btn_disabled').attr('class', 'upload_button_inactive');
}
}, 1000)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='user_field'>
<button id='btn_disabled' disabled='disabled'>Click</button>
Just Call the function on change.
It will take your input event from mouse as well.
$("#textBox").change(function(
var val=$(this).val();
if(val.length===0){
$("#btn").prop("disabled",true);
}else{
$("#btn").prop("disabled",false);
}
});
I am trying to hide a button link (id="btnsubmit") whenever the input field (id="valagency") is empty, so that my user can only click on the button after the input field is filled with some data.
For the html part, I have
<tr>
<td class="tbldatastart">
<input type="text" id="**valagency**" name="agencyname<%= strAgencyId %>" class="btn10" readonly>
<input type="text" name="agencyid<%= strAgencyId% >">
Map
</td>
</tr>
<tr>
<td colspan="2"></td>
<td>Submit</td>
</tr>
And for the javascript, I have
function Submit() {
$("#valagency").keyup(function(){
if($(this).val()) {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
}
The submit button is still there. I do not know where I did wrongly. Please help.
Thanks in advance.
You're calling function submit at that time your enable disable button code will execute.
you need to use that code independently not on submit call.
Place following code out of submit function:
$("#valagency").keyup(function(){
if($(this).val() == "") {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
If you want to disable submit on submit button click how it's possible when you've used keyup event.
If you want to do so on submit button click then you need to use keyup.
If you want to use keyup then code will be outside of submit function.
Keyup will not work on pasting data to input.
For that consider this example.
<input type="text" name ="mytxt" id="mytxt">
Submit
$('input[name=mytxt]').change(function() {
if($(this).val() == "") {
$("#btnsubmit").hide();
} else {
$("#btnsubmit").show();
}
});
If you want to hide button on page load then you can go with https://jsfiddle.net/kurbhatt/m06yywmn/2/
The problem is that you're running your keyup() function on click of the submit button. This will never execute. Simply move your keyup() function outside of this button click. You'll also want to hide #btnsubmit by default.
Here's a minimal example:
$("#btnsubmit").hide();
$("#valagency").keyup(function() {
if ($(this).val()) {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="valagency">
Submit
Hope this helps! :)
Instead of keyup event, use change event to get the final value of input field and check for it's emptiness.
It's just related with input keyup event, so If you want to check the input's value to hide/show the button. make it independent with 'submit', it should be hide/show before the 'submit'.
function submit() {
//do something
}
$("#valagency").keyup(function(){
if($(this).val() == "") {
$("#btnsubmit").show();
} else {
$("#btnsubmit").hide();
}
});
I have 2 radio buttons that will do something when either is checked. And here is a JQuery that is tied to them:
$('input[name=24hours]:radio').on('change', function() {
if($('#hours24y').is(':checked'))
{ $('table').hide(); }
else if ($('#hours24n').is(':checked'))
{ $('table').show(); }
Also in the form I have a reset button. I tried to trigger the event above when the reset button is clicked like so:
$('[type=reset]').on('click', function(){
$('input[name=24hours]:radio').triggerHandler('change');
});
The problem is, when the reset button is click for the first time, it only change the radio button to its initial state. The trigger jquery will only happen when the reset button is clicked again.
So, how can I make the trigger jquery automatically run on first click of reset button?
EDIT: Here's the example of action. When I check on the radio button #hours24n, a table will be shown. and if I check on the radio button #hours24y, the same table will be hidden.
let's say initially, the table is shown with #hours24n is checked. Then, I check on #hours24y thus the table will be hidden. Now, what I expect after clicking the reset button is, #hours24n will be checked and at the same time, the table will be shown again.
Try adding closing bracket, parentesis to change handler }) , utilizing selector 'input[name=24hours][id=hours24n]:radio' , setting .prop("checked", true) before calling .triggerHandler('change') at click event , calling .click() event to set #hours24n intially checked
$(function() {
$('input[name=24hours]:radio').on('change', function() {
if ($('#hours24y').is(':checked')) {
$('table').hide();
} else if ($('#hours24n').is(':checked')) {
$('table').show();
}
})
$('[type=reset]').on('click', function() {
$('input[name=24hours][id=hours24n]:radio')
.prop("checked", true).triggerHandler('change');
}).click();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="radio" name="24hours" id="hours24y" />
<input type="radio" name="24hours" id="hours24n" />
<input type="reset" />
<table>
<tbody>
<tr>
<td>
checked
</td>
</tr>
</tbody>
</table>
jQuery
$('input').on('change', function() {
if ($('.radio[name=24hours]').is(':checked')) {
{
$('.table').fadeTo(500, 1);
this.checked = false;}
if($('#hours24n').is(':checked'))
{
$('.table').fadeOut(500, 0);
this.checked = false; }
}
});
Try that, then create your table with the class 'table', saves the hassle if you need to apply more tables without using this method. Format your cells within;
<table class="table" style="opacity: 0"></table>
I am trying to prioritize click event in case two events click and change are fired.
I have a global function similar to "ValidateOnChange" and "ValidateOnClick" to validate input of text box on change and on click event.
Enter some text, it shows up error message. Then try to input correct value and click the Submit button, the error vanishes and this makes user to click the button twice. Here I am trying to fix this double click.
Here is mock up code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>Enter any string:</div>
<div><input type="text" id="txtInput" ></input></div>
<div id="divError" style="color: red; display: none;">Please enter 0</div>
<input type="button" value="Submit" id="btnSubmit" ></input>
<script type="text/javascript">
var mouseevent_var = null;
function ValidateOnChange(e) {
var input = $('#txtInput').val();
if (input == '0') {
$('#divError').hide();
} else {
$('#divError').show();
}
}
function ValidateOnClick(e){
alert("Hurray!!! You got it right!");
}
$('#txtInput').mousedown(function (e) {
mouseevent_var = e;
});
jQuery(document).ready(function(){
$('#btnSubmit').click(function(e){
ValidateOnClick(e);
});
$('#txtInput').change(function(e){
ValidateOnChange(e);
});
//User don't want error when they are typing in.
//$('#txtInput').keyup(function() {
//$('#txtInput').trigger("change");
//});
});
</script>
</body>
</html>
The keyup event seemed to be solution but users don't want the error to popup when they are typing in.
Is there any way to list all the triggered events so that I could filter "mousedown" and "mouseup" events for submit button? Or is there any alternative way to prioritize click event ?
There can be many alternatives depending on the situations. I have made few minor changes to avoid the double click issue (comments amended). Basically we need to bind the mousedown event on the button object. There we will set a temporary flag variable to true. In the same time if input's change event gets fired then you can skip the checking if the temporary flag variable is true. Reason behind the double click for triggering the button's click event is better explained here: How to get jQuery click event after append in change event handler
Your updated js code below:
var mouseevent_var = false;
function ValidateOnChange(e) {
// Skip validation if the change event is fired due to user's click on submit button
if(mouseevent_var){ return false; }
var input = $('#txtInput').val();
if (input == 0) {
$('#divError').hide();
} else {
$('#divError').show();
}
}
function ValidateOnClick(e){
mouseevent_var = false; // Reset mouseevent_var to false
alert("Hurray!!! You got it right!");
}
$('#btnSubmit').mousedown(function (e) {
mouseevent_var = true;
});
jQuery(document).ready(function(){
$('#btnSubmit').click(function(e){
ValidateOnClick(e);
});
$('#txtInput').change(function(e){
ValidateOnChange(e);
});
//User don't want error when they are typing in.
//$('#txtInput').keyup(function() {
//$('#txtInput').trigger("change");
//});
});
The above code is just a fix as per your need. But there are other better alternatives too. Ideally you should not have two different validation functions for validating same fields on different events. You must think of managing it with a single function.
here is my html :
<span class="checkbox checked replacement" tabindex="0">
<span class="check-knob"></span>
<input type="checkbox" name="data[InfoPagesClient][3][info_page_id]" value="25" checked="checked" class="">
</span>
<label for="InfoPagesClient3InfoPageId" class="label">asdasd</label>
now I want to show hide this pencil box on checkbox click event..
javascript :
$("p.checkbox-group span.checkbox").on('click', function(){
if($(this).hasClass('checked')) {
$(imgId).hide();
} else {
console.log('aaaaaaaaaaa');
$(imgId).show();
}
});
$("label.label").on('click', function(e) {
if ($(this).siblings('span.checkbox').hasClass('checked')) {
$(imgId).hide();
} else {
$(imgId).show();
}
e.stopImmediatePropagation();
});
clikcing on label it is going to span click event and prints console value... I tried using e.stopPropogation() and stopImmediatePropogation().. but ti is not working..
any idea ??
e.stopPropogation() or e.stopImmediatePropogation() will prevent the event from bubbling up, but will not stop the event immediately.
You can use e.preventDefault() along with e.stopPropogation(). e.preventDefault() will prevent the default event from occurring. You can check with the following change in your code.
$("p.checkbox-group span.checkbox").on('click', function(e){
e.preventDefault();
e.stopPropagation();
if($(this).hasClass('checked')) {
$(imgId).hide();
} else {
console.log('aaaaaaaaaaa');
$(imgId).show();
}
});
$("label.label").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
if ($(this).siblings('span.checkbox').hasClass('checked')) {
$(imgId).hide();
} else {
$(imgId).show();
}
});
When you use label with for, browser will automatically click the associated control which triggers the "click" event. That is another event triggered later, in your case when you use e.stopImmediatePropagation();, it just stops the current "click" event and has no effect on the event of the associated control fired after that
To fix your issue, try removing for
Use this:
<label class="label">asdasd</label>
Instead of:
<label for="InfoPagesClient3InfoPageId" class="label">asdasd</label>
If you add the id attribute to your checkbox, then the label will work. Then you can simplify your code as follows:
$(function () {
$("p.checkbox-group input[type=checkbox]").on('change', function () {
if (this.checked) {
$(this).parent().addClass('checked').siblings('a.edit-content').hide();
} else {
$(this).parent().removeClass('checked').siblings('a.edit-content').show();
}
});
});
http://jsfiddle.net/gFXcm/2/
mmmh, isn't it a feature instead of a bug ? shouldn't the click on the label trigger the same action as the click on the "checkbox" ? That's precisely why the for attribute is used I guess.