We Keep Coding

How to call a function AFTER blur from input?

I'm using jquery-ui datepicker as one of my inputs. If a user blurs from an input, I display a relevant message (e.g. "This field is required"). For this purpose I have the following jQuery, which works perfectly fine for simple <select> and <input type="text"> tags:
$("input").blur(function(){
if($(this).val()=="")
$(this).next().text("This field is required.");
else
$(this).next().text("");
});
However, in case of datepicker (where I have to essentially blur to select a date) the error message gets displayed even after I've selected the date (i.e. selection of date is leading to the blur event). This requires that the .blur(function(){}); should be called after the blur event is completed (not simultaneously).
How to solve this situation?
Here's a DEMO.

You could add your validation check to the onClose event of the datepicker, rather than the blur event of the input field:
$("#datepicker").datepicker({onClose: function(selectedDate) {
if(!selectedDate) {
$(this).next().text("This field is required.");
}
}});

Kind of a hack, but you could just delay the check with setTimeout:
$("input").blur(function () {
var $t = $(this);
setTimeout(function () {
if ($t.val() == "") $t.next().text("This field is required.");
else $t.next().text("");
}, 100);
});
http://jsfiddle.net/D4AGz/96/

Get input variable after it is filled then do ajax

I have a checkout form where a zipcode is needed. I need this zipcode to get a LocationID. The zipcodes are in 0000XX format but i just need the first 4 digits. Now i have made a (global) javascript to get the locationID trough ajax.
The only problem is that now im using a keyup function that is activated when someone types in a zipcode. But i want it to be activated when a user has typed in something and clicks on another field. how can i do this ?
$('#deliveryzip').bind('keyup change', function(){
//Get zip
var zip = $('#deliveryzip').val();
//Strip first 4 chars from input
//check if 4 chars are integer
//if all ok do ajax...
//Get locationID from zipcode
$.post(jssitebaseUrl+'/ajaxFile.php',{"zip":zip,"action":"getLocInfo"},function(response){
if(response == "ok"){
alert(response);
//If return is ok..
var show = true;
}
});
if(show){
$('#locInfo').show();
} else {
$('#locInfo').hide();
}
return false;
});

Instead of listening to the keyup event, why don't you just listen to the change event?
$('#deliveryzip').on('change', function(){....});
The change event fires when an input field changed and once it looses focus (e.g. through the user clicking on another element). See http://msdn.microsoft.com/en-us/library/ie/ms536912(v=vs.85).aspx for more info (from Microsof) and here the documentation from Mozilla https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change

You can use onBlur function : http://www.w3schools.com/jsref/event_onblur.asp
The onblur event occurs when an object loses focus.
Onblur is most often used with form validation code (e.g. when the user leaves a form field).
Tip: The onblur event is the opposite of the onfocus event.
With jQuery : on( "blur", handler )

Change 'keyup change' to blur
Blur is essentially the opposite of focus
Documentation here

Reading an HTML input field entered without a final Return

I have an input element in this jsfiddle: http://jsfiddle.net/stevea/DLe3a/9. If I enter Return after putting something in the field I trigger the change handler and pick up and display the value fine:
$(function() {
$('input#fname').change(function(e) {
$('div#firstName').append(this.value);
});
But what if the user forgets to hit return and closes down the page? I want to come back, in that case, when I sense the page shutting down, and pull out what was entered into the Input field without a Return.
Can I do that? In the jsfiddle I have a button and its handler. Assuming the button click is shutting down the page, how would I respond to the button click to get the value sitting in the input field?
Thanks

Try this sir
$(function() {
$("#fname").change(function(e) {
$("#firstName").append(this.value)
});
$("#getInput").click(function (e) {
});
});

To detect if the page is closing, use the .unload() event
$(window).unload(function() {
var input = $('#fname').val();
});

I believe that you want to do some code when the window is pre-closed.
Here is some sample code: jsDiddle
$('#fname').change(function () {
$('#firstName').append(this.value);
});
window.onbeforeunload = function (e) {
var e = e || window.event;
// get input #fname
$('#firstName').append($('#fname').val());
// do something you want before the window closes
// show confirm message (optional) - if you don't want show message, return '';
//IE & Firefox
if (e) {
e.returnValue = 'You have some unfilled inputs!';
}
// For Safari
return 'You have some unfilled inputs!';
};

The problem isn't detecting a page closing down. The problem is to capture an Input field's content when something external happens before the user enters Return. But after playing around with it more, at this jsfiddle - http://jsfiddle.net/stevea/bT54M/3/ - it turns out that there really is no problem. If you're in the middle of entering text into an Input field and you do something external, like hitting the Get Input button in the jsfiddle above, the change event for the Input is triggered automatically and this.value is what you've entered so far. So the bottom line is that you don't need to hit Return when you're done. Just about anything you do outside of the Input (probably anything that blurs the Input focus) triggers the Input change event.
$(function() {
$('input#fname').change(function(e) {
debugger;
$('div#firstName').append(this.value);
});
$('#getInput').click(function() {
debugger;
$('div#firstName').append(this.value);
});
});

Dynamically added input to form doesn't validate after first validation

I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)

Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.

Change event precedence with JQuery

I have the following html code:
<input type="text" id="theInput" value=""/>
Click me
I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:
$('#theLink').live('click', function(){
alert('click');
});
$('#theInput').live('change', function(){
alert('change');
});
However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only "change" message is displayed.
I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.
The example is here.
I use jQuery 1.6.4.

As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).
To solve your problem, you could listen to click events on the document and compare the event's target with #theLink. Any click event will bubble up to the document (unless it is prevented).
Try this:
var lastValue = '';
$(document).click(function(event) {
var newValue = $('#theInput').val();
if ($(event.target).is('#theLink')) {
// The link was clicked
} else if (newValue !== lastValue) {
// Something else was clicked & input has changed
} else {
// Something else was clicked but input didn't change
}
lastValue = newValue;
});
JSFiddle: http://jsfiddle.net/PPvG/TTwEG/

Both events will fire but in your example the alert in the onchange event handler fired when the onmousedown event occurs will stop the onmouseup event required for the onclick event to fire. Using console.log will show both events firing.
http://jsfiddle.net/hTqNr/4/

Ok, now i got it, you could do
$('#theLink').live('click', function(e){
alert('click');
});
$('#theInput').live('change', function(e){
//Check if the change events is triggerede by the link
if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
//if this is the case trigger the click event of the link
$('#theLink').trigger("click");
}else{
//otherwise do what you would do in the change handler
alert('change');
}
});
Fiddle here http://jsfiddle.net/hTqNr/19/

why you dont pick the value of input box. you have to store initial value of input box on ready function
initialvalue= $('#theInput').val();
then compare the value
$('#theLink').live('click', function(){
var newvalue =$('#theInput').val();
if(newvalue!=initialvalue) {
//do something
}
});