How to get option value on change AND on page load? [duplicate] - javascript

This question already has answers here:
How to trigger jQuery change event in code
(5 answers)
Closed 8 years ago.
I know that it is possible to do in two functions, but I am not sure how to make it in one.
$("#purchase_sub_type").change(function() {
if($(this).val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
});
This is example code. Problem is that this code works only on change, not when value is loaded form DB on page reload. Is there simple way to add current val to this function? I know that it is possible adding another function, but in that way code gets ugly and repeats.

Trigger the change event so the code fires
$("#purchase_sub_type").change(function() {
if($(this).val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
}).change(); //or .trigger("change");

Generally it is good idea to give function a name.
var field = $("#purchase_sub_type");
function log () {
if(field.val() == 15) {
console.log('is 15');
}
else {
console.log('not 15');
}
};
field.change(log);
log();

Related

How to improve "on keyup" speed? [duplicate]

This question already has an answer here:
Keyup event handler shows slow performance
(1 answer)
Closed 5 years ago.
Here is my code:
$('#MyInput').on('keyup', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
I want to run a function when the input has only one character.
The problem is that if the user type a word really fast, the 'keyup' event seems to be called starting from the second character, which means it will not call ajaxSearch() method.
Is there any way to improve the 'keyup' event speed to call the function when it has only 1 character?
When user types too fast, he/she may have not released the previous key yet, so keyup technically hasn't happened yet.
Try keypress instead of keyup
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
Edit
On keypress input's value property has not be been updated yet, so catch keyup as well in case user only inputs a single character.
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});
$('#MyInput').on('keyup keypress', function(e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val(),e);
}
});
function ajaxSearch(value,e) {
console.log(value, e.type)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="MyInput">
Try keypress instead of keyup
$('#MyInput').on('keypress', function (e) {
if ($(this).val().length == 1) {
ajaxSearch($(this).val());
}
});

How to combine keypress and onclick function Javascript? [duplicate]

This question already has answers here:
How to combine keypress & on click function in JavaScript?
(5 answers)
Closed 5 years ago.
I have the following two functions:
$("input").keypress(function(event) {
if (event.which == 13) {
//code
}
});
$('#login_submit').click(function () {
//code
});
The code which is being used in the functions are EXACTLY the same code, basically code duplication. So i was wondering if there is a way to combine these functions with an AND statement?? There is an question on Stack but it aks for an OR logic. If you want the OR solution here
EDIT: I am trying to make somthing like an explorer. Now I want to hold "shift" and click on an "input" to mark them all. So i need the "onclick" on my input element to be true AND my keydown to be true.
After your edit, I believe what you are looking for is something like the following.
var shift_hold = false;
$(document).keydown(function(e) {
if(e.which === 16) {
shift_hold = true;
}
})
$(document).keyup(function(e) {
if(e.which === 16) {
shift_hold = false();
}
})
$('input').click(function() {
if(shift_hold) {
//your code here
}
})
I want to hold "shift" and click on an "input" to mark them all. So I need the "onclick" on my input element to be true AND my keydown to be true.
Within the click event, you can check if a key is also pressed down (click and key-is-down).
You can use the event object to see which keys are pressed. shift/control/alt have their own explicit properties.
Example:
$("input").click(function() {
console.log(event.shiftKey)
if (event.shiftKey) {
$(this).addClass("selected")
} else {
$(this).removeClass("selected")
}
// could use .toggleClass("selected", event.shiftKey) here,
// shown expanded for clarity
});
.selected {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Shift-click input to select, click to unselect
<input type='text'>
<input type='text'>

The second if else statement(for no. of attempts) doesnt seem to be working [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
No alert pops out when the number of attempts is 2. Is the attempts variable not getting increased? I am not able to find out. Please help.
var attempts = 0;
var $code = "youknowme";
$('.go').on('click', function() {
if ($('#pass').val() === $code) {
window.open("3.html");
} else {
alert("wrong code");
attempts = attempts + 1;
}
});
if (attempts === 2) {
/*this code not working*/
alert("You have last chance left");
} else if (attempts === 3) {
window.close();
}
That is because you need to put the code inside the click event. As it stands the if statement is checked only once, and that happens to be just after you set the number of attempts to 0.
If you formatted your code correctly this would have made it a lot easier to spot.
This is how is should be:
var attempts=0;
var $code="youknowme";
$('.go').on('click',function(){
if($('#pass').val()===$code){
window.open("3.html");
}else{
alert("wrong code");
attempts=attempts+1;
}
/* code is now executed each time the click event occurs */
if(attempts===2){
alert("You have last chance left");
}
else if(attempts===3){
window.close();
}
});
Your code should be inside function:
var attempts=0;
var $code="youknowme";
$('.go').on('click',function(){
if($('#pass').val()===$code){
window.open("3.html");
}else{
alert("wrong code");
attempts=attempts+1;
}
if(attempts===2){ /*this code not working*/
alert("You have last chance left");
}
else if(attempts===3){
window.close();
}
});
Your if statements need to be inside of your onclick listener. They aren't being executed when being clicked on.
The 'if' statement is outside of the 'click' function.
```
$('.go').on('click', function() {
if ($('#pass').val() === $code) {
window.open("3.html");
} else {
alert("wrong code");
attempts = attempts + 1;
}
if (attempts === 2) {
/*this code not working*/
alert("You have last chance left");
} else if (attempts === 3) {
window.close();
}
});
```

Keypress check not working [duplicate]

This question already has an answer here:
Click event not working for dynamically added Li->span->id
(1 answer)
Closed 6 years ago.
If i add the search bar right away, it works, the console returns the value of the search field every time i press enter, but if i add the search bar after the image was clicked it doesn't work.
http://codepen.io/Nadaga/pen/QEVaGA
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
})
$('#search-field').keypress(function (e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
Since, the search-field is dynamically created, It has to be added like this (on the $document),
$(document).on('keypress', '#search-field' ,function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
$('#glass-image').on('click', function() {
$('#main').html('<input id="search-field" type="text" placeholder="Search"></input>');
$('#search-field').keypress(function(e) {
if (e.which == 13) {
console.log($('#search-field').val());
return false;
}
});
})
Click event only works if the element already exist in html code. So the click event doesn't fire.It won't consider the new element which is created dynamically after the page loaded. Dynamic elements are created with the help of javascript or jquery(not in html).
source: https://stackoverflow.com/a/29674985/1848140

jQuery - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});

Categories