I wanted to read the value entered in the text box in one of my HTML form, for this I tried jQuery val() method, but it is not working, any idea why?

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" autoplete="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);
    });
});

the jsfiddle is /

I wanted to read the value entered in the text box in one of my HTML form, for this I tried jQuery val() method, but it is not working, any idea why?

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" autoplete="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);
    });
});

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

• javascript
• jquery

• 2 It's worth pointing out that you're using jQuery 1.7.1 (in your linked JS Fiddle), in which case live() is deprecated. Use on() instead. – David Thomas Commented Dec 18, 2011 at 21:01
• thanks @DavidThomas will use on() – user993563 Commented Dec 18, 2011 at 21:28

5 Answers 5

Use the id to access it (faster):

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

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

Specify the input in the selector. Otherwise .val() gives you the value of the first element found (the label).

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

http://jsfiddle/74neK/3/

If you're really concerned with micro-optimization, you should use native methods:

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

http://jsfiddle/74neK/5/

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

$('#txt_cardno').val()

I would remend ID regardless, because jQuery optimizes it to document.getElementById, which is much faster.

Try to use the ID to access the element:

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

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

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