Get input variable after it is filled then do ajax

Question

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;

 });

Your code seems to be correct, just use different events for different functionalities i.e. "keyup" for validation "change" for ajax don't combine both in one. — kcak11
– kcak11, Commented Feb 19, 2014 at 11:09

Kiran · Accepted Answer · 2014-02-19 11:23:50Z

2

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

edited Feb 19, 2014 at 11:23

answered Feb 19, 2014 at 11:12

Kiran

1,7981 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mannekenpix · Accepted Answer · 2014-02-19 11:09:37Z

0

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 )

answered Feb 19, 2014 at 11:09

Mannekenpix

7627 silver badges16 bronze badges

2 Comments

alex Over a year ago

Using onBlur might not ber the best solution, because the obtained location shouldn't only be showed when the focus is lost (the user clicks anywhere elöse outside the control) but just when the user finishes his input, so the onChange event seems to be more suitable

Reza Over a year ago

voted up.. was going for the onBlur, but did not thought about this. thank you!

SlashmanX · Accepted Answer · 2014-02-19 11:09:49Z

0

Change 'keyup change' to blur

Blur is essentially the opposite of focus

Documentation here

answered Feb 19, 2014 at 11:09

SlashmanX

2,61120 silver badges17 bronze badges

Collectives™ on Stack Overflow

Get input variable after it is filled then do ajax

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related