Получение значения текстового поля с помощью jQuery

Question

Я создаю форму входа в систему динамически, используя ответ jQuery и AJAX. Форма создается и отображается правильно. Но я не могу прочитать данные формы.

Это мой код:

$(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 

}); 
}); 

Это оповещение undefined undefined как для имени пользователя и пароля.

Может ли кто-нибудь помочь мне разобраться, что здесь не так?

Answer 1

Просто используйте функцию val(), чтобы получить значение:

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

Чтобы установить стоимость использования val(value) функция:

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

Answer 2

Вы должны использовать .val(), чтобы прочитать значение входного элемента, а не атрибут

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

Answer 3

Здесь уже есть хорошие ответы, но я думал вы должны понять, почему использование .attr() не работает, хотя значение действительно является атрибутом поля ввода. .

При использовании $ ('#') по электронной почте атр ('значение') ;, это равносильно тому, что-то вроде:

input.getAttribute('value'), 

, который будет возвращать "что-то" для:

<input type="text"value="something"/> 

независимо от того, что пользователь ввел.

Однако, используя $('#email').val() эквивалентен чему-то вроде: input.value, который вместо этого будет возвращать то, что пользователь на самом деле вводил в поле.

В этом случае, вы не имеете значение = «» неявно устанавливается: вы просто хотите, что пользователь ввел в

Поэтому используйте .val()..

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){    
$("#test").click(function(){ 
//textbox    
     var first_name = $("#first_name").val(); 
     alert(first_name); 
}); 
}); 
</script> 
<div>username <input type="text" id="first_name" class="first_name" name="first_name" placeholder="type username"/> 
<a href="javascript:void(0)" id="test" class="shortc-button small blue">Get Data</a></div> 

Для получения более подробной информации посетите: http://www.codingprogrammer.com/tutorialdemo/jquery-tutorial/get-value-of-textbox-in-jquery-example/