Question

我想在我的一个HTML表单中读取文本框中输入的值，为此我尝试了jQuery val()方法，但它无法正常工作，不知道为什么？

HTML：

<form method="POST" id="payment-form">
   <p>
      <label class="card-number" for="txt_cardno"><span>Card Number:</span></label>
      <input type="text" size="20" autocomplete="off" class="card-number" id="txt_cardno" name="cardno" />
   </p>
   <p class="submit submit-button"><a class="btn" href="#">Charge Card</a><br><a class="btn" href="#" onClick="return false">Go Back</a></p>
   <div class="clear"></div>
</form>

使用Javascript：

$(document).ready(function() {
    $(".submit").live("click", function(e) {
        e.preventDefault();
        var card_num = $('.card-number').val();
        alert(card_num);
    });
});

jsfiddle是http://jsfiddle.net/74neK/1/

Answer 1

使用id访问它（更快）：

 var card_num = $('#txt_cardno').val();

Answer 2

您已经同时提供了<label>和<input> "card-number"课程。

在选择器中指定input。否则.val()会为您提供找到的第一个元素的值（label）。

var card_num = $('input.card-number').val();

http://jsfiddle.net/74neK/3/

如果你真的关心微优化，你应该使用原生方法：

var card_num = (document.getElementById('txt_cardno')||{}).value;

http://jsfiddle.net/74neK/5/

Answer 3

您的<label>的{{1}}与您的class相同，因此jQuery正在尝试并且无法检索您的<input>的值。相反，请<label>或<input>：

参考您的name

id

我会推荐ID，因为jQuery将其优化为$('#txt_cardno').val()，这要快得多。

Answer 4

尝试使用ID访问元素：

var card_num = $('#txt_cardno').val();

http://jsfiddle.net/74neK/4/＆lt; - 示例

Answer 5

选择输入元素的id，而不是class：http://jsfiddle.net/btgxu/

jQuery val（）方法不起作用

5 个答案: