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

Question

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>

Answer 1

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>

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

Question

1 answers

solution1
1 ACCPTED 2021-03-23 13:57:26

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

Question

1 answers

solution1 1 ACCPTED 2021-03-23 13:57:26

solution1
1 ACCPTED 2021-03-23 13:57:26