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

Question

[Calabozo]

Добрый день.
Прошу помощи в моих мучениях. В разработке я не але.
Сразу к делу...
Есть таблица с данными на против каждой строки кнопка "удалить"(удалить строку полностью).
В каждой строке таблицы кнопки работают, но 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('Ошибка. Данные не отправлены.');
    	}
 	});
}

Comments

[scottparker]

id кнопок везде одинаковый?

Answer 1

[AUser0]

У всех форм одинаковый id=form2. Соответственно JS находит самую первую форму с этим id, с ней и работает. Переделайте например на id=form<?=$value[0]?>, и заработает.

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

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

Comments

[Calabozo]

Решил пойти по пути что показался проще, второму предложенному способу.
Прошу еще помощи, не понимаю как работает функция $this или если она ненужна то как будет правильнее ?
Скрипт Html

<td>
                <form method="POST"  id="form2" action="" >
                    <button  value="del_<?=$value[0]?>"  class="btn2"  type="button"  onclick="SendPost();"> ntcn</button></form>
            </td>

JS

function SendPost() {
  
	var id = $(this).val('#btn');
	var splitid = id.split('_');
	var deleteid = splitid[1];
			$.ajax({
				type: 'post',
				url:'application/models/forms/red_form.php',
				data:{ del : deleteid },
			success: function(response) { 
					$('#result_form3').html(response);
				}
			});
		}

[AUser0]

Я бы рекомендовал:

<button type=button class=btn2 value='del_<?=$value[0]?>' onclick='SendPost(this);'>Delete</button>

function SendPost(elem) {
  var splitid = $(elem).val().split('_');

И сама форма <form method="POST" id="form2" action=""> абсолютно лишняя, она нигде не используется, никуда не отправляется.

[Calabozo]

AUser0, Огромное спасибо. Вее работает.