как добавить значения одинаковых входных номеров идентификатора и отобразить в один блок - PullRequest
0 голосов
/ 28 сентября 2019

У меня есть проблема, когда я должен получить сумму нескольких значений входных элементов, названных как num_1, num_2, num_3, ... Поэтому я хочу использовать функцию JavaScript, чтобы добавить значения вышеуказанных элементов и отобразить их вблок / метка динамически, поэтому, когда пользователь добавляет / изменяет значения в блоке, результирующее значение также должно динамически меняться.

Мой код

<form>
<table id="table1">
<tr>
<th>Year 1 Amount</th>
                    <th>Year 2  Amount</th>
                    <th>Year 3  Amount</th>
                    <th>Amount yet to transfer if any</th>
</tr>
<tr>
                <td><input type="number" name="year910amt_1" id="year910amt_1" style='width:100%;'></td>
                <td><input type="number" name="year1011amt_1" id="year1011amt_1" style="width:100%;"></td>
                <td><input type="number" name="year1112amt_1" id="year1112amt_1" style="width:100%;"></td>
                <td><input type="number" name="amttranfer_1" id="amttranfer_1" style="width:100%;"></td>
</tr>
</table>
<input type='button' value='Add more' id='addmore'>

  <table id="table2" style="width:100%; display:none;" >

                    <tr class=' '> 
                <td colspan="4">Total amount</td>
                <td><input type="text" name="totalamt1" id="totalamt1"></td><!--should carry sum of inputs of id=year910amt_1-n-->
                <td><input type="text" name="totalamt2" id="totalamt2"></td><!--should carry sum of inputs of id=year1011amt_1-n-->
                <td><input type="text" name="totalamt3" id="totalamt3"></td><!--should carry sum of inputs of id=year1112amt_1-n-->
                <td><input type="text" name="totalamt4" id="totalamt4"></td><!--should carry sum of inputs of id=amttranfer_1-n-->

                </tr>
                    </table>   <br />
           <input type="submit" name="submit" value="submit">

        </form>  

Iесть функция, которая может добавлять больше строк: id = "amttranfer_n", id = "year1112amt_n", и т. д., где n - последний входной идентификатор.это зависит от пользователя, сколько строк он должен добавить,

Я хочу, чтобы сумма всех строк одного столбца динамически добавлялась в поле, указанном выше

Может кто-нибудь помочь с решением

Я сейчас использую этот скрипт, который не работает:

<script>
 // Get last id 
                var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
                var split_id = lastname_id.split('_');

                // New index
                var index = Number(split_id[1]) + 1;
$(document).on("change", "#year910amt_"+index, function() {
    var sum = 0;
    $("#year910amt_"+index).each(function(){
        sum += +$(this).val();
    });
    $("#totalamt1").val(sum);
});
</script>

Примечание: это для одного столбца, я буду использовать 4 сценария / функции для другого столбцатипы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...