How do I access an input field text with jQuery?

Question

I am trying to use the typeWatch plugin for jQuery. I have this javascript:

 <script type="text/javascript">
 $(document).ready(function() {
   var options = {
        callback: function() { alert("a-ok!  " + $(this).text); },
        wait: 333,
        highlight: true,
        captureLength: 1
    }

    $("#customer").typeWatch(options);
 });
 </script>

And my view's HTML has this:

 Method B: <%= Html.TextBox("customer") %>

With this test, if I type "ABC" in the textbox, I am expecting an alert to popup with "a-ok! ABC". Instead the following shows up...

a-ok!  function (F) {
    if (typeof F !== "object" && F != null) {
        return this.empty().append((this[0] && this[0].ownerDocument || 
               document).createTextNode(F));
    }
    var E = "";
    o.each(F || this, function () {o.each(this.childNodes, function () {
          if (this.nodeType != 8) {
             E += this.nodeType != 1 ? this.nodeValue : o.fn.text([this]);}});});
   return E;
}

I've tried changing the $(this).text to .val, and I've also tried referencing the input field more directly as $("#customer") but they yield similar results. How can I access just the entered text?

Answer 1

You should use the val() function on the textbox:

$(this).val();

Answer 2

Looking the code of typeWatch version 2.0 I found this:

 function checkElement(timer, override) {
  var elTxt = jQuery(timer.el).val(); <----------- !!! this...

  // Fire if text > options.captureLength AND text != saved txt OR if override AND text > options.captureLength
  if ((elTxt.length > options.captureLength && elTxt.toUpperCase() != timer.text) 
  || (override && elTxt.length > options.captureLength)) {
   timer.text = elTxt.toUpperCase();
   timer.cb(elTxt); <-------------- !!! ...goes here.
  }
 };

timer.cb is the callback that you set up in the options. So you just add a parameter in that callback function that you use and that parameter will be the text from the input.