Calculate one static input field and three dynamically created input jQuery

Question

I have a complex problem in jQuery. I want to calculate the one static input field and three dynamically calculated field's value in jQuery.

Here is the input method created in HTML

 <input type="text" required name="prodeyo_3[]" class="form-control"/>
 <input type="text" id="somaponyJer" required name="somapony_jer[]"/>

I just want to get the value of id=somaponyJer . Then I want to get the values of dynamically created input by jQuery.

      $(document).ready(function () {

        $(".addrowMushok18").click(function () {

            var n = ($('.row_append tr').length - 0) + 1;


            var tr = '<tr>\
                        <td>' + n + '</td>\
                        <td><input type="date" required name="transection_date[]" class="form-control"></td>\
                        <td><input type="text" required name="transection_details[]" class="form-control" /></td>\
                        <td><input type="text" required name="purchase_sales_statement[]" class="form-control" /></td>\
                        <td><input type="date" required name="purchase_sales_date[]" class="form-control" /></td>\
                        <td><input type="text" required id="newTreasuryDeposit" name="treasury_deposit[]" class="form-control" /></td>\
                        <td><input type="text" required id="newReyat" name="reyat_2[]" class="form-control" /></td>\
                        <td><input type="text" required id="newProdeyo" name="prodeyo_3[]" class="form-control" /></td>\
                        <td><input type="text" required id="newSomaponyJer" required name="somapony_jer[]" class="form-control" value/></td>\
                        <td><input type="text" required name="remarks[]" class="form-control" /></td>\
                        <td align="center"><span class="remove_row"><i class="fa fa-trash-o fa-2x text-danger" data-toggle="tooltip" data-placement="left" title="Delete!" ></i></span></td>\
                    </tr>';

          $(".row_append").append(tr);
         }); 
});     

From this dynamically created input fileds, I want to get the values of id="newTreasuryDeposit" , id="newReyat" id="newSomaponyJer"

and then calculate them and insert into id="newSomaponyJer" which is created by JQuery.

Please help.

Answer 1

You can do something like this. Note that I have added buttons and table that were missing in the html that you have posted, so change it according to your html. And for the caluclate part, I have just added inserted numbers together, change that according to your needs as well.

Click add button to generate that tr , fill fields with the mentioned ids, click calculate button. Result will be shown in the filed with id = newSomaponyJer .

 function calculateValue() { const $sj = document.querySelector('#somaponyJer'); const $ntd = document.querySelector('#newTreasuryDeposit'); const $nr = document.querySelector('#newReyat'); const $nsj = document.querySelector('#newSomaponyJer'); //do some calculation eg sum them const result = Number($sj.value) + Number($ntd.value) + Number($nr.value); $nsj.value = result; } $(document).ready(function () { $(".addrowMushok18").click(function () { var n = ($('.row_append tr').length - 0) + 1; var tr = '<tr>\\ <td>' + n + '</td>\\ <td><input type="date" required name="transection_date[]" class="form-control"></td>\\ <td><input type="text" required name="transection_details[]" class="form-control" /></td>\\ <td><input type="text" required name="purchase_sales_statement[]" class="form-control" /></td>\\ <td><input type="date" required name="purchase_sales_date[]" class="form-control" /></td>\\ <td><input type="text" required id="newTreasuryDeposit" name="treasury_deposit[]" class="form-control" /></td>\\ <td><input type="text" required id="newReyat" name="reyat_2[]" class="form-control" /></td>\\ <td><input type="text" required id="newProdeyo" name="prodeyo_3[]" class="form-control" /></td>\\ <td><input type="text" required id="newSomaponyJer" required name="somapony_jer[]" class="form-control" value/></td>\\ <td><input type="text" required name="remarks[]" class="form-control" /></td>\\ <td align="center"><span class="remove_row"><i class="fa fa-trash-o fa-2x text-danger" data-toggle="tooltip" data-placement="left" title="Delete!" ></i></span></td>\\ </tr>'; $(".row_append").append(tr); }); $('.calculate').click(calculateValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" required name="prodeyo_3[]" class="form-control"/> <input type="text" id="somaponyJer" required name="somapony_jer[]"/> <button class="addrowMushok18">add</button> <button class="calculate">calculate</button> <table> <tr class="row_append"></tr> <table>