Detect change in an input field when selecting value from a box - javascript

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.

Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works

Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

Related

How to trigger an event when the user clears the text field and focus out of the text field using Jquery?

I need to write an event handler when user clears the text field and moves out of focus from the same.
I'm using the following function to catch "focus out" event.
$("input[type=text]").blur(function () {
}
I have the followingfunction to capture clear field event.
$("input[type=text]").keyup(function() {
if (!this.value) {
}
}
I tried using the keyup() function inside blur() since I need to capture the focus out and then clear field. This is how my code looks like:
$("input[type=text]").blur(function () {
$(this).keyup(function() {
if (!this.value) {
}
}
}
But it doesn't work. Clear field event is triggered even before focus is out of the field. Also, it is triggering the event multiple times. What is the problem here?
I think that is more simple:
$('input').on('blur', function(e) {
if(!$(this).val()) {
// IS NO VALUE IN THE INPUT
$(this).trigger('blur'); // trigger the blur event
}
});
Here you are:
$("input[type=text]").on('blur', function() {
alert('blur');
});
$("input[type=text]").on('input', function() {
if (!$(this).val()) {
alert("input nothing");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
Hope this helps.

jquery input field focus out except a div

I'm making ajax suggestion of search in which,
a suggestion box will be displayed
<div id="searchbox">
<input type="text" name="search" class="searchinput"/>
</div>
<div id="sugbox">
......
<a href="product.php?id=2" >Item 1</a>
.....
</div>
and Javascript
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#searchbox .searchinput').focusout(
function () {
$('#searchbox #sugbox').hide();
});
The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout.
Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).
How can i check if the target div is the suggestion box so don't hide the box
ex ..
$('#searchbox .searchinput').focusout(
function () {
if(target div is not sugbox)
$('#searchbox #sugbox').hide();
});
try to assign a class to sugbox at hover class
$(".searchinput").focus(function(){
$("#sugbox").show();
});
$(".searchinput").focusout(function(){
if(!$("#sugbox").hasClass("hovered"))
$("#sugbox").hide();
});
$("#sugbox").hover(function(){
$(this).addClass("hovered");
},function(){
$(this).removeClass("hovered");
});
here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5
add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding
var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
function () { boxClicked = true;});
$(document).mousedown(// reset boxclicked
function () { boxClicked = false;});
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#mainsearch .searchinput').focusout(
function () {
if(!boxClicked) $('#mainsearch #sugbox').hide();// add condition
});
You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/
$('#searchbox #sugbox').show();
Should be
$('#mainsearch #sugbox').show();
Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it.
On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.
If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).
$('#searchbox .searchinput').focus(
function () {
$('#sugbox').show();
});
$('#searchbox .searchinput').focusout(
function (event) {
if(!$('#sugbox').hasClass('NoHide'))
$('#sugbox').hide();
});
$('body').on('click',
function (event) {
if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") && !$(event.target).is("#sugbox")){
$("#sugbox").hide().removeClass('NoHide');
}else
{
$("#sugbox").show().addClass('NoHide');
}
});

Select all the text in an input, focusin

I want to have all the text selected when I give the focus to an element.
I used
$('.class-focusin').focusin(function(e) {
$(this).select();
});
But it's not the perfect behavior I want. When i click between two characters, the input value is not seleted, there is a cursor in the middle.
I want the behavior of the url bar in chrome browser: you click and the cursor is replaced by the value selection
Feel free to test my problem in this fiddle:
http://jsfiddle.net/XS6s2/8/
I want the text to be able to receive the cursor once selected.
The answer selected, below is definitely what I wanted, Thanks
You could have a variable to see if the text has been selected or not:
http://jsfiddle.net/jonigiuro/XS6s2/21/
var has_focus = false;
$('.class-focusin').click(function(e) {
if(!has_focus) {
$(this).select();
has_focus = true;
}
});
$('.class-focusin').blur(function(e) {
has_focus = false;
});
I guess you have to wait for the browser to give focus to the element, then do your selection:
$('.class-focusin').focus(function(e) {
var $elem = $(this);
setTimeout(function() {
$elem.select();
}, 1);
});
Yuck. Or simply bind to the click event instead:
$('.class-focusin').click(function(e) {
$(this).select();
});
Try using click instead of focusin.
$('.class-focusin').click(function(e) {
$(this).select();
});
Demo
Bye!
Working Demo http://jsfiddle.net/cse_tushar/XS6s2/22/
$(document).ready(function () {
$('.class-focusin').click(function (e) {
$(this).select();
});
});
It's a direct duplicate of Select all the text in an input, focusin, here's a nice answer from it
$(".class-focusin").on("focus",function(e){
$(this).select();
});
$(".class-focusin").on("mouseup",function(e){
e.preventDefault();
});
http://jsfiddle.net/XS6s2/31/

using jquery i want the a div to hide when the input is empty?

For example say i have a text box and a hidden div called suggestions
$("#suggestinput").on({
keyup: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
}
//another event to know if input is empty while on focus, then removeClass('active');
});
The first event is when the user types in the input show suggestion, the second one is blur, so when the user unfocuses on the input the suggestions el will hide, i want a third event to check while on focus if the input is empty remove active class.
Working example is here thanks: http://jsfiddle.net/HSBWt/
Try this - http://jsfiddle.net/HSBWt/1/
$("#suggestinput").on({
keydown: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
},
keyup: function () {
if ( $(this).val() == "" ) {
$("#suggestions").removeClass('active');
}
}
});

Get state of checkbox using javascript

I'm trying to write a javascript with jquery which should be able to pick out and use information on if a checkbox is checked or not. This should happen every time the checkbox(has id 'edit-toggle-me') is clicked. I've written a test function for this with some alert() in it to see if I've succeeded or not.
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
if ($('#edit-toggle-me').checked()) {
alert('Yup!');
}
else {
alert('Nup!');
}
});
});
})(jQuery);
It perform neither of the alerts so I'm guessing it crashes at $('#edit-toggle-me').checked(). I don't know why though.
I've also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var elementy = document.getElementById('edit-toggle-me');
var check = elementy.value;
alert(check);
if(elementy.checked()) {
alert('yup');
}
});
});
})(jQuery);
The first alert works, but neither or the last two 'yup' or 'nup'.
And then I also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var element2 = document.getElementById('edit-toggle-me');
var check = element2.value;
alert(check);
});
});
})(jQuery);
This always return 1. Which I don't understand why either.
Grateful for any hints.
Use .is(':checked'). You can find the documentation HERE.
JSFIDDLE
There is no such method as .checked() in jQuery or in the DOM API. There is simply a .checked property on the element that is true if the element is checked, false otherwise. Try this:
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
alert( this.checked ? ":)" : ":(" );
});
});
})(jQuery);
See demo: http://jsfiddle.net/scZ3X/
$(function(){
$('#edit-toggle-me').on('change', function(){
if($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
});
You should have to use �change� event instead click. Because In some cases click event is not good to use in check box and radio buttons.
Example 1:
If you have a radio button have click event bind. In case your radio button is already true and you clicking in radio button. It�s not change radio button value, But your click event fire every time.
But in case if you use change event. Your event will fire only if your radio button value got change(If it�s already not checked or true)
Example 2:
If you have any label for any radio button or check box. In case you have click event bind in checkbox or radio button. On click of your label your check box or radio button value got change but your click event will not call.
In case of change event. It�ll work as expected on click of label related label too.
Try this:
$('#edit-toggle-me').is(':checked')

Categories