jquery change function does not work when fill input from cache - javascript

I try do form validator using jquery. Generally everything works except one situation.
I want in any change in input my function checkEmail check is everything is ok. If not color of input is change on red. When i write or paste to input it works but when i choose value from cache (browser give me list of value to choose) my input do not change color.
const checkEmail = () => {
if (!validator.isEmail(emailInput.val())) {
emailInput.removeClass('input-success')
emailInput.addClass('input-error')
return false
} else {
emailInput.removeClass('input-error')
emailInput.addClass('input-success')
return true
}
}
emailInput.change('input', checkEmail);
Is any way to trigger a function on really any change? I event try setTimeOut but then it looks like jquery do not see value in my Input.
PS. Im new here please be patience :)

emailInput.on('input', checkEmail);
here the demo https://jsfiddle.net/kt56opsx/

Related

Textbox is not taking the value that I assign

I have a page with 10 inputs (TextBox).
I set each input value in the Page_Load with
txtColor.Text = "#FFFFFF"
Each input is a color picker. When the user pick a color, the hexa-name is set in the textbox with a javascript piece of code:
document.getElementById(txtColor).setAttribute("value", newColor);
Buuuuuuut when I try to save the changes I DONT KNOW WHY but the values saved are the old ones.
If at first the value was "FFFFFF" but then the user chose "000000" the program ignores that and save the "FFFFFF" in my db.
I'm working with vb.net
I appreciate any kind of help!
Edit:
Oh god, of course it was the thing that Tim Medora say.
I put the 'Not IsPostBack' and everything works just fine.
Thanks a lot, i wasnt able to see my error.
You say you're using vb script, but your post is tagged javascript. It's not clear what you're working with, but in JavaScript I'd do this:
colorPicker = document.getElementById("color-picker");
colorPicker.addEventListener("change", function () { updateTextBox(); });
textBox = document.getElementById("text-box");
function updateTextBox() {
textBox.value = colorPicker.value;
}
Hope this helps...

Using JQuery MaskInput Plugin with a SSN Field

I am trying to use the JQuery MaskInput plugin on a SSN field but I dont see anyway to make it display "***-**-****" after the user leaves the fields.
Did anyone get this working>
I havent tested this, but it may get you headed in the right direction. The masked input plugin has a completed function that can be called when the user has finished entering their value. You can use it to grab the value and store it in a hidden field to retain it and replace the current text with whatever you desire.
var $txt_SNN = $("#txt_SSN");
$txt_SNN.mask("999-99-9999", {
completed: function() {
$('#hdf_SNN').val($txt_SNN.val());
$txt_SNN.val("999-99-9999");
}
});
$txt_SNN.mask("999-99-9999").blur(function() {
$(this).attr('type', 'password');
});`
This should do it. Although I didn't test it.

overriding data-confirm values

I want to change the value of data-confirm attribute on a button (submit) based on user's choices on a form. I put the following on the change function of a dropdown list:
...
if($("#"+select_name).val() == "abc")
{
$(".variable_button").attr("data-confirm","abc is good choice!");
} else
{
$(".variable_button").attr("data-confirm","abc would have been great but this is fine too...");
}
...
The problem I am facing is that apparently data-confirm cannot be changed once it is assigned a non-empty string. I have it set to "" in the server code. And, it changes to one of the two messages shown above when the user first makes a selection on the dropdownlist. But if the user changes the selection one more time, the data-confirm message does not change. Is this per design or am I missing something?
Don't use .attr(), use .data():
var newData = ($("#"+select_name).val() == "abc")
? "abc is good choice!"
: "abc would have been great but this is fine too...";
$(".variable_button").data("confirm", newData);
jQuery does allow you to update a data- attribute with the .attr() method, so something else is breaking.
Here's a working example (JSFiddle):
var counter = 1;
$('#click').click(function() {
button = $('#click');
console.log(button.attr('data-confirm'));
button.attr('data-confirm', 'this is test ' + counter);
console.log(button.attr('data-confirm'));
counter++;
});
Can you try to repo the issue in a JSFiddle?
On rereading your question, it sounds like an event handler isn't firing the second time the user changes the selection. See if you can set a breakpoint in your event handler to see if it even gets hit.

how to change the value of a Div according to whats typed into a form input

I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});

set value to jquery autocomplete combobox

I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});

Categories

Resources