输入框的值不应大于表格的外部输入框

您好我已经开发了一个表格的输入框值不应大于表格外的输入框。输入框的值不应大于表格的外部输入框

<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

输入框的值不应大于表格的外部输入框

回答

相关问题