Как я могу обновить любую строку, а не только верхнюю, с помощью кнопки обновления с каждой стороны в PHP и AJAX
только начинаю, так что это будет звучать как вопрос новичка, но как я могу использовать кнопку обновления для обновления отдельных строк, а не только верхней строки. Всякий раз, когда я использую кнопку обновления, запрос проходит только в том случае, если это была верхняя строка.
Это код для index.php
<html>
<head>
<title>Test</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<center>
<h3>UPDATE DATA</h3>
<?php
$run = 0;
$conn = new mysqli('localhost', '', '', '');
$sql = "SELECT * FROM moderator";
$result = $conn->query($sql);
while ( $row=mysqli_fetch_assoc($result)) {
$run = $run + 1;
?>
<div>
ID<input type = "text" id = "id" value = "<?php echo $row['id']; ?>">;
Moderator<input type = "text" id = "mod" value = "<?php echo $row['name']; ?>">;
Category<input type = "text" id = "ctgr" value = "<?php echo $row['category']; ?>">;
<button type = "submit" id = "update" rel = "<?php echo $run; ?>">UPDATE</button>
</div>
<?php
}?>
</center>
<script>
$(document).ready(function(){
$("#update").click(function(){
var name=$("#mod").val();
var ctgr=$("#ctgr").val();
var id=$("#id").val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
</script>
</body>
Это код для update.php
<?php
$conn = new mysqli('localhost', '', '', '');
$name=$_POST["name"];
$ctgr=$_POST["ctgr"];
$id=$_POST["id"];
$sql = "UPDATE moderator set name='$name', category='$ctgr' where id='$id'";
if ($conn->query($sql)===TRUE){
echo "DATA updated";
}
?>
Вы, наверное, видите, что я пытаюсь создать отдельную переменную для каждой строки, но не могу понять. К сожалению, код тоже очень запутанный.
Я удалил информацию о базе данных, но строки отображаются, когда вводятся учетные данные.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Все элементы ввода ваших строк имеют одинаковый атрибут id
Подобно id первых строк элементы подобны id, mod, ctgr
Также id элементов вторых строк - id, mod ctgr
Jquery находит первый элемент, если там несколько элементов с одинаковым идентификатором
Вы можете создать уникальный идентификатор, добавив к нему уникальную инкрементную переменную $ run как
ID<input type = "text" id = "id"+<?php echo $run; ?> value = "<?php echo $row['id']; ?>">; Moderator<input type = "text" id = "mod"+<?php echo $run; ?> value = "<?php echo $row['name']; ?>">; Category<input type = "text" id = "ctgr"+<?php echo $run; ?> value = "<?php echo $row['category']; ?>">; <button type = "submit" id = "update" rel = "<?php echo $run; ?>" onclick = "updatetodb( <?php echo $run; ?>);“ >UPDATE</button>
Затем создайте функцию javascript с именем updatetodb с одним аргументом и определите строку по этому аргументу как
function updatetodb(var run) {
var id=$('#id' +run).value;
Большое спасибо!! На самом деле это то, что я изначально пытался сделать, поэтому спасибо за помощь
Это связано с тем, что у вас дублированы идентификаторы ввода, у вас должен быть только один идентификатор с тем же значением в html, это действительно так, вы не получите ошибки, но у вас будут проблемы с javascript, когда вы попытаетесь получить доступ к этим идентификаторам , вы получите только первый.
Чтобы исправить это, вы можете удалить идентификатор и поместить его как класс:
<div>
ID<input type = "text" class = "id" value = "<?php echo $row['id']; ?>">;
Moderator<input type = "text" class = "mod" value = "<?php echo $row['name']; ?>">;
Category<input type = "text" class = "ctgr" value = "<?php echo $row['category']; ?>">;
<button type = "submit" class = "update" rel = "<?php echo $run; ?>">UPDATE</button>
</div>
и используйте этот JS:
$(document).ready(function(){
$(".update").click(function(){
var container = $(this).closest('div'); // parent div
var name = container.find('.mod').val();
var ctgr = container.find('.ctgr').val();
var id = container.find('.id').val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
Каждый из ваших входов формы будет иметь один и тот же идентификатор, который неверен. У каждого элемента должен быть свой идентификатор. Лучший способ справиться с этим - дать каждому
inputсвой уникальный идентификатор, а затем передать весь запрос формы через ваш AJAX. Затем в своем PHP вы можете перебрать значения для своего оператора обновления.