Eingabefelder Wert der Tabelle sollte nicht größer sein als Eingabefeld außerhalb der Tabelle

Question

Hallo Ich habe ein Formular entwickelt, wo Eingabefelder Wert der Tabelle nicht größer sein sollte als Eingabefeld außerhalb der Tabelle.

<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>

oben jsfiddle alle ENTER SANKTIONIERT Summe Sitze werden nicht größer sein dann in Onchange "Gesamtzahl der Sitze sanktioniert Enter".

Answer 1

Sie müssen jquery keyup -Ereignis verwenden, wie ich in Geige erwähnt.

Bitte überprüfen Sie diese Geige

Hier habe ich gerade gemacht Textbox Wert leer, wenn Summe von drei sanktioniert Sitze sind größer als die Gesamt.

Auch habe ich cleare 3 Textbox, wenn Sie insgesamt Textbox

Open this link Chane: 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

Prüfung unter Snippet

$(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>