I've been having trouble with a seemingly simple function...I have a form where 3 of 5 field values are generated by a script tied in with Google Search (like a business address). The user is prompted to enter their business license #, and as soon as the input field has val().length == 9 characters, I want to execute an ajax call among some other functions...
The problem is the function works when there are 9 characters in the field, but only after I generate a new and different set of values for the generated fields (i.e. the first generated values, coupled with those 9 characters isn't enough to set off the function, although when i use a second set of generated values, the function kicks in).
Here's the applicable code...although there's a lot more to the picture...
// when the business licence text field is focused (should be 9 characters long)
$('#ubi').focus(
function() {
var ubiVal = $('#ubi').val();
if(ubiVal.length == 9) {
//Set some values I'll need for my ajax call...
var bnameVar = $("#title").val();
var ubiVar = $("#ubi").val();
//hide Google search results w/ form-value generator buttons...
$('#searchResults').toggle(false);
//This is the div I want to show once #ubi is 9 characters...
$('#verified').toggle(true);
//Loading...
$('#verified').append("<div id='ajaxBusy'><img src='images/addmapp_loading.gif' class='loadingText' /><h3 class='loadingText'>Searching business records...</h3></div>");
//Loading display...
$('#ajaxBusy').css({
display:"none",
margin:"3px",
paddingTop:"0px",
paddingBottom:"0px",
position:"absolute",
width:"auto"
});
//Loading text display...
$('#loadingText').css({
display:"inline",
position:"absolute",
top:"7px",
left:"40px",
});
//Use 9-digit number from #ubi to perform my ajax function & handle results...
$.getJSON("addmapp_sandbox/tim/scraper/readdol.php?ubi=" +
ubiVar + "&name=" +
bnameVar + "",
function(data){
var ubi = data.ubi
ubi = ubi.substring(0,9);
$("#verified").html("<h3 class='loadingText'>" +
data.firmName + "</h3><h4>" +
ubi + " </h4><h4>" +
data.isMatch + "</h4><h4>"+
data.locationAddress+"</h4>"
);
});
} // End if
} // End function()
); //End ('#ubi').focus()
It should work like: User types a business name into a text input, google search results asynchronously begin to appear as the user types, user finds said business within a set of results, clicks 'this is me', certain google results are appended to the form, THEN *** the user inputs a ubi number and the moment they type the 9th digit the rest of the function takes place...***
I would really appreciate the help, if even just a prod in the right direction. Thanks in advance!