skip to Main Content

The following code will get the lowest value entered in first 3 columns, it is running fine. But after adding the row (Add Row) i am unable to get the lowest value from next 3 columns. Also i want to get the sum of all 3 lowest values from as much columns as user will add. Your kind help is required in this regard.

$(document).ready(function() {
  var i = 1;
  $("#Add_BDSP").click(function() {
    $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");

    $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
    i++;
  });
  $("#Delete_BDSP").click(function() {
    if (i > 1) {
      $("#BDSP" + (i - 1)).html('');
      i--;
    }
  });

});

var input = $('[name="QuotedAmount1[0]"],[name="QuotedAmount2[0]"],[name="QuotedAmount3[0]"]'),

  QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
  QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
  QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),

  MulRes = $('[name="ServiceTotalCost"]');


input.change(function() {
  var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val());
  var Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val());
  var Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());



  MulRes.val(Math.min(Qoute1, Qoute2, Qoute3));

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
  <table class="table table-bordered table-hover" id="Tab_BDSP">
    <thead>
      <tr>
        <td>Amount</td>

      </tr>
    </thead>
    <tbody>
      <tr id='BDSP0'>


        <td>
          <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
        </td>

      </tr>

      <tr id='BDSP1'></tr>
    </tbody>
  </table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>

<div class="col-md-4">

  <div class="input-group form-group">
    <span class="input-group-addon">
                                                    <i class="material-icons">business_center</i>
                                                </span>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
    </div>
  </div>
</div>

2

Answers


  1. But after adding the row (Add Row) i am unable to get the lowest value
    from next 3 columns

    Your main problem is:

    QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
    QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
    QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),
    

    Because you just select QuotedAmount1[0] to QuotedAmount3[0], after you append row new input has QuotedAmount1[1] .. , also you used change and for new row you need to use change with document selector, to get live change. And you should move your variable inside of change event. Important things is, you should select your input without name, here is working snippet:

    $(document).ready(function() {
      var i = 1;
      $("#Add_BDSP").click(function() {
        $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");
    
        $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
        i++;
      });
      $("#Delete_BDSP").click(function() {
        if (i > 1) {
          $("#BDSP" + (i - 1)).html('');
          i--;
        }
      });
    
    });
    
    
    
    $(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
      let result = 0;
      var MulRes = $('input#ServiceTotalCost');
    
      var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
        QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
        QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);
    
      var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
        Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
        Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
    
      var min = Math.min(Qoute1, Qoute2, Qoute3);
      $(this).parent().attr('data-lowest', min)
    
    
      $('#Tab_BDSP tbody tr td').each(function() {
        result += +$(this).attr('data-lowest')
      });
    
      MulRes.val(result)
    });
    Thank you for kind response,
    the code is running perfect,
    but the issue is if i change the value in additional rows,
    it adds the lowest into the sum,
    e.g. 1st row have 300000 400000 500000 and second row have 600000 700000 800000 The total sum will be 900000 which is perfect. but if i change the value from 600000 to 200000 it should shows 700000 but it gives value of 1100000. Your kind help is needed to rectify this issue in the given code. – ADIL I.T 8 mins ago
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form-group form-float">
      <table class="table table-bordered table-hover" id="Tab_BDSP">
        <thead>
          <tr>
            <td>Amount</td>
    
          </tr>
        </thead>
        <tbody>
          <tr id='BDSP0'>
    
    
            <td>
              <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
              <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
              <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
            </td>
    
          </tr>
    
          <tr id='BDSP1'></tr>
        </tbody>
      </table>
    </div>
    <a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
    </div>
    
    <div class="col-md-4">
    
      <div class="input-group form-group">
        <span class="input-group-addon">
                                                        <i class="material-icons">business_center</i>
                                                    </span>
        <div class="form-line">
          <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
        </div>
      </div>
    </div>

    Also i want to get the sum of all 3 lowest values from as much columns
    as user will add

    For get sum you need to get min and also old lowest value

    Login or Signup to reply.
  2. This code works. I just made all of the script run separately so it worked.

    $(".input0").keyup(function() {
    
      var val10 = $("[name='a1[0]']").val();
      var val20 = $("[name='a2[0]']").val();
      var val30 = $("[name='a3[0]']").val();
    
      var lowestValue0 = Math.min(val10, val20, val30);
      $("[name='answer[0]']").val(lowestValue0);
      $("[name='total']").val(lowestValue0);
    
    });
    
    
    $(document).keyup(function() {
    
      var sum = "";
      $('.inputClass').each(function() {
        sum += this.value;
      });
      $("[name='total']").val(sum);
    
    });
    
    $(document).ready(function() {
    
      var a = "1";
    
      $(".add").click(function() {
    
        $('<div class="valueDiv' + a + '"><input name="a1[' + a + ']" class="input' + a + '" placeholder="Value 1"><input name="a2[' + a + ']" class="input' + a + '" placeholder="Value 2"><input name="a3[' + a + ']" class="input' + a + '" placeholder="Value 3"><br><h5>Lowest Value = </h5><input name="answer[' + a + ']" class="inputClass" readonly placeholder="Lowest Value"><hr></div>').appendTo("#mainDiv");
    
        $('#scripts').append('<script type="text/javascript" id="script' + a + '">$(".input' + a + '").keyup(function() { var val1' + a + ' = $("[name='a1[' + a + ']']").val(); var val2' + a + ' = $("[name='a2[' + a + ']']").val(); var val3' + a + ' = $("[name='a3[' + a + ']']").val(); var lowestValue' + a + ' = Math.min(val1' + a + ', val2' + a + ', val3' + a + '); $("[name='answer[' + a + ']']").val(lowestValue' + a + '); });</script>');
    
        a++;
    
      });
    
      $(".delete").click(function() {
    
        if (a > 1) {
          $(".valueDiv" + (a - 1)).remove();
          $("script" + (a - 1)).remove();
          a--;
        }
    
        var sum = "";
        $('.inputClass').each(function() {
          sum += this.value;
        });
        $("[name='total']").val(sum);
    
      });
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <div id="mainDiv" style="width: 100%; height: 100%; padding: 50px;">
      <div class="valueDiv0">
        <hr>
        <input name="a1[0]" class="input0" placeholder="Value 1">
        <input name="a2[0]" class="input0" placeholder="Value 2">
        <input name="a3[0]" class="input0" placeholder="Value 3">
        <br>
        <h5>Lowest Value = </h5>
        <input name="answer[0]" class="inputClass" readonly placeholder="Lowest Value">
        <hr>
      </div>
    </div>
    <div style="width: 100%; height: 100%; padding: 0px 50px;">
      <h5>Sum of All Lowest Values</h5>
      <input style="width: 230px;" name="total" readonly placeholder="Total Value of All Lowest Values">
    </div>
    <div id="scripts">
    
    </div>
    <br>
    <div>
      <button class="btn btn-primary add">Add Row</button>
      <button class="btn btn-danger delete">Delete Row</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search