Capture the value of a Password input type using JQuery

Question

The goal is to log into a site and not have to refresh the screen. I am using a a textbox to capture the email/username and a password box (input type="password") for the password. Then, ideally, I want to pass those values back to a web service for authentication using JQuery/AJAX. The problem I am experiencing, however, is that the JQuery is unable to access the value of the Password field, always passing back an empty string instead of the password.

I understand the security implications of being able to access someone's password via script, but is there a way, some workaround or technique, to accomplish what I am attempting?

Thank You, G

UPDATE : How do I get points deducted for asking a question? Is this that stupid of a question? Although the answer may prove worthy of a couple of "DOH" deductions ... As it turns out there were TWO password fields on the form, each with the same ID. I was getting the value from the empty one. I appreciate everyone's responses and help however. As always I was led to some helpful links and information.

Can you show your code? jQuery IS able to access the value of password field. See [here](http://jsfiddle.net/a8uRT/) — Viktor S., Sep 05 '12 at 11:34
Check out this for you answer http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — Ron van der Heijden, Sep 05 '12 at 11:34
@Bondye — Nonsense. Security is provided via the same origin policy and from add-ons having to be installed manually. There's no need to block access to the value from all of JavaScript, so browsers don't. — Quentin, Sep 05 '12 at 11:36

score 4 · Answer 1 · answered Sep 05 '12 at 11:34

There is nothing special about password inputs as far as reading the value with JS is concerned. See this live demo for proof.

If the field isn't being submitted, then something is wrong with your basic approach.

Perhaps you are calling serialize() but haven't given the input a name. It is impossible to know what the actual problem is without seeing your code.

score 1 · Answer 2 · answered Sep 05 '12 at 11:34

<input type="password" name="password" />

and javascript

$(function(){
  $.post('your-url', {password: $("input[name='password']").val()}, callback(info){
   // proccess success
  },
  'json' // or other dataType
});

read more http://api.jquery.com/jQuery.post/

and PHP maybe:

if(isset($_POST["password"])){
 //proccess info server
}

score 0 · Answer 3 · answered Sep 05 '12 at 11:31

0

Just submit the entire form via AJAX, you don't need to take the individual values from the form, put post is as it is.

answered Sep 05 '12 at 11:31

Josh

3,445
5
37
55

score 0 · Answer 4 · answered Sep 05 '12 at 11:36

jQuery has no problems in accessing password fields value - check it out.

You will have security issues as long as you connect to your webservice over plain HTTP instead of HTTPS, so consider OAuth authorization mode if you cannot support a secure protocol.

Capture the value of a Password input type using JQuery

4 Answers4