How to catch input into a variable in Jquery

Question

Basically i am trying to create a AJAX script in Jquery. but the main problem is that i want to define the variables like this

$(document).ready(function () {
    var u = $('#username');
    var s = $('#server');
    var p = $('#password');

    $('#server').keyup(function () {
         $.post("connect.php", { s: s.value, u: u.value , p: p.value },
             function(data) {
             $('#hol').html('checking connection...' + u.value + " " + p.value + " " + s.value + " " + data);
                             }
                 ); 
   });

});

But that somehow doesn't work.... it seems rather odd that i have to define the variables with "this" instead of being able to assign them before hand.

the code that works is

$(document).ready(function () {

    $('#username').keyup(function () {
        var u = this;
            $('#password').keyup(function () {
            var p = this;
                   $('#server').keyup(function () {
                    var s = this;

                     $.post("connect.php", { s: s.value, u: u.value , p: p.value },
                     function(data) {
                        $('#hol').html('checking connection...' + u.value + " " + p.value + " " + s.value + " " + data);
                                         }); });
                 }); 
                  }); 
   });

so my question is basically "How do I make jquery catch the input in the text field and assign it to a variable? like in the first example??" or it doesnt have to be done in the long way?

Sending AJAX requests onkeyup is a bad idea. Add some debouncing code so it only happens if the user stops typing for some time (250ms might be good). — ThiefMaster
– ThiefMaster, Commented Jul 26, 2012 at 11:03
Shouldn't the selector for your first code block be $('#server, #username, #password') — JohnP
– JohnP, Commented Jul 26, 2012 at 11:05
The "code that works" doesn't really work: nesting keyup handler creation means if the user enters their password first for some reason then the #server keyup never gets set and the Ajax call doesn't happen. — nnnnnn
– nnnnnn, Commented Jul 26, 2012 at 11:24

Engineer · Accepted Answer · 2012-07-26 11:02:41Z

5

You need to use .val() instead of .value:

{ s: s.val(), u: u.val() , p: p.val() }

as s,u,and p are jQuery objects, not DOM Elements.

answered Jul 26, 2012 at 11:02

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Engineer Over a year ago

@JohnP Yes, but in that case, you will lose "magical" jQuery functionalities on s,u and p elements ).

Jithin · Accepted Answer · 2012-07-26 11:03:04Z

1

Use .val();

var u = $('#username').val();
var s = $('#server').val();
var p = $('#password').val();

answered Jul 26, 2012 at 11:03

Jithin

2,6041 gold badge24 silver badges42 bronze badges

Comments

swapnilsarwe · Accepted Answer · 2012-07-26 11:04:01Z

0

you can use in this manner

$(document).ready(function () {
    var u = $('#username');
    var s = $('#server');
    var p = $('#password');

    s.keyup(function () {
         $.post("connect.php", { s: s.val(), u: u.val() , p: p.val() },
             function(data) {
             $('#hol').html('checking connection...' + u.val() + " " + p.val() + " " + s.val() + " " + data);
                             }
                 ); 
   });

});

answered Jul 26, 2012 at 11:04

swapnilsarwe

1,3001 gold badge8 silver badges13 bronze badges

Comments

AdityaParab · Accepted Answer · 2012-07-26 11:05:07Z

0

You are using jQuery selectors..

var u = $('#username');
var s = $('#server');
var p = $('#password');

and accessing values in javascript fashion....

u.value; //WRONG

if you are using jQuery then the right way is

u.val();

or

u.attr('value');

Same goes for v and w :)

answered Jul 26, 2012 at 11:05

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

nnnnnn Over a year ago

"and accessing values in javascript fashion" - should be "accessing values in DOM element fashion". Every part of the OP's code including jQuery "syntax" is JavaScript, but the problem is .value is a DOM element property not a jQuery object property.

Bruno Schäpper · Accepted Answer · 2012-07-26 11:09:23Z

0

This should cover everything:

$(document).ready(function() {

  var u = $('#username'),
      s = $('#server'),
      p = $('#password');

  function doYourAjaxCall() {
    $.post("connect.php", { 
      s: s.val(), 
      u: u.val(), 
      p: p.val() 
    },
    function(data) {
      $('#hol').html('checking connection...' + u.val() + " " + p.val() + " " + s.val() + " " + data);
    });
  }

  u.keyup(doYourAjaxCall);
  s.keyup(doYourAjaxCall);
  p.keyup(doYourAjaxCall);

});

As always, I'd recommend reading How Good C# Habits can Encourage Bad JavaScript Habits

answered Jul 26, 2012 at 11:09

Bruno Schäpper

1,3022 gold badges13 silver badges24 bronze badges

Comments

Ram · Accepted Answer · 2012-07-26 11:38:54Z

0

as an alternative you can use serialize() method:

Encode a set of form elements as a string for submission

$('#server').keyup(function () {
         $.post("connect.php", $('input[type=text]').serialize(),
             function(data) {
             $('#hol').html('checking connection ' + data);
         }); 
   });

edited Jul 26, 2012 at 11:38

answered Jul 26, 2012 at 11:03

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

nnnnnn Over a year ago

But you've still got u.value, p.value and s.value which was the problem in the original code..

Collectives™ on Stack Overflow

How to catch input into a variable in Jquery

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related