get value from an input with datedropper js in the onchange event - javascript

I'm using the js library from datedropper, but when I want to get its value, when it changes value, no value returns, I don't know what is the correct way to do it
<input id="my-timepicker"type="text" data-lang='es' data-large-mode="true" data-large-default="true">
$(document).ready(function () {
$("#my-timepicker").dateDropper();
$("#my-timepicker").change(function () {
console.log($(this).val());
});
});

Related

How to apply masking in a textbox

I have a grid in which there is a textbox that is currently accepting numeric numbers. However I want to apply masking in that textbox using javascript or jquery without any plugin.
I have searched and everywhere they are asking for plug-in.
I tried this solution but it does not work my default value should be 00000-00-000
$("input[name='masknumber']").on("keyup change", function(){
this.value = createMask($("input[name='masknumber']").val());
})
function createMask(string){
return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
}
Any help would be appreciated.
Add a hidden input which will store original value without masking.
Html:
<input type="text" value="0000000000" id="masknumber">
<input type="text" id="numberWithoutMask" style="display:none;" value="0000000000">
JS:
// call function on change
$("#maskNumber").on("keyup change", function () {
updateValue();
})
// function to update the value with masking
function updateValue() {
$("#numberWithoutMask").val(destroyMask($("#maskNumber").val()));
$("#maskNumber").val(createMask($("#numberWithoutMask").val()))
}
function createMask(string) {
return string.replace(/(\d{5})(\d{2})(\d{3})/, "$1-$2-$3");
}
function destroyMask(string) {
return string.replace(/\D/g, '').substring(0, 10);
}
updateValue(); // call function to update the default value
If you're loading default value, load value to both the inputs.

Unable to pass string in to jquery function

I wish to grab the current value of a search input and then clear the input box on focus, store the string and pass it into a function to re-populate the input box on blur.
$("input#search").bind('focus', function() {
var search_text = document.getElementById('search').value;
$("input#search").val("");
}).bind('blur', function(search_text) {
$("input#search").val(search_text);
});
Currently, this successfully grabs the value on focus and clears the input box, but on blur, it populates the input with [object Object].
Am I correctly passing the string on line 4?
Firstly, don't use bind(). It was deprecated a long time ago. Use on() instead.
With regard to your issue, you can't directly pass a parameter to the anonymous handler function in the manner you're attempting. As it stands your search_text variable will hold the blur event.
To fix this you could store the variable in a data attribute on the #search element itself. Try this:
$("input#search").on('focus', function() {
$(this).data('search-text', this.value).val('');
}).on('blur', function(search_text) {
$(this).val($(this).data('search-text'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" value="foo bar" />
Also, the behaviour you're creating here is similar to the placeholder attribute. It may be worth investigating that to see if it meets your needs.
Use .on() of jQuery to register event.
var search_text;
$("input#search").on('focus', function() {
search_text = document.getElementById('search').value;
$("input#search").val("");
});
$("input#search").on('blur', function() {
$("input#search").val(search_text);
});
Alternate could be ,
$("input#search").on('focus', function() {
var search_text = document.getElementById('search').value;
$("input#search").val("");
$(this).on('blur', function() {
$("input#search").val(search_text);
});
});
No. Here is how you would do, declaring the variable before the event listeners so that it's in the scope:
var search_text;
$("input#search").bind('focus', function() {
search_text = document.getElementById('search').value;
$("input#search").val("");
}).bind('blur', function() {
$("input#search").val(search_text);
});
The convention in JavaScript for naming variables in Camel Case, so you would rather use searchText (not that it really matters).

How to get the value of the text box using jQuery on keypress

I want a functionality that i will type some text on the textbox and the value will be picked up by the jquery and will be stored in some variable ,how to achieve that? i am using jquery bind function but it is not suiting my purpose .
This is my textbox
<aui:input inlineField="true" label="" name="interviewCC" id="interviewCC" size="45" value=""></aui:input>
and i am using this jQuery function
$("#interviewCC").bind("click", function () {
value = $("#interviewCC").val();
alert(value)
});
but it is not picking the value i want that when i will type something on the textbox that value will be picked up.Please somebody help.
The problem is that you listen to the 'click' event and not the 'keypress' event.
Try this:
$('#interviewCC').keypress( function(e) {
var value = $("#interviewCC").val();
alert(value)
});
Use
$("#interviewCC").keypress(function () {
value = $("#interviewCC").val();
alert(value);
});
You can use the jQuery function .keyup() which will figure out when a key has been pressed and then the press has finished.
$(document).ready(function() {
$('input#text').keyup(function() {
$('.output').text($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" />
<div class="output"></div>
.keyup() Documentation

Trigger change function and set the value of select in jquery?

Hi I am having given code
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).change();
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
So I want after change function or when change function trigger at that time only permanent_address_state_code value will set same as contact_state_code value.
I have tried this code too but its not working
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).trigger('change',function(){
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
});
}
});
I am attachiing snapshot when click on check box it does not populate state
Please guide me how to solve this. Thanks in advance.
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) { $('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val());
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
This alone will work for your requirement to change permanent state and country when you click on checkbox.

why changing input doesn't trigger on change event?

I am trying to get change value of input when its values are changed.
http://jsfiddle.net/stackmanoz/694W9/
$(function () {
$('.color-iris').iris();
$('#color').on('change', function () {
console.log($(this).val());
});
});
I am using color-picker and after the input's value has changed with the new color value, I want to get its value.
But this is not going well.
Please guide me through this
Use option change
$(function () {
$('.color-iris').iris({
change: function () {
console.log(this.value);
}
});
});
DEMO
Change event would be fired only when that textbox value changes as wel as focus is getting blurred out from the particular text box,so in this context you have to use input
$(function () {
$('.color-iris').iris();
$('#color').on('input', function () {
console.log($(this).val());
}) ;
});
DEMO

Categories

Resources