Перенос данных из input в другой input

Question

Предыстория: Использую стороннюю платформу и не могу редактировать некоторые базовые элементы, но могу добавлять свои и взаимодействовать с ними при помощи js

Суть в следующем есть вот такой код

<input type="tel" id="phone" required="">
<input type="hidden" name="formParams[getNumber]">
<input type="hidden" class="f-input" name="formParams[phone]" >

Суть в следующем. Первый инпут заполняет человек, во втором инпуте срабатывает скрипт который берет номер пользователя и преобразует его международный формат. Это уже реализовано

А вот как передать значения из 2 инпута в 3, что бы отправить эти данные в бд, не знаю, уже голову всю поломал. Потому что именно ко второму инпуту у меня нету доступа, а отправка в бд срабатывает по name="formParams[phone]".

Answer 1

Если срабатывает событие change у formParams[getNumber], и вас понимать буквально:

document.querySelector('[name="formParams[getNumber]"]').addEventListener('change', function(){
    document.querySelector('[name="formParams[phone]"]').value = this.value;
})

Если событие не срабатывает, то его можно инициировать самостоятельно:

document.querySelector('[name="formParams[getNumber]"]').addEventListener('change', function(){
    document.querySelector('[name="formParams[phone]"]').value = this.value;
    console.log(document.querySelector('[name="formParams[phone]"]').value);
})

document.getElementById('phone').addEventListener('change', function(){
    document.querySelector('[name="formParams[getNumber]"]').value = this.value;
    document.querySelector('[name="formParams[getNumber]"]').dispatchEvent(new Event('change'));
})

<input type="tel" id="phone" required="">
<input type="hidden" name="formParams[getNumber]">
<input type="hidden" class="f-input" name="formParams[phone]" >

Answer 2

    document.addEventListener('DOMContentLoaded', function () { // При загрузке документа
        let phone = document.querySelector('#phone');
        let getNum = document.querySelector('[name="formParams[getNumber]"]');
        let formPhone = document.querySelector('[name="formParams[phone]');
        phone.oninput = function () {
            getNum.value = 'Формат телефона - 8' + this.value; // Тут добавляется формат
            formPhone.value = getNum.value; // Записываем значение из второго поля в третье.
            console.log(formPhone.value);
        }
    })

<input type="tel" id="phone" required="">
<input type="hidden" name="formParams[getNumber]">
<input type="hidden" class="f-input" name="formParams[phone]" >

В случае, если значение появляется во втором поле только после полного ввода номера в первом - Вы можете использовать событие blur:

    document.addEventListener('DOMContentLoaded', function () { // При загрузке документа
        let phone = document.querySelector('#phone');
        let getNum = document.querySelector('[name="formParams[getNumber]"]');
        let formPhone = document.querySelector('[name="formParams[phone]');
        phone.addEventListener('blur', function () {
            getNum.value = 'Формат номер - '+this.value;
            formPhone.value = getNum.value; // Записываем значение из второго поля в третье.
            console.log(formPhone.value);
        });
    })

<input type="tel" id="phone" required="">
<input type="hidden" name="formParams[getNumber]">
<input type="hidden" class="f-input" name="formParams[phone]" >

БЛОГ НА HUSL

Перенос данных из input в другой input

Ответы (2 шт):