входные поля значение таблицы не должно быть больше, чем поле ввода за пределами таблицы

Question

Здравствуйте, я разработал форму, в которой значение входных значений таблицы не должно быть больше, чем поле ввода вне таблицы.

<form> 
 
<div class="form-group"> 
 
           <label class="label1 col-md-4">Total number of sanctioned seats 
 
           <span class="required"> * </span> 
 
           </label> 
 
\t \t \t \t \t \t \t <div class="col-md-7"> 
 
           <input type="text" class="form-control" id="sanctionedSeatsSummary"> 
 
           </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
              \t \t \t \t \t \t <table class="eduleveles table table-bordered table-hover"> 
 
\t \t \t \t \t \t \t \t 
 
    <thead> 
 
     <th></th> 
 
     <th>Faculty</th> 
 
\t \t <th>Enter sanctioned seats</th> 
 
     
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</form>

в выше jsfiddle все ENTER санкционирована СИДЕНЬЯ сумма не будет больше, то "Введите общее количество санкционированных мест" в OnChange.

Answer 1

Вам нужно использовать событие jquery keyup, как я упоминал в скрипке.

Пожалуйста, проверьте эту скрипку

Здесь я только что сделал значение текстовое поле пустым, если сумма трех санкционированных мест больше, чем общая.

Также у меня есть Cleare 3 текстовое поле, если вы Чейн общее текстовое поле

Open this link: https://jsfiddle.net/5y6na3wr/7/

Answer 2

$(document).ready(function(){ 
 
    $(".seats").on('keyup',function(){ 
 
    \t var total = parseInt(0) ; 
 
    \t $(".seats").each(function(index) { 
 
     \t if($(this).val()){ 
 
     \t \t total = total + parseInt($(this).val()); 
 
      } 
 
\t \t }); 
 
\t \t if(total > $("#sanctionedSeatsSummary").val()){ 
 
\t \t \t alert("total sanctioned Seats are greater then given sanctioned Seats"); 
 
\t \t } 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
\t <div class="form-group"> 
 
\t \t <label class="label1 col-md-4">Total number of sanctioned seats 
 
\t \t <span class="required"> * </span> 
 
\t \t </label> 
 
\t \t <div class="col-md-7"> 
 
\t \t \t <input type="text" class="form-control" id="sanctionedSeatsSummary"> 
 
\t \t </div> 
 
\t </div> 
 

 
<table class="eduleveles table table-bordered table-hover"> 
 
\t <thead> 
 
\t \t <th></th> 
 
\t \t <th>Faculty</th> 
 
\t \t <th>Enter sanctioned seats</th> 
 
\t </thead> 
 
\t <tbody> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <input type="checkbox" name="Check" class="cbxenable"> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <input type="text" class="form-control seats" name="seats"> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <input type="checkbox" name="Check" class="cbxenable"> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <input type="text" class="form-control seats" name="seats"> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <input type="checkbox" name="Check" class="cbxenable"> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <input type="text" class="form-control seats" name="seats"> 
 
\t \t </td> 
 
\t </tr> 
 
\t </tbody> 
 
</table> 
 
</form>

Answer 3

чек ниже фрагмент кода

$(document).ready(function(){ 
 
    var ttl, val; 
 
    
 
    $("input[name=seats]").on('keyup', function(){ 
 
    val = 0; 
 
    
 
    $("input[name=seats]").each(function(){ 
 
     if(parseInt($(this).val().trim()) > 0) 
 
     val += parseInt($(this).val().trim()); 
 
    }); 
 
    
 
    ttl = parseInt($("#sanctionedSeatsSummary").val().trim()); 
 

 
    if(val > ttl) 
 
     alert("your alert"); 
 
    
 
    }); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<div class="form-group"> 
 
           <label class="label1 col-md-4">Total number of sanctioned seats 
 
           <span class="required"> * </span> 
 
           </label> 
 
\t \t \t \t \t \t \t <div class="col-md-7"> 
 
           <input type="text" class="form-control" id="sanctionedSeatsSummary"> 
 
           </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
              \t \t \t \t \t \t <table class="eduleveles table table-bordered table-hover"> 
 
\t \t \t \t \t \t \t \t 
 
    <thead> 
 
     <th></th> 
 
     <th>Faculty</th> 
 
\t \t <th>Enter sanctioned seats</th> 
 
     
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" name="Check" class="cbxenable"> 
 
      </td> 
 
      <td> 
 
       
 
      </td> 
 
\t \t \t <td> 
 
       <input type="text" class="form-control seats" name="seats"> 
 
      </td> 
 
    
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</form>