jQuery variable claiming it's undefined when it has been defined

Question

I\'m trying to have two autofilling textboxes, one for a phone model - input1 and one for firmware - input2 on the same page. When both filled I want a div to be shown with the

Answer 1

It's probably a scoping problem. Try adding this to the top of your script:

var phone;
var phoneid;

The subsequently omit the var

phone = li.selectPhone;

Answer 2

It's not defined anywhere that's accessible to the findFirmware() function--it's defined as a var in findPhone(), hence local to that function.

Not sure what is intended by things like li.selectFirmware etc. but those will also break.

Answer 3

The problem is in the . character in id.

Basically1, a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers. There is a catch: if the first character is a dash, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.

Which characters are valid in CSS class names/selectors?

Answer 4

The problem is the periods in your div's ID attributes and in your findFirmware() function, change it to

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    firmware = li.selectFirmware;
    firmwareid = phone.replace(".","");
    $(".info").hide();
    $('#' + phoneid + firmwareid).show(); // This line was messed up
};

There two problems with this line $(phoneid+firmware).show, well four if you count the missing parenthesis and semicolon but...

1. The div your trying to show has an ID, you don't have # in your selector to select the element by ID
2. firmware contains the unparsed string with the period so phoneid + firmware becomes iphone2g1.2 when your div ID is iphone2g12 thus you needed to use firmwareid in which you parsed it out of.

Fiddle Demo: http://jsfiddle.net/AaNWM/