Display the textbox if the textbox value in above 2000 in jquery-CodePudding

I want to display the textbox enter PAN card no if the amount entered in the textbox is above 2000.. When the user enters any amount above 2000 textbox has to be displayed Enter PAN Card No.. If the amount is less than 2000 the PAN card textbox has to be hidden.

Here is the code.

$(document).ready(function() {
  $("#general_amt").change(function() {
    var amount = $("#general_amt").val();
    if (parseInt(amount) >= 2000.0) {
      $("#pan").attr('disabled', false);
      $("#pan").attr('hidden', false);
      $("#pan").attr("required", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class=" form-control general_amt" id="general_amt" name="general_amt" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />


<div class="col-md-12" id="pan" style="display: none">

  <label><b>PAN No</b></label>
  <input type="text" id="pan" class="form-control" style="border 1px solid #000" name="pan" placeholder="PAN No" />
</div>
</div>

CodePudding user response：

Here you go.

Use $("#pan").show();
Use $('#general_amt').on('input', function() { instead of $("#general_amt").change(function(){

$(document).ready(function() {
  $('#general_amt').on('input', function() {
    var amount = $("#general_amt").val();
    if (parseInt(amount) >= 2000) {
      $("#pan").attr('disabled', false);
      $("#pan").show();
      $("#pan").attr("required", true);
    } else {
      $("#pan").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class=" form-control general_amt" id="general_amt" name="general_amt" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />


<div class="col-md-12" id="pan" style="display: none">

  <label><b>PAN No</b></label>
  <input type="text" id="pan" class="form-control" style="border 1px solid #000" name="pan" placeholder="PAN No" />
</div>
</div>

Note: id must be unique.