jquery - 使用 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"/> 

无论用户输入什么。

但是， using $('#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/