Как изменить несколько входных значений с помощью onchange jquery

сначала у меня есть ввод с name="ot_jam['+ number +']" и onchange"otNormal(this.value)", во-вторых, у меня есть ввод с именем = "ot_uang ['+ число +']" так что теперь у меня есть несколько входных данных, и я хочу, чтобы каждый ot_jam просто изменил значение ot_uang с тем же именем, моя проблема в том, что я застрял, когда у меня есть несколько входных данных, и я меняю значение ot_jam, но я просто меняю последний ввод с именем ot_uang

Извините, мой английский так плох, что я все еще учусь.

Это мой HTML-код

 <div class = "col-6 text-right mb-2">
 <button type = "button" class = "btn btn-success ti-plus" id = "BarisBaru"></button>
 </div>

<div class = "form-group" id = "tableLoop"></div>

Это мой код Js

<script type = "text/javascript">
$(document).ready(function() {
            for (baris = 1; baris <= 1; baris++) {
                Barisbaru();
            }
            $('#BarisBaru').click(function(e) {
                e.preventDefault();
                Barisbaru();
            });

 });

 function otNormal(value) {
            let a = 1.5 * (value / 173) * 3000000;
            const b = Math.round(a);
            const currency = b.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
            var number = $("#tableLoop .row .num").length;
            $('[name = "ot_uang[' + number + ']"]').val(currency);
            // var xx = $('[name = "ot_jam[' + number + ']"]').val();
            // if (xx == 0) {
            //     $('[name = "ot_uang[' + number + ']"]').val("kosong");
            // } else {
            //     $('[name = "ot_uang[' + number + ']"]').val(currency);
            // }
            
        }

        function Barisbaru() {
            $(document).ready(function() {
                $("[data-toggle='tooltip']").tooltip();
            });
            var number = $("#tableLoop .row .num").length + 1;
            var Baris = '<div class = "row mb-2">';
            Baris += '<div class = "num col-6 col-xl-2 my-auto">';
            Baris += '<span>OT.<span class = "count_slip"></span></span>';
            Baris += '</div>';
            Baris += '<div class = "col-6 col-xl-3">';
            Baris += '<input class = "form-control" type = "number" name = "ot_jam[' + number + ']" value = "0.0" onchange = "otNormal(this.value)">';
            Baris += '</div>';
            Baris += '<div class = "col-6 col-xl-3 my-auto">';
            Baris += '<span>Jam => Rp.</span>';
            Baris += '</div>';
            Baris += '<div class = "col-6 col-xl-3">';
            Baris += '<input class = "form-control" type = "text" name = "ot_uang[' + number + ']" value = "0" readonly>';
            Baris += '</div>';
            Baris += '<button class = "btn btn-sm btn-danger ti-close" data-toggle = "tooltip" id = "HapusBaris"></button>';

            $("#tableLoop").append(Baris);
        }

</script>

javascript jquery onclick jquery-events onchange

16.11.2022 04:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Причина, по которой вы получали только последний ввод, была связана с «номером var» внутри otNormal(). Он всегда собирался получить последнее число, используя длину. Вместо этого вы можете получить правильный номер, взяв его из имени элемента otjam.

Получить правильный номер Пример:

const number = e.target.name.replace(/[^0-9]/g, '');

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

Документ.готов()

Кэшированные элементы, которые вы будете использовать. (barisDiv и элемент таблицы)
Изменен клик на on.click, а также вынесен из html
Добавлено событие изменения в родительскую таблицу вместо входных данных
Перемещенный обратный вызов нажатия кнопки из html

otNormal()

измененная функция для возврата измененного значения (теперь событие изменения будет обновлять uAng)

БарисБару()

удален document.ready() (здесь не нужен)

 $(document).ready(function() {
    Barisbaru();
    const barisDiv = $('#BarisBaru');
    const tableElement = $('#tableLoop');
    //changed older click handler to on
    barisDiv.on("click", (e)=>{
      e.preventDefault();
      Barisbaru();
    });
    //target any button (old or new) inside the table
    tableElement.on("click", "button", (e)=>{
        console.info("do tooltip for ", e.target);
    });
    //target any input inside the table. uAng is readonly so this will only trigger on jam
    tableElement.on("change", "input", (e)=>{
        const element = e.target; //get the changed input
        const value = element.value; //get the value
        const number = element.name.replace(/[^0-9]/g, ''); //strip the number from the element name
        const uAngInput = $('input[name = "ot_uang['+number+']"]'); //get the uAng Input
        uAngInput.val(otNormal(value)); //replace the value
    });  
 });
 
function otNormal(value) {
    let a = 1.5 * (value / 173) * 3000000;
    const b = Math.round(a);
    return b.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
}

function Barisbaru() {
    var number = $("#tableLoop .row .num").length + 1;
    var Baris = '<div class = "row mb-2">';
    Baris += '<div class = "num col-6 col-xl-2 my-auto">';
    Baris += '<span>OT.<span class = "count_slip"></span></span>';
    Baris += '</div>';
    Baris += '<div class = "col-6 col-xl-3">';
    Baris += '<input class = "form-control" type = "number" name = "ot_jam[' + number + ']" value = "0.0">';
    Baris += '</div>';
    Baris += '<div class = "col-6 col-xl-3 my-auto">';
    Baris += '<span>Jam => Rp.</span>';
    Baris += '</div>';
    Baris += '<div class = "col-6 col-xl-3">';
    Baris += '<input class = "form-control" type = "text" name = "ot_uang[' + number + ']" value = "0" readonly>';
    Baris += '</div>';
    Baris += '<button class = "btn btn-sm btn-danger ti-close" data-toggle = "tooltip" id = "HapusBaris">HapusBaris</button>';

    $("#tableLoop").append(Baris);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "col-6 text-right mb-2">
 <button type = "button" class = "btn btn-success ti-plus" id = "BarisBaru">BarisBaru</button>
 </div>

<div class = "form-group" id = "tableLoop"></div>

Я рад, что помог. Если вы найдете этот ответ полезным, отметьте его как ответ. :)

— 17.11.2022 05:47

конечно, и я тоже сохраню этот ответ :)

— 17.11.2022 07:57

16.11.2022 06:11