Input Text Box Returns Undefined in Javascript
<p>Here is my HTML:</p>

<pre><code>&lt;form name='cred' class="panel-body2"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for='addjidlbl'&gt; Username (JID):&lt;/label&gt;
    &lt;input type='text' id='addjid' /&gt;
  &lt;/div&gt;
  &lt;input type='button' id='add' value='add' /&gt;
&lt;/form&gt;     
</code></pre>

<p>Here is the JavaScript:</p>

<pre><code>$('#add').bind('click', function() {
  var jid = $('#addjid').value; 
  alert(jid);
  //var jid=document.getElementById('addjid').value;    
  var jid2 =$('#addjid').get(0).value; 
  alert(jid2);
  //  //$('#addjid').get(0).value; 
  log('jid=&gt;'+jid);
  var data = document.getElementById("addjid").value; //$(".panel.panel-default2#addjid").value;
  alert(data);

  alert("type=&gt;"+ typeof(jid));
  addRoster(jid);
});

function addRoster(jid) {
  log('addRoster=&gt;' + jid);
}
</code></pre>

<p>What I get are two message boxes with "undefined" and third with "type=>undefined".  Why can't I get the input text of the <code>addjid</code> text box?</p>

<p>If I change <code>var jid = $('#addjid').get(0).value;</code>, <code>jid</code> is just blank even when the textbox has value. Why? </p>