輸入框的值不應大於表格的外部輸入框

您好我已經開發了一個表格的輸入框值不應大於表格外的輸入框。輸入框的值不應大於表格的外部輸入框

<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則「輸入的批准席位總數」。

來源

2017-02-21 Arpit Gupta

您可以使用jquery的onkeyup事件來驗證您的結果。當我在填寫完所有已批准的席位後更改總數時會發生什麼？ –

你能幫我一些工作小提琴嗎？ –

是我創造小提琴。 –

你需要使用jquery keyup事件，正如我在小提琴中提到的。

請檢查此琴

在這裏，我只是做文本框的值空白，如果三個席位批准總和大於總大。

我也有cleare 3文本框，如果你CHANE總文本框

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

來源

2017-02-21 06:50:38

如果我們超過全部認可的席位，我們是否可以收到警告信息？ –

是的，我們可以。你想要哪種類型的警告？我更新了最新的小提琴。 –

你試過我的小提琴嗎？ –

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

來源

2017-02-21 06:57:35 shafiq

檢查以下片斷

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

來源

2017-02-21 07:37:01 aje

輸入框的值不應大於表格的外部輸入框

回答

相關問題