CODEWITHSUNDEEP
javascriptjquery
Jack Yuan
Jack Yuan

Reputation: 51

How to calculate average of values that are being inputted through dynamically added input fields into another textbox?

I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.

<html>
<body>
         <form>
        <table id="dynamic_field">
             <td>
              <div>
               <input type="hidden" class="form-control"  name="uuid[]"/>
              </div>
             </td>
             
             <td><input type="text" class="form-control" id="average" name="average"/></td>
            
             <td>
              <div>
               <label>Enter number</label>
                <input type="text" class="form-control"  name="number[]" />
              </div>
             </td>
    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> 
            <input type="submit" name="submit" id="submit" value="Submit">
        </table>
            </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
        
            <script type="text/javascript">
              $(document).ready(function(){
                var max_input = 7;
                var i = 1;
            
              $("#add").click(function(){if (i < max_input) {
                  i++;
                  $('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control"  name="uuid[]"/></div></td><td>&nbsp;</td><td><div><label>Enter number</label><input type="text" class="form-control"  name="number[]" /></div></td><td>&nbsp;</td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr>');  
                }});
            
                $(document).on('click', '.btn_remove', function(){  
                  var button_id = $(this).attr("id");   
                  $('#row'+button_id+'').remove();  
                });
            
                $("#submit").on('click',function(){
                  var formdata = $("#main-form").serialize();
                  $.ajax({
                    url   :"action.php",
                    type  :"POST",
                    data  :formdata,
                    cache :false,
                    success:function(result){
                      alert(result);
                      $("#main-form")[0].reset();
                    }
                  });
                });
              });
            </script>

Upvotes: 1

Views: 379

Answers (1)

Swati
Swati

Reputation: 28522

You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.

Demo Code :

$(document).ready(function() {
  var max_input = 7;
  var i = 1;

  $("#add").click(function() {
    if (i < max_input) {
      i++;
      $('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control"  name="uuid[]"/></div></td><td>&nbsp;</td><td><div><label>Enter number</label><input type="text" class="form-control"  name="number[]" /></div></td><td>&nbsp;</td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr>');
    }
  });

  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $(document).on("input", "input[name*=number]", function() {
    var total = 0;
    //get length of input field
    var count = parseInt($("input[name*=number]").length);
    //loop through each inputs
    $("input[name*=number]").each(function() {
      //add
      total += $(this).val() != "" ? parseInt($(this).val()) : 0
    })
    //put value inside input box
    $("#average").val(total / count);

  })
});
<html>

<body>
  <form>
    <table id="dynamic_field">
      <tr>
        <td>
          <div>
            <input type="hidden" class="form-control" name="uuid[]" />
          </div>
        </td>

        <td><input type="text" class="form-control" id="average" name="average" /></td>

        <td>
          <div>
            <label>Enter number</label>
            <input type="text" class="form-control" name="number[]" />
          </div>
        </td>
        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
      </tr>
    </table>
    <input type="submit" name="submit" id="submit" value="Submit">

  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 1

Related Questions