使用 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() 不起作用，即使 value 确实是输入字段的属性。

当你使用 $('#email').attr('value');, 这相当于：

    input.getAttribute('value'), 

这将返回“某物”：

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

不管用户输入了什么。

但是，使用 $('#email').val() 相当于： input.value 将返回用户在字段中实际输入的任何内容。

在这种情况下，您没有隐式设置 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/