29
Июн
2022

Как передать данные в input с data-product

html

    <div class="container">
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-1" id="product">заказать</a>
        </div>
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-2" id="product">заказать</a>
        </div>
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-3" id="product">заказать</a>
        </div>
    </div>


    
    <div class="modal">
        <div class="container modal_body">
            <form action="" method="POST" class="modal_content">
                <a href="" class="close_modal">&#10006</a>
                <p>Оформить заказ</p>
                <input type="text" placeholder="Ваше имя">
                <input type="tel" placeholder="Ваш телефон">
                <input type="text" readonly="">
                <button class="btn_buy">Отправить</button>
            </form>
        </div>

    </div>

Вызов модального окна на JS:

let modal = document.querySelector('.modal');
let modalBody = document.querySelector('.modal_body');
let openModal = document.querySelectorAll('.open_modal');
let closeModal = document.querySelector('.close_modal');



openModal.forEach(function(button) {
    button.addEventListener('click', function(event) {
        event.preventDefault();
        modal.classList.add('active');
    })
});

closeModal.addEventListener('click', function() {
    event.preventDefault();
    modal.classList.remove('active');
});

Модальное окно открывается без проблем. Только вот не получается в input id="product" присвоить данные с тега а data-product. И не получается закрытие модального вне граница модального окна. Кто сможет помочь? Буду благодарен. А то уже который день застрял на этом...(((

Источник: https://ru.stackoverflow.com/questions/1425073/%D0%9A%D0%B0%D0%BA-%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%82%D1%8C-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B2-input-%D1%81-data-product

Тебе может это понравится...

Добавить комментарий