Getting textbox's value using jQuery

Question

I am creating a login form dynamically, using jQuery and AJAX response. Form is created and displaying properly. But, I'm not able to read the form data.

This is my code:

$(document).ready(function(){
  $('#proper-form').on( 'click', '#submit-button', function() {  // loginForm is submitted

alert ("here");
    var username = $('#email').attr('value'); // get username
    var password = $('#password').attr('value'); // get password
alert (password);
alert (username);

    // code for form submit using ajax

 }); 
});

It's alerting undefined undefined for both username and password.

Can anyone help me in figuring out what's wrong here?

Answer 1

Just use the val() function, to get the value:

 var username = $('#email').val(); 
 var password = $('#password').val(); 

To set the value use val(value) function:

$('#email').val('some new value'); 

Answer 2

You need to use .val() to read the value of an input element, not attribute

var username = $('#email').val();