Search code examples
javascriptnumbers

Auto update field when number inputted is between two numbers


JS code to auto update field depending on number value This is the code that I currently have but not updating or logging in console Any idea what I am doing wrong

<script> $("#Tier").on("input"), function () {
  if ($("#Tier").val() > 0 &&  $("#Tier").val() < 20000){
    console.log('Silver');
    $("#tiering").val("Silver");
  }
} </script>
<div class="form-group" id="div_id_Tier>
        <label class="requiredField" for="id_Tier">Tier<span style="color:red">*</span></label>
        <div>
          <input class="textinput textInput form-control" id="Tier" maxlength="100" name="Tier" placeholder="Tier*" required="" type="text" />
        </div>
      </div>
      <div>
        <input   type="text" id="tiering" name="tiering"></input>
    </div>

Solution

  • You're missing a closing parenthesis at the end of the on function definition:

    $("#Tier").on("input", function() {
      if ($("#Tier").val() > 0 &&  $("#Tier").val() < 20000){
        console.log('Silver');
        $("#tiering").val("Silver");
      }
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <div class="form-group" id="div_id_Tier>
            <label class="requiredField" for="id_Tier">Tier<span style="color:red">*</span></label>
            <div>
              <input class="textinput textInput form-control" id="Tier" maxlength="100" name="Tier" placeholder="Tier*" required="" type="text" />
            </div>
          </div>
          <div>
            <input   type="text" id="tiering" name="tiering"></input>
        </div>