Check First Value Greater in Multiple Inputs with Same Class Name using jQuery

Today we check a task about How to Check First Value Greater in Multiple Inputs with Same Class Name using jQuery.

Here we use some standard jQuery functions,

Bootstrap CDN
jQuery CDN
Creating number input fields
Take the value from input fields using jQuery.
Using jQuery loop to check all values and store into an array.

Check First Value Greater in Multiple Inputs with Same Class Name using jQuery

Included CDN Links

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- jQueryUI library -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">

Creating Number Input Fields

<div class="col-md-3">
<input id="fnumber" placeholder="Enter 1st number..." type="number" class="form-control input-sm User_number"/>
</div>
</br>
<div class="col-md-3">
<input placeholder="Enter 2nd number..." type="number" class="form-control input-sm User_number"/>
</div>
</br>
<div class="col-md-3">
<input id="second" placeholder="Enter 3rd number..." type="number" class="form-control input-sm User_number"/>
</br>
<button id="check" class="btn btn-primary">Check</button>
</div>

</div>

</br>

</div>

</br>

</br>

<button id="check" class="btn btn-primary">Check</button>

</div>

Complete JS to Check First Value Greater

<script>
$(document).ready(function(){
    $("#check").click(function(){
      var inputs = $(".User_number");
      var splashArray = [];
      var first_num;
      for(var i = 0; i < inputs.length; i++){
          var first_num = $(inputs[0]).val();
          splashArray.push($(inputs[i]).val());
        }
      var user_value = Math.max.apply(Math,splashArray);
      if(user_value == first_num){
        alert(first_num+" :1st number greater");
      }else{
        alert(first_num+" :1st number is not greater than this "+user_value+" number");
      }
      
    });
});
</script>

$(document).ready(function(){

$("#check").click(function(){

var inputs = $(".User_number");

var splashArray = [];

var first_num;

for(var i = 0; i < inputs.length; i++){

var first_num = $(inputs[0]).val();

splashArray.push($(inputs[i]).val());

}

var user_value = Math.max.apply(Math,splashArray);

if(user_value == first_num){

alert(first_num+" :1st number greater");

}else{

alert(first_num+" :1st number is not greater than this "+user_value+" number");

}

});

</script>

Complete source to Check First Value Greater in Multiple Inputs with Same Class Name using jQuery,

See the Pen Check First Value Greater in Multiple Inputs with Same Class Name by Bikash Panda (@phpcodertech) on CodePen.

Also Check:

Was this article helpful?

YesNo

Check First Value Greater in Multiple Inputs with Same Class Name using jQuery

Included CDN Links

Creating Number Input Fields

Complete JS to Check First Value Greater

Related

Written by Bikash

5 Most Effective Ways To Optimize PHP Code

How to Install the latest version of Laravel?

3 popular ways to make HTTP requests in JavaScript

Leave a Reply Cancel reply