Показать сообщение отдельно
  #1 (permalink)  
Старый 03.12.2019, 12:55
Новичок на форуме
Отправить личное сообщение для creeptos Посмотреть профиль Найти все сообщения от creeptos
 
Регистрация: 03.12.2019
Сообщений: 4

Повесить событие на несколько кнопок
Добрый день всем.
Мне нужно, чтобы при нажатии на кнопку ОК отправлялся на сервер POST. Сейчас это работает только с первой кнопкой, которая в таблице в первой строке. Остальные молчат. Как сделать, чтобы каждая из динамически отрисованных foreach кнопоквыполняла онинаковые действия - оправка POST. Желательно, чтобы JavaScript не менять, поскольку он работает, а я в JS тюлень. Дайте, пожалуйста, готовое решение, как повесить события на каждую кнопку и как их обрабатывать, или повесить собитые на общий класс кнопок или еще как - нибудь.

<?php foreach ($stores as $store): ?>
        <tr class="trColor">
            <td><input type="text" id="id" readonly name="id" value="<?= $store->getId() ?>" size="4"></td>
            <td><?= $store->getTradeShop() ?></td>
            <td><?= $store->getFactoryNumber() ?></td>
            <td><?= $store->getDateOfd() ?></td>
            <td><?= $store->getMonth() ?></td>
            <td><select id="status" name="status" >
                    <option class="selectChange" id="resultStatus" ><?= $store->getStatus() ?></option>
                    <?php if (($user->getRole()) === 'admin'): ?>
                    <option value="Выполнено"><h1>Выполнено</h1></option>
                    <option value="Зарегистрировать">Зарегистрировать</option>
                    <option value="Заменить">Заменить</option>
                    <input id="INSERT" type="submit" value="ОК">
                    <?php endif; ?>
                </select>
            </td>
        </tr>
        <?php endforeach; ?>


document.addEventListener("DOMContentLoaded", function () {
    // получить кнопку
    var mybutton = document.getElementById('INSERT');
    //подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
    mybutton.addEventListener('click',function () {
        //1. Сбор данных, необходимых для выполнения запроса на сервере
        var status = document.getElementById('status').value;
        var id = document.getElementById('id').value;
        //Подготовка данных для отправки на сервер
        //т.е. кодирование с помощью метода encodeURIComponent
        //select = 'select=' + encodeURIComponent(select);
        //login = 'post=' + encodeURIComponent(login);
        const together = "&status=" + status + "&id=" + id;
        // 2. Создание переменной request
        var request = new XMLHttpRequest();
        // 3. Настройка запроса
        request.open('POST', 'http://fiscaloop.ru/stores/kosarev/edit-store/', true);
        // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
        request.addEventListener('readystatechange', function () {
            //если запрос пришёл и статус запроса 200 (OK)
            if ((request.readyState == 4) && (request.status == 200)) {
                // например, выведем объект XHR в консоль браузера
                console.log(request);
                // получить элемент c id = resultSELECT
                var resultStatus = document.getElementById('resultStatus');
                // заменить содержимое элемента ответом, пришедшим с сервера
                resultStatus.innerHTML = request.responseText;
                $('.selectChange:contains("Зарегистрировать")').parents(".trColor").css('background','#ffd700');
                $('.selectChange:contains("Заменить")').parents(".trColor").css('background','#E9967A');
                $('.selectChange:contains("Выполнено")').parents(".trColor").css('background', '#fff8dc');
            }
        });
        // Устанавливаем заголовок Content-Type(обязательно для метода POST).
        // Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
        request.send(together);
    });
    $('.selectChange:contains("Зарегистрировать")').parents(".trColor").css('background','#ffd700');
    $('.selectChange:contains("Заменить")').parents(".trColor").css('background','#E9967A');
});
Ответить с цитированием