html input tag always reads null in Javascript

Question

I'm trying to try a simple login page. I add a few text fields and want to read them using javascript or jquery. The issue I'm having is that I'm getting a null error every time using javascript and a blank using jquery, even if I type text into the field.

html:

<label id='userNameLabel' class='inputLabel' for='userNameInput'>Username</label>
<input id='userNameInput' name='User' class='userInput' type='text' value=''>
<label id='passwordLabel' class='inputLabel' for='passwordInput'>Password</label>
<input id='passwordInput' name='Password' class='userInput' type='text' value=''>
<input id='submitSignIn' class='button' type='submit' value='Log In'>

js:

$(document).ready(function(){
 $('#submitSignIn').click(function(){
  $userName = $('#userNameInput').text();
  $userName = $('#passwordInput').text();
  $rememberMe = $('#rememberMe').val();
 });
})

-or

$(document).ready(function(){
 $('#submitSignIn').click(function(){
  $userName = document.getElementById(userNameInput).value;
  $userName = document.getElementById(passwordInput).value;
  $rememberMe = document.getElementById(rememberMe).value;
 });
})

Can anyone tell me why I'm having this issue?

the jquery function to get an input value is .val(), not .text() — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Aug 20, 2014 at 6:09
instead of using .click() you should probably use .submit() on the form — Lukas1
– Lukas1, Commented Aug 20, 2014 at 6:09
to elaborate more on my previous comment: People can submit form even without really clicking; Or you may want to submit the form programatically later, what do you know... That's why .click() on the submit button is less reliable than $("form").submit(funtion(){}); — Lukas1
– Lukas1, Commented Aug 20, 2014 at 6:11
@Lukas1 but it will work. OP: did you check your console? Does it give any errors? And in the JS #rememberMe is undefined. Check my fiddle for a working example: jsfiddle.net/GuyT/9evt6s6b — GuyT
– GuyT, Commented Aug 20, 2014 at 6:23

Quentin · Accepted Answer · 2014-08-20 06:09:53Z

5

$userName = $('#userNameInput').text();

This attempts to take the child nodes of the input and extract the text from them.

Input elements can't have any child nodes. You want val().

$userName = document.getElementById(userNameInput).value;

This attempts to get the element by the id in the string variable userNameInput, which is undeclared. You need to put quotes around it to make it a string literal.

answered Aug 20, 2014 at 6:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Michael Berman · Accepted Answer · 2014-08-20 06:10:51Z

0

Your jQuery is using .text() rather than .val() - inputs are self-closing elements, hence do not have any text.

Your JavaScript is missing quote marks around userNameInput, meaning it is getting the variable userNameInput rather than the string "userNameInput".

answered Aug 20, 2014 at 6:10

Michael Berman

1

Comments

budamivardi · Accepted Answer · 2014-08-20 06:11:02Z

-1

for check bus use is checked method

   $(document).ready(function(){
     $('#submitSignIn').click(function(){
      $userName = $('#userNameInput').val();
      $userPass = $('#passwordInput').val();
     })

;

answered Aug 20, 2014 at 6:11

budamivardi

7605 silver badges10 bronze badges

Collectives™ on Stack Overflow

html input tag always reads null in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related