Добрый день всем.
Мне нужно, чтобы при нажатии на кнопку ОК отправлялся на сервер 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');
});