Ajax несколько форм и перезагрузка страницы?

Question

[arsenaljek]

Укажите на ошибку
Делаю раздел для редактирования технических характеристик

spoiler

Вывод в шаблоне

while ($specifications = mysqli_fetch_array($result)) {
												$i++;
												?>
												<tr>
													<td><?=$specifications_array[$specifications['specification_id']]?></td>
													<td>
														<form id="editSpecification-<?=$tovar_id?>" action="<?=$_SERVER['PHP_SELF']?>?tovar_id=<?=$tovar_id?>" method="POST">
															<input type="hidden" name="specification_id" id="specification_id<?=$i?>" value="<?=$specifications['specification_id']?>">
															<input type="hidden" name="tovar_id" id="tovar_id" value="<?=$tovar_id?>">
															<input type="text" name="specification_value" id="specification_value<?=$i?>" value="<?=$specifications['value']?>">
															<input type="number" name="specification_value_sort" id="specification_value_sort<?=$i?>" value="<?=$specifications['sort']?>">
															<button type="submit" name="sendSpecification<?=$i?>" id="sendSpecification<?=$i?>" class="btn btn-primary">Сохранить</button>
														</form>
														<span id="result"> </span>
													</td>
												</tr>
											<?php
											}

$("#editSpecification-<?=$tovar_id?>").submit(function(e){
		    e.preventDefault();
		    $.ajax({
		        type: "POST",
		        url: "/../admin/ajax/editProductSpecif.php",
		        data: $("#editSpecification-<?=$tovar_id?>").serialize(),

		        success: function(data){
		        	if(data == 1){ 
			            toastr.success('Характеристика изменена!');  
					} else {
						$("#result").html('<div class="alert alert-danger alert-dismissible" role="alert"><div class="alert-message"> Ошибка!</div></div>');  
					}
				}
			});
		});

Если править первое значение то всё норм, а если править второе и последующие то страница просто перегружается

Answer 1

[ThunderCat]

охохох...

$("#editSpecification-<?=$tovar_id?>").submit(function(e){...

тут вы повесили листенер на ОДИН конкретный элемент формы, так как тут то у вас цикла нет! Замените селектор на form или на класс формы. Внутри соответственно вы спокойно получите эту конкретную форму как $(this), собственно ее сереализуете и все, профит!

а если править второе и последующие то страница просто перегружается

это понятно, так как на них не повешен листенер, форма нормально так себе субмитится, превентДефаулта то на ней нету...

Comments

[arsenaljek]

А как можно добавить кнопку удалить к этой форме? Т.е задача использовать один ajax обработчик для 2х действий. Редактирование и Удаление. Редактирование сейчас работает, а удаление работает не через ajax. Я не понимаю, как передать в ajax значение, что нажата кнопка "Удалить", чтобы там запустить условие на удаление строки.

<form id="editSpecification-<?=$tovar_id?>" action="<?=$_SERVER['PHP_SELF']?>?tovar_id=<?=$tovar_id?>" method="POST">
															<input type="hidden" name="specification_id" id="specification_id<?=$i?>" value="<?=$specifications['specification_id']?>">
															<input type="hidden" name="tovar_id" id="tovar_id" value="<?=$tovar_id?>">
															<input type="text" name="specification_value" id="specification_value<?=$i?>" value="<?=$specifications['value']?>">
															<input type="number" name="specification_value_sort" id="specification_value_sort<?=$i?>" value="<?=$specifications['sort']?>">
															<button type="submit" class="btn btn-primary">Сохранить</button>

														</form>
														<form action="<?=$_SERVER['PHP_SELF']?>?tovar_id=<?=$tovar_id?>&del" method="POST">
															<input type="hidden" name="specification_id" id="specification_id<?=$i?>" value="<?=$specifications['specification_id']?>">
															<button type="submit" class="btn btn-danger">Удалить</button>
														</form>

[ThunderCat]

arsenaljek, ну, есть 2 варианта, либо использовать ту же форму и отслеживать имя нажатой кнопки, и уже в зависимости от этого решать на бэкенде что делать, либо есть вариант в кнопку прописывать дата атрибут с айди нужной записи, и по нажатию на кнопку отправлять этот айди на адрес удаления, ведь кроме айди больше ничего не нужно. Естественно на эти кнопки будет другой листенер.

[arsenaljek]

ThunderCat, А как отследить имя нажатой кнопки? Кнопку сделать инпутом и задать ей name?

<input type="submit" class="btn btn-danger" name="del" value="Удалить">

[ThunderCat]

arsenaljek, да