Card Number: <input type="text" size="20" autocomplete="off" class="card-number""> Card Number: <input type="text" size="20" autocomplete="off" class="card-number""> Card Number: <input type="text" size="20" autocomplete="off" class="card-number"" />

jQuery val()メソッドが動作しません

HTMLフォームのテキストボックスに入力された値を読みたいと思っていましたが、jQueryの val()メソッドを試しましたが、なぜ動作していませんか?

HTML:

<form method="POST" id="payment-form">
   

<input type="text" size="20" autocomplete="off" class="card-number" id="txt_cardno" name="cardno" />

Charge Card
Go Back

<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);
    });
});

the jsfiddle is http://jsfiddle.net/74neK/1/

1
リンクされたJS FiddleでjQuery 1.7.1を使用していることを指摘しておく価値があります。この場合、 < code> live() は廃止予定です。代わりに on() を使用してください。
追加された 著者 David Thomas,
ありがとう@DavidThomasはon()を使用します
追加された 著者 user993563,

5 答え

IDを使用してアクセスする(より速く):

 var card_num = $('#txt_cardno').val();
6
追加された
あなたはその場に出ました:)
追加された 著者 user993563,

You've given both the and the <input> the "card-number" class.

セレクタに 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/

4
追加された
なぜ私はその余分な入力を追加する必要がありますか? ?
追加された 著者 user993563,
実際に役立つ説明のためのthnaks!
追加された 著者 user993563,
@ user993563:私はちょうど私の答えをより多くの情報で更新しました。 jQueryが複数の要素を検出すると、 .val()は最初に見つかった要素のみの値を返します。この場合、 label が最初であるため、(ラベルには値がないため)の値はありません
追加された 著者 RightSaidFred,

Your 's class is the same as your <input>'s, so jQuery is trying and failing to retrieve the value of your . Instead, refer to your <input> by name or id:

$('#txt_cardno').val()

jQueryはこれを document.getElementById に最適化するので、IDに関係なくIDをお勧めします。これははるかに高速です。

3
追加された

IDを使用して要素にアクセスしてみてください:

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

http://jsfiddle.net/74neK/4/ <- Example

3
追加された

Select the id of your input element, as opposed to the class: http://jsfiddle.net/btgxu/

2
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript