CODEWITHSUNDEEP
javascriptjquery
DarkRoom
DarkRoom

Reputation: 33

Attaching a keyup handler using jQuery does not work for some reason

I'm trying to get the written integer value for different operations but it does not work. But a similar thing on another page is working properly. How can I fix it?

HTML code:

        <div class="row modal-body">
            <div class="col-4">
                <label for="contengencyrate">रकम</label>
            </div>
            <div class="col-7">
                <input type="number" step="any" name="amount" min="0" max="{{buktani_baki}}"  id="amount" value="">

                <!-- <input type="number" id="amount" name="amount" min="0" max="{{total.amount__sum}}" step="any" value=""> -->
            </div>
        </div>

jquery:



<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>


$('#amount').keyup(function () {

        var val = $('#amount').val();
        // var total = $("#total").val()
        console.log(val,890898908080);
        console.log(123456);
        // $('#percent').val(rakamTopercent(val, total))
    })


</script>

How can I solve this? no error in the console. sometimes it shows error like:

"additional-methods.min.js?_=1609744418426:4 Uncaught TypeError: Cannot read property 'addMethod' of undefined"

Upvotes: 1

Views: 107

Answers (2)

kidroca
kidroca

Reputation: 3856

You are loading 2 different versions of jquery:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Use only 1 version of jquery, version 1.11 is probably too old

If your script runs before the input element is rendered - for example if the script is defined in the head element it won't find the input by id

You can wait for the full document to be ready before querying and attaching a listener

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
  <script>
    // Wait for the full document to be parsed and loaded 
    $(document).ready(function() {
      // And then try to find and atach a listener
      $("#amount").keyup(function() {
        var val = $("#amount").val();
        // var total = $("#total").val()
        console.log(val, 890898908080);
        console.log(123456);
        // $('#percent').val(rakamTopercent(val, total))
      });
    });
  </script>
</head>

<body>
  <div class="row modal-body">
    <div class="col-4">
      <label for="contengencyrate">रकम</label>
    </div>
    <div class="col-7">
      <input type="number" step="any" name="amount" min="0" max="{{buktani_baki}}" id="amount" value="" />

      <!-- <input type="number" id="amount" name="amount" min="0" max="{{total.amount__sum}}" step="any" value=""> -->
    </div>
  </div>
</body>

</html>

Upvotes: 0

BikashSaud
BikashSaud

Reputation: 324

I think your script is not loading or some issue in CDN. Use Java Script for a similar results. Eg. HTML:

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' id='chatinput'>

CSS:{if required}

.printchatbox 
    {border-width:thick 10px;border-style: solid; 
    background-color:#fff;
    line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
    border: 3px solid #969293;width:40%;
     height:2em;   
}

Java Script Code:

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

i think this works

Upvotes: 1

Related Questions