estoy aprendiendo a hacer un simple crud con ajax y jquery. Ahora estoy intentando modificar cualquiera de los conceptos que tengo en una lista de elementos que previamente he insertado en la base de datos mysql, pero por alguna razón no me sale.
Éste es el html del formulario a través del cual inserto en base de datos:
<form id="form_insert" name="form_insert" class="form-control">
<input type="text" id="name" name="name" placeholder="Nombre"> <br><br>
<input type="text" id="last_name" name="last_name" placeholder="Apellido"> <br><br>
<button type="submit" id="btn_insert" class="btn btn-warning m-3">Enviar</button>
</form>
Éste es el formulario con el que intento modificar los conceptos listados:
<div class="card" id="cardUpdate" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title text-center">Modifica</h5>
<form id="form_update" name="form_update" class="form-group">
<input type="text" id="name_update" name="name_update" placeholder="Nombre" class="form-control"> <br>
<input type="text" id="last_name_update" name="last_name_update" placeholder="Apellido" class="form-control"> <br>
<button type="submit" id="btn_modif" class="btn btn-success form-control">Confirma</button>
</form>
</div>
</div>
Éste es el ajax con el que empiezo mostrando la lista:
$(document).ready(function(){
$('#cardUpdate').hide();
$.ajax({
url: 'list2.php',
type: 'get',
success: function(response){
let data = JSON.parse(response);
let template = '';
data.forEach(element => {
template +=
`<tr value="${element.id}">
<td>${element.id}</td>
<td>${element.name}</td>
<td>${element.last_name}</td>
<td><button class="btn btn-danger delete">Borrar</button></td>
<td><button class="btn btn-warning update">Modificar</button></td>
</tr>`
});
$('#campo').html(template);
}
});
Éste el ajax con el que inserto los datos y a continuación muestro los datos:
$('#form_insert').submit(function(e){
e.preventDefault();
let data = {
name: $('#name').val(),
last_name: $('#last_name').val()
};
$.post('add.php', data, function(response){
console.log(response);
$.ajax({
url: 'list2.php',
type: 'get',
success: function(response){
let data = JSON.parse(response);
let template = '';
data.forEach(element => {
template +=
`<tr value="${element.id}">
<td>${element.id}</td>
<td>${element.name}</td>
<td>${element.last_name}</td>
<td><button class="btn btn-danger delete">Borrar</button></td>
<td><button class="btn btn-warning update">Modificar</button></td>
</tr>`
});
$('#campo').html(template);
$('#formulario').trigger('reset');
}
});
});
});
Y éste con el que intento, en vano, modificar cualquier concepto:
let id_update; //el id lo capturo aparte en una variable global con el siguiente click
$(document).on('click', '.update', function(){
$('#cardUpdate').show();
let element = $(this)[0].parentElement.parentElement;
id_update = $(element).attr('value');
});
$('#form_update').on('submit', function(e){
e.preventDefault();
let data = {
id: id_update,
name: $('#name_update').val(),
last_name: $('#last_name_update').val()
};
$.post('update.php', data, function(response){
console.log(response);
$.ajax({
url: 'list2.php',
type: 'get',
success: function(response){
let data = JSON.parse(response);
let template = '';
data.forEach(element => {
template +=
`<tr value="${element.id}">
<td>${element.id}</td>
<td>${element.name}</td>
<td>${element.last_name}</td>
<td><button class="btn btn-danger delete">Borrar</button></td>
<td><button class="btn btn-warning update">Modificar</button></td>
</tr>`
});
$('#campo').html(template);
}
});
});
});
});
Por último, el código php:
<?php
require_once('conn.php');
if(isset($_POST['id'])){
$id = $_POST['id'];
$name = $_POST['name_update'];
$last_name = $_POST['last_name_update'];
$query = "UPDATE prueba SET name=$name, last_name=$last_name WHERE id=$id";
$result = mysqli_query($connection, $query);
if(!$result){
die('Fallaste!');
}
echo 'Conexión lograda!';
}
?>
Como digo, el insertar me sale bien, el problema lo tengo al modificar, y no lo entiendo porque es casi el mismo código. Sin embargo, el id sí me llega correctamente al servidor, lo que parece que no llega (según veo en el error) son el name y el last_name. ¿Es porque son dos formularios en un mismo archivo?
Si alguien pudiera ayudarme se lo agradecería de corazón.
Un saludo, Fidel
P.D. Éste es el error que me da:
<br />
Warning: Undefined array key "name_update" in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 8
Warning: Undefined array key "last_name_update" in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 9
Fatal error: Uncaught mysqli_sql_exception: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ' last_name= WHERE id=68' at line 1 in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php:11
Stack trace:
#0 C:\xampp\htdocs\Proyectos\PruebaAjax\update.php(11): mysqli_query(Object(mysqli), 'UPDATE prueba S...')
#1 {main}
thrown in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 11