@Calabozo

Почему ajax работает только с первой строкой таблицы?

Добрый день.
Прошу помощи в моих мучениях. В разработке я не але.
Сразу к делу...
Есть таблица с данными на против каждой строки кнопка "удалить"(удалить строку полностью).
В каждой строке таблицы кнопки работают, но Ajax все равно принимает данные первого объекта/строки таблицы.
Как сделать, что бы кнопка соответствовала своей строке?
Исходный код HTML
table>
    <thead>
        <tr>
            <td>Id</td>
            <td>name</td>
            <td>Удалить</td>
        </tr>
    </thead>
    <tbody>
        <?php foreach($data[0] as $row => $value): ?>
        <tr>
            <td> <?=$value[0]?></td>
            <td> <?=$value[1]?></td>

            <td>
                <form method="POST"  id="form2" action="" >
                    <input  type="hidden" name="del" class="del" value="<?=$value[0]?>"  /><br>
                    <input  value="del"  id="btn2"  type="button" > </form>
            </td>
        </tr>
        <?php endforeach?>
    </tbody>
</table>
<div  id='result_form3'> </div>


Код Ajax
$( document ).ready(function() {
	var elements = document.querySelectorAll('#btn2');
	for (var i = 0; i < elements.length; i++) {
		elements[i].addEventListener('click', function(){
			sendAjaxForm1('result_form3', 'form2', 'application/models/forms/del_form.php');
			return false; });
	}

});
 
function sendAjaxForm1(result_form3, form2, url) {
    $.ajax({
        url:     url, 
        type:     "POST", 
        dataType: "html", 
        data: $("#"+form2).serialize(),  
		success: function(response) { 
		      	$('#result_form3').html(response);
		},
    	error: function(data) { 
            $('#result_form3').html('Ошибка. Данные не отправлены.');
    	}
 	});
}
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
У всех форм одинаковый id=form2. Соответственно JS находит самую первую форму с этим id, с ней и работает. Переделайте например на id=form<?=$value[0]?>, и заработает.

Конечно после того, как в sendAjaxForm1() поменяете 'form2' на использование корректного id соответствующей формы. А можно просто переписать код на использование value=<?$value[0]?> из нажатой button.

P.S. Да и вообще, сами формы не нужны, если используется AJAX. Их нужно использовать для браузеров, не работающих с AJAX. А тут они - совершенно лишние...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы