CODEWITHSUNDEEP
jqueryhtml
Dipak
Dipak

Reputation: 939

how to limit calculation to specific number

Input field are dynamic and will be added from PHP as user requirement.

The sum of multiple Input field has been calculating live and displaying in specific class.

Now, I want to limit the calculation to 100 or specific number. If calculation reaches 100, then how to stop or disable to fill data ?

$(document).on('blur', '.m_add', function(){  
  var sum = 0;
  $(".m_add").each(function(){
    sum += +$(this).html();
  });
  $(".total").html(sum);
});
table{
  width:100%;
}
table th{
  width:30%;
}
table td, table th {
  border: 1px solid #ddd;
  padding: 4px; }

table tr:nth-child(even) {
  background-color: #e7e7e7; }

table tr:hover {
  background-color: #0E539A; }

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>
</html>

Upvotes: 0

Views: 52

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can check sum is less or equal to 100 and then add to total otherwise make input value empty

$(document).on('blur', '.m_add', function(){  
  var sum = 0;
  $(".m_add").each(function(){
    sum += +$(this).html();
  });
  if(sum<=100){
    $(".total").html(sum);
  } else{
    $(this).html('');
  }
});
table{
  width:100%;
}
table th{
  width:30%;
}
table td, table th {
  border: 1px solid #ddd;
  padding: 4px; }

table tr:nth-child(even) {
  background-color: #e7e7e7; }

table tr:hover {
  background-color: #0E539A; }

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>
</html>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Use a if condition on sum value:

if(sum <=100){
   $(".total").html(sum);
}


$(document).on('blur', '.m_add', function() {
  var sum = 0;
  $(".m_add").each(function() {
    sum += +$(this).html();
  });
  if (sum <= 100) {
    $(".total").html(sum);
  }
});
table {
  width: 100%;
}

table th {
  width: 30%;
}

table td,
table th {
  border: 1px solid #ddd;
  padding: 4px;
}

table tr:nth-child(even) {
  background-color: #e7e7e7;
}

table tr:hover {
  background-color: #0E539A;
}

table th {
  text-align: left;
  background-color: #BCD4E6;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <table>
    <tr>
      <th>Exam</th>
      <td>Mark</td>
    </tr>
    <tr>
      <th>First Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Second Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Third Term Exam</th>
      <td class='m_add' contenteditable></td>
    </tr>
    <tr>
      <th>Final</th>
      <td class='total'></td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Related Questions