Question

This should really be easy and it has worked on every page of my site except for this one. I really can’t figure out what I’m doing wrong.

<script type="text/javascript"> 
$(document).ready(function()
{
    $("#center, #west").css("min-height","110%");
    $("#positionName").NobleCount('#positionNameCounter', {max_chars: 50, on_negative: 'go_red', on_positive: 'go_green' });
    $("#cName").NobleCount('#cName_counter',{ max_chars: 255, on_negative: 'go_red', on_positive: 'go_green' });
    $("#cURL").NobleCount('#cURL_counter',{ max_chars: 255, on_negative: 'go_red', on_positive: 'go_green' });
    $(".info th").addClass("ui-widget-header").css("border","none").attr("style","font-size:14px; padding:7px;");
    $(".info").addClass("ui-corner-all");
    $(".info td").addClass("padding");
    $(".bold").addClass("ui-tabs-nav");
    var company = $("#company").val();
    $("#checkAvailability").click(function(){
        alert(company);
    });
});
</script> 

And here is my html:

<input type="text" name="company" id="company" maxlength="40" title="Desired Company Name" style="width:50%;" /><span style="width:20%; padding-left:5px; cursor:pointer; text-decoration:underline;" id="checkAvailability">

Its killing me b/c I can’t figure it out for the life of me. Thanks in advance,

Jeff

Edit: Andy E. hit it on the nail, thanks for you help.

Answer 1

Your text box doesn’t have a default value, so it will be blank when the company variable is set using the following line in your ready handler:

var company = $("#company").val(); // Empty here since no value has been set 

Change it to:

var company = $("#company");
$("#checkAvailability").click(function(){
    alert(company.val());
});