UPDATE FOTOS CON ALERTA JS Y CSS FETCH API JSON PHP MYSQL document.getElementById

jose fernandez

haz codigo que actualize foto en carpeta y base dato por form php pdo mysql fetch javascript puro con api json metodo post body: JSON.stringify tener encuenta si el usuario no sube foto que conserve la que tenia . hacer con campo nombre y campo precio campo foto

Claro, aquí te dejo un ejemplo de cómo actualizar la foto en una carpeta y una base de datos utilizando PHP PDO MySQL y JavaScript puro con una API JSON mediante el método POST con el cuerpo de la solicitud en formato JSON:

HTML:

python

Copy code

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('#form');

form.addEventListener('submit', (e) => {

e.preventDefault();

const formData = new FormData(form);

const json = {};

formData.forEach((value, key) => { json[key] = value; });

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

PHP (guardar.php):

php

Copy code

<?php

$pdo = new PDO('mysql:host=localhost;dbname=nombre_de_la_base_de_datos', 'usuario', 'contraseña');

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$nombre = $_POST['nombre'] ?? '';

$precio = $_POST['precio'] ?? '';

$foto = $_FILES['foto'] ?? null;

if ($foto && $foto['error'] === UPLOAD_ERR_OK) {

$extension = pathinfo($foto['name'], PATHINFO_EXTENSION);

$nombreArchivo = uniqid() . '.' . $extension;

move_uploaded_file($foto['tmp_name'], 'ruta/a/la/carpeta/' . $nombreArchivo);

} else {

$nombreArchivo = null;

}

$stmt = $pdo->prepare('UPDATE tabla SET nombre = :nombre, precio = :precio, foto = :foto WHERE id = :id');

$stmt->bindValue(':nombre', $nombre);

$stmt->bindValue(':precio', $precio);

$stmt->bindValue(':foto', $nombreArchivo);

$stmt->bindValue(':id', 1); // Cambiar por el ID correspondiente

$stmt->execute();

$response = array('success' => true);

echo json_encode($response);

Ten en cuenta que el código anterior solo es un ejemplo y que debes adaptarlo a tus necesidades. Además, es importante validar los datos del formulario y sanitizarlos antes de usarlos en consultas SQL para evitar ataques de inyección de código.

jose fernandez

const formData = new FormData(form); hazlo de otra forma

Claro, aquí te muestro otra forma de obtener los datos del formulario sin usar FormData:

HTML:

python

Copy code

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('#form');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

Array.from(form.elements).forEach((element) => {

if (element.name && !element.disabled) {

if (element.type === 'file') {

json[element.name] = element.files[0] || null;

} else {

json[element.name] = element.value || '';

}

});

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

En este caso, en lugar de crear un objeto FormData, se itera sobre los elementos del formulario y se crea un objeto json con los datos de cada elemento. Si el elemento es un campo de tipo file, se obtiene el primer archivo seleccionado o null si no se seleccionó ninguno.

Es importante tener en cuenta que en este método no se incluyen los campos de tipo checkbox que no están marcados, por lo que si tienes campos de ese tipo debes ajustar el código para incluirlos en el objeto json aunque no estén marcados.

jose fernandez

Array.from(form.elements).forEach((element) => { hazlo con document.getelementbyid

Claro, aquí te muestro cómo hacerlo con document.getElementById en lugar de form.elements:

HTML:

python

Copy code

<form>

</form>

JavaScript:

javascript

Copy code

const form = document.querySelector('form');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

});

En este caso, se obtienen los elementos del formulario mediante document.getElementById y se almacenan en variables separadas. Luego, en el evento submit, se crea el objeto json con los valores de cada variable.

Ten en cuenta que para este ejemplo se utiliza un formulario con elementos identificados mediante el atributo id. Si en tu caso necesitas utilizar elementos identificados mediante otros atributos, como name o class, debes ajustar el código en consecuencia.

jose fernandez

luego cargar en una tabla para ver los registros actualizados hacer con fetch api json metodo post php pdo

Claro, aquí te muestro cómo cargar los registros actualizados en una tabla utilizando fetch, API JSON, POST, PHP y PDO.

Primero, asumiremos que tienes una tabla llamada productos en tu base de datos MySQL con las siguientes columnas: id, nombre, precio, y foto.

HTML:

php

Copy code

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

JavaScript:

javascript

Copy code

function cargarTabla() {

fetch('/obtener_productos.php')

.then(response => response.json())

.then(data => {

const tablaBody = document.querySelector('#tabla tbody');

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

}

cargarTabla();

PHP (obtener_productos.php):

php

Copy code

<?php

$pdo = new PDO('mysql:host=localhost;dbname=nombre_de_tu_base_de_datos', 'usuario', 'contraseña');

$query = $pdo->query('SELECT * FROM productos');

$productos = $query->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($productos);

En este caso, se utiliza fetch para hacer una petición POST a un archivo PHP (obtener_productos.php) que se encarga de obtener los datos de la tabla productos en la base de datos y devolverlos en formato JSON. Luego, en el código JavaScript, se utiliza forEach para iterar sobre los productos obtenidos y crear una fila en la tabla HTML para cada uno.

Es importante que adaptes el código PHP a tu configuración de base de datos, incluyendo el nombre de la base de datos, el usuario y la contraseña.

Ten en cuenta que el código PHP solo hace una consulta a la base de datos y devuelve todos los registros. Si necesitas filtrar los registros o mostrar solo algunos de ellos, debes ajustar el código PHP en consecuencia.

jose fernandez

<form> en formulario cargar con el id y con datos de ejemplo

Claro, aquí te muestro un ejemplo completo con el formulario en HTML y algunos datos de ejemplo para que puedas probar el código:

HTML:

php

Copy code

</form>

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

JavaScript:

less

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

En este ejemplo, se utiliza el id del formulario para seleccionarlo con document.querySelector y se obtienen los elementos del formulario mediante document.getElementById. También se utiliza document.querySelector para seleccionar la tabla y su tbody.

Ten en cuenta que los datos de ejemplo se agregan manualmente a la tabla en la última línea de JavaScript, pero en tu caso estos datos deberán obtenerse de la base de datos a través de fetch como se muestra en la respuesta anterior.

jose fernandez

agregar al formulario <input type="hidden" id="id"

¡Claro! Puedes agregar el input de tipo hidden en el formulario de la siguiente manera:

python

Copy code

</form>

Como puedes ver, se agrega un nuevo input con el id "id" y el value vacío. Luego, puedes obtener su valor y enviarlo junto con los demás datos en la solicitud fetch.

En el código JavaScript, podrías agregar lo siguiente para incluir el valor del input de tipo hidden en el objeto JSON que se envía al servidor:

less

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const idInput = document.getElementById('id'); // Obtener el input de tipo "hidden"

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['id'] = idInput.value || ''; // Incluir el valor del input "id"

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

De esta manera, el valor del input de tipo hidden se incluirá en el objeto JSON que se envía al servidor junto con los demás datos.

jose fernandez

agregar al formulario un etiqueta img con una foto cargada de ejemplo

¡Claro! Puedes agregar una etiqueta img con una foto cargada de ejemplo de la siguiente manera:

python

Copy code

</form>

En este caso, se agrega una nueva etiqueta img con el id "foto-preview" y la imagen de ejemplo se carga en ella mediante el atributo src. También se establece un ancho de 100 píxeles para que no ocupe demasiado espacio.

Luego, puedes agregar el siguiente código JavaScript para mostrar la imagen seleccionada por el usuario en la vista previa:

javascript

Copy code

const form = document.querySelector('#formulario');

const nombreInput = document.getElementById('nombre');

const precioInput = document.getElementById('precio');

const fotoInput = document.getElementById('foto');

const idInput = document.getElementById('id');

const fotoPreview = document.getElementById('foto-preview'); // Obtener la etiqueta "img"

const tablaBody = document.querySelector('#tabla tbody');

form.addEventListener('submit', (e) => {

e.preventDefault();

const json = {};

json['id'] = idInput.value || '';

json['nombre'] = nombreInput.value || '';

json['precio'] = precioInput.value || '';

json['foto'] = fotoInput.files[0] || null;

// Mostrar la imagen seleccionada en la etiqueta "img"

if (fotoInput.files && fotoInput.files[0]) {

const reader = new FileReader();

reader.onload = (e) => {

fotoPreview.src = e.target.result;

};

reader.readAsDataURL(fotoInput.files[0]);

}

fetch('/guardar.php', {

method: 'POST',

body: JSON.stringify(json),

})

.then(response => response.json())

.then(data => {

tablaBody.innerHTML = '';

data.forEach(producto => {

const fila = document.createElement('tr');

fila.innerHTML = `

<td>${producto.id}</td>

<td>${producto.nombre}</td>

<td>${producto.precio}</td>

<td>${producto.foto}</td>

tablaBody.appendChild(fila);

});

})

.catch(error => console.error(error));

});

// Datos de ejemplo

tablaBody.innerHTML = `

<tr>

<td>Producto 1</td>

<td>imagen.jpg</td>

</tr>

<tr>

<td>Producto 2</td>

<td>imagen2.jpg</td>

</tr>

De esta manera, al seleccionar una imagen mediante el input de tipo file, se muestra en la etiqueta img de vista previa mediante el objeto FileReader.

jose fernandez

const json = {}; usar otra forma

Sí, hay otra forma de inicializar el objeto json. En lugar de declararlo de manera explícita como un objeto vacío, puedes utilizar la sintaxis de objeto literal para declarar sus propiedades y valores directamente en la misma línea de código.

Aquí te muestro un ejemplo:

csharp

Copy code

const json = {

id: idInput.value || '',

nombre: nombreInput.value || '',

precio: precioInput.value || '',

foto: fotoInput.files[0] || null,

};

En este caso, las propiedades id, nombre, precio y foto se definen en la misma línea de código. Si idInput.value, nombreInput.value y precioInput.value están vacíos o son null o undefined, se asigna una cadena vacía ('') en su lugar. Si fotoInput.files[0] no está definido (porque el usuario no ha seleccionado ninguna imagen), se asigna null.

Esta forma de inicializar el objeto puede resultar más compacta y legible, especialmente cuando hay varias propiedades a definir.

jose fernandez

const json = {}; usar otra forma javascript puro

Sí, hay varias formas de inicializar un objeto en JavaScript puro. Una de ellas es utilizando la sintaxis de objeto literal, de la siguiente manera:

javascript

Copy code

const json = {

id: document.getElementById('id').value || '',

nombre: document.getElementById('nombre').value || '',

precio: document.getElementById('precio').value || '',

foto: document.getElementById('foto').files[0] || null,

};

En este ejemplo, se utilizan los métodos document.getElementById() para obtener los elementos del formulario y sus valores. Luego, se asignan estos valores como valores de las propiedades id, nombre, precio y foto del objeto json. Si alguno de estos valores es null, undefined o una cadena vacía, se asigna una cadena vacía ('') en su lugar para evitar errores.

Otra forma de inicializar un objeto es utilizando el constructor Object, de la siguiente manera:

javascript

Copy code

const json = new Object();

json.id = document.getElementById('id').value || '';

json.nombre = document.getElementById('nombre').value || '';

json.precio = document.getElementById('precio').value || '';

json.foto = document.getElementById('foto').files[0] || null;

En este ejemplo, se crea un objeto vacío con el constructor Object, y luego se asignan sus propiedades utilizando la notación de puntos (.). También se utiliza la misma lógica para asignar los valores de las propiedades, utilizando los valores de los elementos del formulario obtenidos con document.getElementById().

jose fernandez

Mostrar la imagen seleccionada en la etiqueta "img" al hacer click boton seleccionar

Para mostrar la imagen seleccionada en la etiqueta img al hacer clic en el botón de selección de archivos, puedes agregar un evento change al elemento de entrada de tipo file y actualizar el atributo src de la etiqueta img con la URL de la imagen seleccionada.

Aquí te muestro un ejemplo:

HTML:

php

Copy code

<form>

<button type="button" id="seleccionar">Seleccionar</button>

<br>

</form>

JavaScript:

javascript

Copy code

const fotoInput = document.getElementById('foto');

const seleccionarBtn = document.getElementById('seleccionar');

const previewImg = document.getElementById('preview');

seleccionarBtn.addEventListener('click', () => {

fotoInput.click();

});

fotoInput.addEventListener('change', () => {

const archivo = fotoInput.files[0];

if (archivo) {

const url = URL.createObjectURL(archivo);

previewImg.setAttribute('src', url);

} else {

previewImg.setAttribute('src', '');

}

});

En este ejemplo, se obtienen las referencias a los elementos input, button e img mediante sus id. Luego, se agrega un evento click al botón de selección para que haga clic en el elemento input de tipo file en su lugar. Después, se agrega un evento change al elemento input para que se ejecute cuando el usuario seleccione una imagen. Dentro del evento change, se verifica si se seleccionó un archivo y, si es así, se crea una URL de objeto con URL.createObjectURL() y se establece como valor del atributo src de la etiqueta img para mostrar la vista previa de la imagen seleccionada. Si no se seleccionó un archivo, se establece el atributo src en una cadena vacía para eliminar cualquier vista previa anterior.

jose fernandez

hacer sin body: JSON.stringify(json), de otra forma

Sí, puedes enviar los datos del formulario a través de una solicitud Fetch sin utilizar JSON.stringify() para convertir el objeto JSON a una cadena JSON. En su lugar, puedes enviar un objeto FormData directamente a la solicitud Fetch.

Aquí te muestro un ejemplo:

javascript

Copy code

const form = document.getElementById('miFormulario');

form.addEventListener('submit', (event) => {

event.preventDefault();

const id = document.getElementById('id').value;

const nombre = document.getElementById('nombre').value;

const precio = document.getElementById('precio').value;

const foto = document.getElementById('foto').files[0] || null;

const formData = new FormData();

formData.append('id', id);

formData.append('nombre', nombre);

formData.append('precio', precio);

if (foto) {

formData.append('foto', foto, foto.name);

}

fetch('url_del_archivo_php_que_procesa_el_formulario.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

// Haz algo con la respuesta del servidor

})

.catch(error => console.error(error));

});

En este ejemplo, se obtienen los valores de los elementos del formulario y se agregan al objeto formData mediante el método append(). Si hay una imagen seleccionada, se agrega al objeto formData con su nombre de archivo original. Luego, se envía el objeto formData a través de una solicitud Fetch utilizando el método POST.

Ten en cuenta que, al enviar un objeto FormData, el encabezado de la solicitud se establece automáticamente en multipart/form-data, en lugar de application/json que se establece cuando se envía un objeto JSON con JSON.stringify().

jose fernandez

guardar.php haz para sin body: JSON.stringify(json)

Si deseas recibir los datos del formulario como un objeto FormData en PHP sin utilizar JSON.stringify(), puedes acceder a ellos a través del arreglo $_POST y $_FILES.

Aquí te muestro un ejemplo de cómo puedes recibir los datos del formulario en PHP:

php

Copy code

<?php

// Obtener los valores del formulario

$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_FILES['foto'];

// Validar la imagen

if ($foto['error'] === UPLOAD_ERR_OK) {

$nombreArchivo = $foto['name'];

$rutaArchivo = 'ruta/donde/guardar/'.$nombreArchivo;

move_uploaded_file($foto['tmp_name'], $rutaArchivo);

// Guardar la ruta del archivo en la base de datos

} else {

// La imagen no se pudo cargar

}

// Guardar los demás datos en la base de datos

// ...

// Devolver una respuesta al cliente

$response = array('mensaje' => 'Los datos se han guardado correctamente');

echo json_encode($response);

En este ejemplo, se obtienen los valores del formulario a través del arreglo $_POST y se valida la imagen a través del arreglo $_FILES. Si la imagen se cargó correctamente, se guarda en una ubicación específica en el servidor y se guarda la ruta del archivo en la base de datos. Luego, se pueden guardar los demás datos del formulario en la base de datos como de costumbre. Finalmente, se devuelve una respuesta al cliente como un objeto JSON.

Ten en cuenta que, al recibir los datos del formulario como un objeto FormData en PHP, los valores de los campos del formulario se pueden acceder directamente a través de la clave del arreglo asociativo correspondiente en $_POST. Los archivos subidos se acceden a través del arreglo $_FILES con el mismo nombre que el atributo name del elemento input de tipo file.

jose fernandez

guardar.php haz completo como el anterior

Claro, aquí te proporciono un ejemplo completo de guardar.php para guardar los datos del formulario en una base de datos MySQL utilizando PDO y devolver una respuesta al cliente en formato JSON:

php

Copy code

<?php

// Conectar a la base de datos

$host = 'localhost';

$dbname = 'nombre_de_la_base_de_datos';

$username = 'nombre_de_usuario';

$password = 'contraseña';

try {

$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

echo 'Error de conexión a la base de datos: ' . $e->getMessage();

}

// Obtener los valores del formulario

$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_FILES['foto'];

// Validar la imagen

if ($foto['error'] === UPLOAD_ERR_OK) {

$nombreArchivo = $foto['name'];

$rutaArchivo = 'ruta/donde/guardar/'.$nombreArchivo;

move_uploaded_file($foto['tmp_name'], $rutaArchivo);

// Guardar la ruta del archivo en la base de datos

} else {

// La imagen no se pudo cargar

}

// Actualizar los datos en la base de datos

try {

$stmt = $conn->prepare('UPDATE tabla SET nombre = :nombre, precio = :precio, foto = :foto WHERE id = :id');

$stmt->bindParam(':id', $id);

$stmt->bindParam(':nombre', $nombre);

$stmt->bindParam(':precio', $precio);

$stmt->bindParam(':foto', $rutaArchivo);

$stmt->execute();

$rowCount = $stmt->rowCount();

} catch(PDOException $e) {

echo 'Error al actualizar los datos: ' . $e->getMessage();

}

// Devolver una respuesta al cliente

if ($rowCount > 0) {

$response = array('mensaje' => 'Los datos se han actualizado correctamente');

} else {

$response = array('mensaje' => 'No se han actualizado los datos');

}

echo json_encode($response);

En este ejemplo, primero se establece una conexión a la base de datos utilizando PDO. Luego, se obtienen los valores del formulario a través del arreglo $_POST y se valida la imagen a través del arreglo $_FILES. Si la imagen se cargó correctamente, se guarda en una ubicación específica en el servidor y se guarda la ruta del archivo en la base de datos.

Después, se actualizan los datos en la base de datos utilizando una consulta preparada para evitar inyecciones SQL. Finalmente, se devuelve una respuesta al cliente como un objeto JSON indicando si se han actualizado correctamente los datos o no.

Ten en cuenta que, para adaptar este ejemplo a tu caso particular, debes cambiar los valores de las variables $host, $dbname, $username y $password por los correspondientes a tu servidor de base de datos MySQL. Además, debes cambiar la consulta SQL para que se adapte a la estructura de tu tabla y a los campos que deseas actualizar.

jose fernandez

dentro de script Fetch agregar una alerta de no ingresar imagen vacia

Por supuesto, para agregar una alerta que informe al usuario que no ha seleccionado una imagen, puedes hacer lo siguiente dentro del bloque submitHandler del script:

javascript

Copy code

submitHandler: function (form) {

const formData = new FormData(form);

if (!formData.get('foto')) {

alert('Debe seleccionar una imagen');

return;

}

fetch('guardar.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

// Código para actualizar la tabla

})

.catch(error => console.error(error));

}

En este ejemplo, se utiliza el método FormData.get para obtener el valor del campo de la imagen. Si el valor es null, significa que el usuario no ha seleccionado una imagen y se muestra una alerta informando al usuario. De lo contrario, se procede a enviar los datos al servidor y actualizar la tabla.

jose fernandez

hacerlo const foto = document.getElementById('foto').files[0] al script Fetch agregar una alerta de no ingresar imagen vacia

Claro, para validar si el usuario ha seleccionado una imagen antes de enviar los datos al servidor, puedes utilizar el siguiente código dentro del bloque submitHandler del script:

javascript

Copy code

submitHandler: function (form) {

const foto = document.getElementById('foto').files[0];

if (!foto) {

alert('Debe seleccionar una imagen');

return;

}

const formData = new FormData(form);

fetch('guardar.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

// Código para actualizar la tabla

})

.catch(error => console.error(error));

}

En este ejemplo, se utiliza el método getElementById para obtener el campo de la imagen y luego se utiliza la propiedad files para obtener el archivo seleccionado por el usuario. Si la variable foto es undefined o null, significa que el usuario no ha seleccionado una imagen y se muestra una alerta informando al usuario. De lo contrario, se procede a enviar los datos al servidor y actualizar la tabla.

jose fernandez

como limpiar las etiquetas html despues de actualizar con javascript

Para limpiar los campos de un formulario después de actualizar los datos con JavaScript, puedes utilizar el siguiente código:

javascript

Copy code

// Obtener referencia al formulario

const form = document.getElementById('miFormulario');

// Resetear el formulario

form.reset();

// Limpiar la imagen seleccionada

const imagen = document.getElementById('imagenPrevia');

imagen.src = '';

En este ejemplo, se utiliza el método reset() del formulario para limpiar los campos de entrada y selección. Además, se establece la propiedad src de la etiqueta img que muestra la imagen previa a una cadena vacía para eliminar la imagen seleccionada.

Puedes llamar a este código después de que se complete la actualización de la tabla en el bloque then de la promesa de la siguiente manera:

javascript

Copy code

.then(data => {

console.log(data);

// Código para actualizar la tabla

form.reset();

const imagen = document.getElementById('imagenPrevia');

imagen.src = '';

})

Este código limpiará los campos y la imagen previa después de que se complete la actualización de la tabla.

jose fernandez

agergar a los campos del formulario datos precargados con php mysql pdo select where id 9

Para precargar datos de un registro existente en un formulario, primero debes recuperar los datos del registro de la base de datos utilizando una consulta SQL SELECT con una cláusula WHERE para buscar el registro con el ID deseado. Luego, puedes utilizar los valores de los campos recuperados para asignarlos a los campos del formulario. Aquí te muestro un ejemplo:

php

Copy code

<?php

// Obtener el ID del registro deseado (por ejemplo, el ID 9)

$id = 9;

// Realizar la consulta SQL para recuperar los datos del registro con el ID deseado

$sql = "SELECT nombre, precio, foto FROM tabla WHERE id = :id";

$stmt = $pdo->prepare($sql);

$stmt->execute([':id' => $id]);

$registro = $stmt->fetch(PDO::FETCH_ASSOC);

// Asignar los valores de los campos del registro a las variables correspondientes

$nombre = $registro['nombre'];

$precio = $registro['precio'];

$foto = $registro['foto'];

<div>

<label for="nombre">Nombre:</label>

</div>

<div>

<label for="precio">Precio:</label>

</div>

<div>

<?php if ($foto): ?>

<img id="imagenPrevia" src="<?php echo $foto; ?>" alt="Imagen previa">

<?php endif; ?>

</div>

<button type="submit">Guardar</button>

</form>

En este ejemplo, primero se realiza una consulta SQL para recuperar los datos del registro con el ID 9. Luego, se asignan los valores de los campos recuperados a las variables correspondientes ($nombre, $precio y $foto). Finalmente, se agrega el código HTML para el formulario con los campos precargados. Nota que se utiliza la etiqueta <?php ?> para imprimir los valores de las variables dentro del código HTML.

Con este código, los campos del formulario estarán precargados con los valores del registro con el ID 9.

jose fernandez

agregar al <img la carpeta uploads

Para agregar la carpeta uploads a la ruta de la imagen en la etiqueta img, simplemente debes concatenar el nombre de la carpeta con el valor de la columna foto de la base de datos. Aquí te muestro cómo modificar el código del ejemplo anterior para hacer esto:

php

Copy code

<?php

// Obtener el ID del registro deseado (por ejemplo, el ID 9)

$id = 9;

// Realizar la consulta SQL para recuperar los datos del registro con el ID deseado

$sql = "SELECT nombre, precio, foto FROM tabla WHERE id = :id";

$stmt = $pdo->prepare($sql);

$stmt->execute([':id' => $id]);

$registro = $stmt->fetch(PDO::FETCH_ASSOC);

// Asignar los valores de los campos del registro a las variables correspondientes

$nombre = $registro['nombre'];

$precio = $registro['precio'];

$foto = $registro['foto'];

$imagen_path = 'uploads/' . $foto; // concatenar la carpeta "uploads" al nombre de la imagen

<div>

<label for="nombre">Nombre:</label>

</div>

<div>

<label for="precio">Precio:</label>

</div>

<div>

<?php if ($foto): ?>

<img id="imagenPrevia" src="<?php echo $imagen_path; ?>" alt="Imagen previa">

<?php endif; ?>

</div>

<button type="submit">Guardar</button>

</form>

En este ejemplo, se crea una variable $imagen_path que concatena la carpeta uploads con el valor de la columna foto del registro recuperado. Luego, se utiliza esta variable en la etiqueta img para especificar la ruta de la imagen.

jose fernandez

fetch con body: JSON.stringify(json) otra forma facil par pasar al post

En lugar de usar JSON.stringify para convertir el objeto JSON a una cadena JSON, puedes simplemente pasar el objeto JSON directamente al cuerpo de la solicitud fetch usando la sintaxis de objeto literal. Aquí te muestro un ejemplo:

javascript

Copy code

const form = document.getElementById('miFormulario');

form.addEventListener('submit', (event) => {

event.preventDefault();

const id = document.getElementById('id').value;

const nombre = document.getElementById('nombre').value;

const precio = document.getElementById('precio').value;

const foto = document.getElementById('foto').files[0];

const formData = new FormData();

formData.append('id', id);

formData.append('nombre', nombre);

formData.append('precio', precio);

formData.append('foto', foto);

fetch('guardar.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

alert('Registro actualizado');

limpiarFormulario();

})

.catch(error => {

console.error(error);

alert('Error al actualizar el registro');

});

function limpiarFormulario() {

document.getElementById('miFormulario').reset();

document.getElementById('imagenPrevia').src = '';

}

En este ejemplo, en lugar de crear un objeto JSON (json) y luego convertirlo a una cadena JSON con JSON.stringify, creamos un objeto FormData (formData) y agregamos los campos del formulario a él utilizando el método append(). Luego, pasamos directamente el objeto formData al cuerpo de la solicitud fetch.

jose fernandez

con JSON.stringify, facil

Claro, para usar JSON.stringify en lugar de FormData, simplemente cambia el tipo de datos del cuerpo de la solicitud a application/json, y luego convierte el objeto a una cadena JSON utilizando JSON.stringify. Aquí te muestro un ejemplo:

javascript

Copy code

const form = document.getElementById('miFormulario');

form.addEventListener('submit', (event) => {

event.preventDefault();

const id = document.getElementById('id').value;

const nombre = document.getElementById('nombre').value;

const precio = document.getElementById('precio').value;

const foto = document.getElementById('foto').files[0];

const data = {

id: id,

nombre: nombre,

precio: precio,

foto: foto

};

fetch('guardar.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(data)

})

.then(response => response.json())

.then(data => {

console.log(data);

alert('Registro actualizado');

limpiarFormulario();

})

.catch(error => {

console.error(error);

alert('Error al actualizar el registro');

});

function limpiarFormulario() {

document.getElementById('miFormulario').reset();

document.getElementById('imagenPrevia').src = '';

}

En este ejemplo, creamos un objeto data con las mismas propiedades que el objeto formData en el ejemplo anterior. Luego, cambiamos el tipo de datos del cuerpo de la solicitud a application/json y usamos JSON.stringify para convertir el objeto data a una cadena JSON.

jose fernandez

aplicar el decode para guardar.php

Para decodificar los datos JSON recibidos en guardar.php, puedes utilizar la función json_decode(). Aquí te muestro un ejemplo:

php

Copy code

<?php

// Obtener los datos enviados por la solicitud POST

$data = json_decode(file_get_contents("php://input"));

// Extraer los valores de los campos del formulario

$id = $data->id;

$nombre = $data->nombre;

$precio = $data->precio;

// Si se ha subido una nueva imagen, guardarla en el servidor

if (!empty($data->foto)) {

$rutaImagen = "uploads/" . basename($data->foto->name);

move_uploaded_file($data->foto->tmp_name, $rutaImagen);

} else {

// Si no se ha subido una nueva imagen, mantener la imagen actual

$rutaImagen = $data->rutaImagen;

}

// Actualizar los datos del registro en la base de datos

// ...

// Devolver una respuesta JSON al cliente

echo json_encode(['mensaje' => 'Registro actualizado']);

En este ejemplo, utilizamos json_decode() para decodificar los datos JSON enviados en la solicitud POST. Luego, extraemos los valores de los campos del formulario como lo hicimos en el ejemplo anterior.

Si se ha subido una nueva imagen, la guardamos en el servidor utilizando move_uploaded_file(), como en el ejemplo anterior. Si no se ha subido una nueva imagen, utilizamos el valor rutaImagen enviado desde el cliente para mantener la imagen actual.

Finalmente, actualizamos los datos del registro en la base de datos y devolvemos una respuesta JSON al cliente utilizando json_encode().

jose fernandez

document.getElementById('nombre') document.getElementById('precio') al script al insertar vacio agregar alertas

Para agregar alertas al script cuando se insertan campos vacíos en el formulario, puedes agregar una verificación de los valores de los campos nombre y precio antes de enviar la solicitud POST utilizando fetch.

Aquí te muestro un ejemplo de cómo hacerlo:

javascript

Copy code

const form = document.getElementById('formulario');

form.addEventListener('submit', (event) => {

event.preventDefault();

const nombre = document.getElementById('nombre').value.trim();

const precio = document.getElementById('precio').value.trim();

const foto = document.getElementById('foto').files[0];

const id = document.getElementById('id').value;

// Verificar si se ha ingresado un nombre y un precio

if (!nombre || !precio) {

alert('Por favor, ingrese un nombre y un precio para el producto.');

return;

}

const formData = new FormData();

formData.append('nombre', nombre);

formData.append('precio', precio);

formData.append('foto', foto);

formData.append('id', id);

fetch('guardar.php', {

method: 'POST',

body: formData

})

.then(response => response.json())

.then(data => {

console.log(data);

alert(data.mensaje);

// Limpiar los campos del formulario

form.reset();

document.getElementById('imagen-producto').setAttribute('src', '');

})

.catch(error => console.error(error));

});

En este ejemplo, agregamos una verificación después de obtener los valores de los campos nombre y precio. Si alguno de estos campos está vacío, se muestra una alerta al usuario y la función se detiene con la instrucción return.

De esta manera, si el usuario intenta enviar un formulario sin ingresar un nombre o un precio para el producto, se le informará de manera clara que debe completar ambos campos.

jose fernandez

hacer if (!nombre || !precio) {

El código para verificar si los campos de nombre y precio están vacíos sería el siguiente:

javascript

Copy code

const nombre = document.getElementById('nombre').value.trim();

const precio = document.getElementById('precio').value.trim();

if (!nombre || !precio) {

alert('Por favor, ingrese un nombre y un precio para el producto.');

return;

}

Aquí estamos utilizando la función trim() para eliminar los espacios en blanco antes y después del valor ingresado en los campos nombre y precio. Luego, verificamos si alguno de los valores está vacío utilizando la condición !nombre || !precio.

Si esta condición es verdadera, significa que alguno de los campos está vacío, por lo que mostramos una alerta al usuario y detenemos la ejecución del script con la instrucción return.

jose fernandez

if (!nombre || !precio) { hacer separado

Si deseas hacer el código separado, puedes hacer lo siguiente:

javascript

Copy code

const nombre = document.getElementById('nombre').value.trim();

const precio = document.getElementById('precio').value.trim();

if (!nombre) {

alert('Por favor, ingrese un nombre para el producto.');

return;

}

if (!precio) {

alert('Por favor, ingrese un precio para el producto.');

return;

}

Aquí, estamos realizando dos verificaciones separadas para cada campo. Si el campo nombre está vacío, mostramos una alerta y detenemos la ejecución del script con la instrucción return. Lo mismo ocurre con el campo precio.

De esta manera, el usuario recibirá una alerta específica para cada campo que esté vacío, en lugar de una alerta genérica para ambos campos.

miscodesdelchatgpt.blogspot.com

UPDATE FOTOS CON ALERTA JS Y CSS FETCH API JSON PHP MYSQL document.getElementById

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE