CODEWITHSUNDEEP
jqueryhtml
Azim Azman
Azim Azman

Reputation: 97

Pass input id using keyup function

I want to pass id using keyup function. Here are the following code

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Card Validation</title>
</head>
<body>
    <div class="form-group" id="card-number-field">
        <input type="text" name="cn" placeholder="Card Number" class="form-control" id="cardNumber" required>
    </div>

    <div class="f1-buttons">
        <button type="button" class="btn btn-previous">Previous</button>
        <button type="submit" name="sendData" class="btn btn-submit">Submit</button>
    </div>

    <div class="col-sm-5 col-md-4 col-lg-1 form-box">
        <div class="aro-pswd_info">
            <div id="pswd3_info">
                <h4>Enter a Valid Card Number</h4>
                <ul>
                    <li id="cardNo" class="invalid"><strong>Card Number Validation</strong></li>
                </ul>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
        $('.sendData').attr('disabled',true);
        $('#cardNo').keyup(function(){
            var card= $(this).val();

            //valid Card Number
            if ( card.length = 16 ) {
                $('#cardNo').removeClass('valid').addClass('invalid');
                $('.sendData').attr('disabled',false);
            } else {
                $('#cardNo').removeClass('invalid').addClass('valid');
                $('.sendData').attr('disabled',true);
            }

        }).focus(function() {
            $('#pswd3_info').show();
        }).blur(function() {
            $('#pswd3_info').hide();
        });
    });
</script>
</body>
</html>

If I change the following line, the code will working. But i want pass it as id (#cardNo) not by using input[type=text]. Sorry I still newbie

$('input[type=text]').keyup(function(){

//continue code }

If the user input length below 16 the submit button will disable. If the user input length equal to 16, the submit button will enable.

Upvotes: 1

Views: 202

Answers (3)

animake
animake

Reputation: 309

You probably trying to achieve this result

$(document).ready(function() {
  $('.sendData').attr('disabled', true);
  $('#pswd3_info').hide();
  $('#cardNumber').keyup(function() {
    handleValidation(this);
  }).focus(function() {
    handleValidation(this);
  }).blur(function() {
    handleValidation(this);
  });

  function handleValidation(input) {
    var card = $(input).val();
    //valid Card Number
    if (card.length == 16) {
      $('#cardNo').removeClass('invalid').addClass('valid');
      $('.sendData').attr('disabled', false);
      $('#pswd3_info').hide();
    } else {
      $('#cardNo').removeClass('valid').addClass('invalid');
      $('.sendData').attr('disabled', true);
      $('#pswd3_info').show();
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group" id="card-number-field">
  <input type="text" name="cn" placeholder="Card Number" class="form-control" id="cardNumber" required>
</div>

<div class="f1-buttons">
  <button type="button" class="btn btn-previous">Previous</button>
  <button type="submit" name="sendData" class="btn btn-submit sendData">Submit</button>
</div>

<div class="col-sm-5 col-md-4 col-lg-1 form-box">
  <div class="aro-pswd_info">

    <div id="pswd3_info">
      <h4>Enter a Valid Card Number</h4>
      <ul>
        <li id="cardNo" class="invalid"><strong>Card Number Validation</strong></li>
      </ul>
    </div>
  </div>
</div>

Hope this helps

Upvotes: 1

Kamil
Kamil

Reputation: 286

You are using a wrong id. Use #cardNumber instead #cardNo. Hope that will help:

$(document).ready(function(){
   $('.sendData').attr('disabled',true);
     $('#cardNumber').keydown(function() {
        var card= $('#cardNumber').val();
           console.log(card);

        //valid Card Number
        if ( card.length = 16 ) {
         // LOGIC HERE
        }
    }).focus(function() {
        $('#pswd3_info').show();
    }).blur(function() {
        $('#pswd3_info').hide();
    });
});

This is a JSFiddle below. Its not finished but it should give you a good indication how to achieve your goal. Good luck.

JSFiddle

Upvotes: 1

Alan Grosz
Alan Grosz

Reputation: 1325

First at all, you have to include the jquery script in that code. Then you are binding the #cardNo in the keyup event, but you have to do it with #cardNumber. Try that!

Upvotes: 1

Related Questions