Jquery - total quantity entered should not exceed the current value

Admin 1
Viewed 166

Need to prevent the user from entering more than the existing quantity. It should check the total quantities entered on change event as well as on submit click.

For example, the first row(Part 1) has 50 quantities when the user is adding rows and the total quantities entered against "Part 1" should not exceed 50 and a text should display above the row. Any help would be appreciated.

HTML:

<form name="req" method="post">

<table id="exampleTbl">  
    <tr>
        <td>Part 1</td>
        <td><input type="number" name="quantity" value="50"></td>
        <td>
           <button type="button" class="addRow">+</button>
       </td>  
    </tr>
    <tr>
        <td>Part 2</td>
        <td><input type="number" name="quantity" value="100"></td>
        <td>
           <button type="button" class="addRow">+</button>
       </td>  
    </tr>
</table>
<input type="submit" name="Submit" value="Submit">
</form>

Jquery:

$(function() {
  $('#exampleTbl').delegate('button.addRow', 'click', function() {
    var row = $(this).closest('tr'); // get the parent row of the clicked button
    var html = $(this).closest('tr').clone();
    $(html).insertAfter(row); // insert content
    
    let btn = $('<a href="javascript: void(0)" title="Click to remove">Remove</a>');
    btn.click(function () {
      $(html).remove(); // Remove row on click
    })
    
    $(html).find('.addRow').replaceWith(btn);
  });
});
html jquery
1 Answers

In below code snippet i have given class to your trs to differentiate them with original quantity and the quantity which user can change . Also , whenever user will change input then we need find sum of all quantity of Part 1 or Part 2 .So , i have use tr class which will have either Part 1 or Part 2 to iterate over trs input .

Demo Code :

$(function() {
  $('#exampleTbl').delegate('button.addRow', 'click', function() {
    var row = $(this).closest('tr'); // get the parent row of the clicked button
    var html = $(this).closest('tr').clone();
    $(html).insertAfter(row); // insert content
    let btn = $('<a href="javascript: void(0)" title="Click to remove">Remove</a>');
    btn.click(function() {
      $(html).remove(); // Remove row on click
    })
    $(html).find('.addRow').replaceWith(btn);
  });
});

$(document).on("change", "input", function() {
  var sum = 0;
  $(".total_qty_entered").remove(); //remove div
  var name = $(this).closest('tr').attr('class'); //get class 
  //get original quantity
  var qty = $("." + name + "_original").find('td:eq(2)').text();
  //loop through tr with same class > inputs
  $("." + name + " input[name=quantity]").each(function() {
    sum += +$(this).val();
  });
  console.log("Quantity : " + qty + " | Sum : " + sum)
  if (sum > qty) {
    $(this).before('<div class="alert alert-danger total_qty_entered" role="alert">Total Quantity should not exceed ' + qty + '</div>');
  }
});
//call when on submit
function mySubmitFunction(e) {
  //e.preventDefault();
  var result = true;
  $("tr[data-value ='original']").each(function() {
    var name = $(this).find('td:eq(0)').text();
    var qty = $(this).find('td:eq(2)').text();
    var new_name = name.replace(/\s/g, '');
    var sum = 0;
    $("." + new_name + " input[name=quantity]").each(function() {
      sum += +$(this).val();
    });
    console.log("Name : " +name+ " Sum : "+sum + " || Qty :   " + qty)
    if (sum > qty) {
      //do something 
      alert("please check quanity is greater for "+name)
      result = false;
    }
  });
  return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="req" method="post" onsubmit="return mySubmitFunction(event)">

  <table id="exampleTbl">
    <!--added this class-->
    <tr data-value="original" class="Part1_original">
      <td>Part 1 </td>
      <td>Original Quantity : </td>
      <td>50</td>
    </tr>
    <!--added this class-->
    <tr class="Part1">
      <td>Part 1</td>
      <td><input type="number" name="quantity" value="50"></td>
      <td>
        <button type="button" class="addRow">+</button>
      </td>
    </tr>
    <tr data-value="original" class="Part2_original">
      <td>Part 2</td>
      <td>Original Quantity : </td>
      <td>100</td>

    </tr>
    <tr class="Part2">
      <td>Part 2</td>
      <td><input type="number" name="quantity" value="100"></td>
      <td>
        <button type="button" class="addRow">+</button>
      </td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit">
</form>

Update 1 :

You can give class to your input so that it can use in each to iterate over the inputs having same class and check if against the total quantity .

Demo code :

$(function() {
  $('#exampleTbl').delegate('button.addRow', 'click', function() {
    var row = $(this).closest('tr'); // get the parent row of the clicked button
    var html = $(this).closest('tr').clone();
    $(html).insertAfter(row); // insert content
    let btn = $('<a href="javascript: void(0)" title="Click to remove">Remove</a>');
    btn.click(function() {
      $(html).remove(); // Remove row on click
    })
    $(html).find('.addRow').replaceWith(btn);
  });
});

$(document).on("change", "input", function() {
  var sum = 0;
  //get total quantity
  var qty = $(this).closest('td').next('td').text(); //get class 
  var name = $(this).attr('class'); //get class
  //loop through tr with same class > inputs
  $("tr > td input[class=" + name + "]").each(function() {
    sum += +$(this).val();
  });
  $(".total_qty_entered").remove(); //remove div
  if (sum > qty) {
    $(this).before('<div class="alert alert-danger total_qty_entered" role="alert">Total Quantity should not exceed ' + qty + '</div>');
  }
});
//call when on submit
function mySubmitFunction(e) {
  //e.preventDefault();
  var result = true;
  //loop through td input
  $("tr > td input").each(function() {
    var name = $(this).attr('class');
    var qty = $(this).closest('td').next('td').text(); //get class 
    var sum = 0;
    //iterate through all inputs with same class
    $("." + name).each(function() {
      sum += +$(this).val();
    });
    if (sum > qty) {
      //do something 
      $(this).before('<div class="alert alert-danger total_qty_entered" role="alert">Total Quantity should not exceed ' + qty + '</div>');
      result = false;
    }

  });
  return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="req" method="post" onsubmit="return mySubmitFunction(event)">

  <table id="exampleTbl">

    <tr>
      <td>Part 1</td>
      <td><input type="number" name="quantity" value="50" class="Part1"></td>
      <td>50</td>
      <td>
        <button type="button" class="addRow">+</button>
      </td>
    </tr>
    <tr>
      <td>Part 2</td>
      <td><input type="number" name="quantity" value="100" class="Part2"></td>
      <td>100</td>
      <td>
        <button type="button" class="addRow">+</button>
      </td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit">
</form>

user_106064000
Related