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
Related
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());
});
});
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.
Hiii, I am having problem with a code.
here is my structure, I have class structure as follows :
.box-slide-query
---.new-query-blocks
---.query-blocks
---.query-blocks
---.query-blocks
I need on click of .new-query-blocks class, i should get the count of number of .query-blocks. I am able to get the value but it is working when i click 2 times(On second click it update the value in attr "answerCount").
here's my code :
$('html').on('click', '.new-query-blocks', function () {
$('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});
Try this:
$('html').on('click', '.new-query-blocks', function () {
$('html').find('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});
This should happen
If the user clicks on one of the two input boxes, the default value should be removed. When the user clicks elswhere on the webpage and one text field is empty, it should be filled with the default value from the data-default attribute of the spefic element.
This happens
When somebody clicks somewhere on the page and the field is empty, the field will be filled with the right value, but when somebody clicks in the field again the text isn't removed. It seems like the $(document) click event is blocking the $(".login-input") click event, because the $(".login-input") is working without the $(document) click event.
JSFiddle
A sample of my problem is provieded here: JSFiddle
Tank you for helping!
When you click on the input, the script is working, but since the input is in the document, a click on the input is a click on the document aswell. Both function will rune, document is the last one.
That is called event bubblingand you need to stop propagation :
$(document).ready(function () {
$(".login-input").click(function (e) {
e.stopPropagation()
$(this).val("");
});
});
Fiddle : http://jsfiddle.net/kLQW9/3/
That's not at all how you solve placeholders, you do it like so :
$(document).ready(function () {
$(".login-input").on({
focus: function () {
if (this.value == $(this).data('default')) this.value = '';
},
blur: function() {
if (this.value == '') this.value = $(this).data('default');
}
});
});
FIDDLE
Preferably you'd use the HTML5 placeholder attribute if really old browsers aren't an issue.
EDIT:
if you decide to do both, check support for placeholders in the browser before applying the javascript :
var i = document.createElement('input'),
hasPlaceholders = 'placeholder' in i;
if (!hasPlaceholders) {
// place the code above here, the condition will
// fail if placeholders aren't supported
}
Try below code
$(document).ready(function () {
$(".login-input").click(function () {
$(this).val("");
});
});
$(document).ready(function () {
$(".login-input").each(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
$(".login-input").blur(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
});
Check fiddle
Why not to use focus and blur events?
$(document).ready(function () {
$(".login-input").focus(function () {
$(this).val("");
});
});
$(document).ready(function () {
$(".login-input").blur(function () {
if ($(this).val() === "") {
$(this).val($(this).attr("data-default"));
}
});
});
http://jsfiddle.net/kLQW9/5/
P.S. In yours, and this code, on focus all data fro input will be cleared. If you need to clear only default text, add proper condition for that.
I have two Radtextboxes (telerik) in two tabstrips inside my html. I want to set the value of each based on the change made by user on other. I have achived using following code:
function OnUsernameChanged() {
$('#txtUserNameTab1').focus(function (e) {
$(this).select();
});
$('#txtUserNameTab2').focus(function (e) {
$(this).select();
});
$('#txtUserNameTab1').bind('keypress blur keyup', function (e) {
var userNameValue = $(this).val();
$('#txtUserNameTab2').val($(this).val());
});
$('#txtUserNameTab2').bind('keypress blur keyup', function (e) {
var userNameValue = $(this).val();
$('#txtUserNameTab1').val($(this).val());
});
}
Its all working fine with updating the value of second textbox when first's value is changed and vice versa. But the issue is with select, when focussed on any of the textbox, it always does a select all on that textbox, but the value gets changed to initial value of the textbox.
I have created a fiddle that works the way you wanted with textbox controls.
http://jsfiddle.net/ZeEXp/1/
JS:
$('#txtUserNameTab1,#txtUserNameTab2').mouseup(function() {
$(this).select();
});
$('#txtUserNameTab1').bind('keyup', function (e) {
var userNameValue = $(this).val();
$('#txtUserNameTab2').val($(this).val());
});
$('#txtUserNameTab2').bind('keyup', function (e) {
var userNameValue = $(this).val();
$('#txtUserNameTab1').val($(this).val());
});
HTML:
<textarea id="txtUserNameTab1">asdfasdfa</textarea>
<textarea id="txtUserNameTab2">563gh45</textarea>