Formulario: submit con fetch
Solución
<body>
<form id="misDatos">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" required>
<button type="submit">Enviar</button>
</form>
<div id="msj"></div>
</body>
<script>
let form = document.getElementById('misDatos');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('./apps/form-fetch/getdata.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(result => {
let msj = document.getElementById('msj');
msj.innerHTML = result.mensaje;
})
.catch(error => {
console.error('Error:', error);
alert('Ocurrió un error al enviar los datos');
});
});
</script>
Explicación
El script es muy sencillo de usa. en el ejemplo se emplea un formulario muy simple para que el funcionamiento sea sencilo de ever. Por supuesto puedes usar cualquier formulario
Como ves en el codigo HTML, el elemento form no lleva el habitual action: el formulario se enviará al pulsar el botón de enio (submit) a través del evento que le asignaremos con javascript.
El formulario lleva un atributo id para identificarlo en el script que lo va a procesar.
Y al final hay un bloque div para mostrar el mensaje devuelto por el archivo php que gestiona los datos.
Y ahora viene el trabajo de la sala de máquinas. Como ves lo primero que se hace es asignar el evento submit una función para gesionar el evento. La función se define en la misma sentencia.
Lo primero que hace esta función es cancelar la respuesta por defecto al evento event.preventDefault de esa manera será la función la que se encargue de toda la gestión del evento submit. Ya evitamos que recargue la página.
Ahora se crea un objeto formulario con las datos del formulario de la página. Es la constante formData, contiene lo que se va a enviar a fetch. Se podría convertir a JSON, pero por simplicidad se va a enviar como POST.
Ahora viene la llamada al destinatario de los datos un scrippt php en este caso. Eso lo hacemos con fetch(url, options): el primer argumento, url, es la direción del programa php que va recibir los datos del formulario (en este caso getdata.php). El segundo argumento, options, es un objeto con datos necesarioas para fetch, en esta caso basta con el método de envío y los datos propiamente dichos, que van en el objeto formData.
Fetch es una promise, hace una llamada asíncrona al archivo php y no espera. Cuando el archivo responda entonces actúa y hace lo que le digamos mediante .then: el primer then recibe la respuesta de getdata.php en forma de otra promise, cuyo .then lee el mensaje de vuelta.
Por último hemos usado el tradicional catch para capturar los posibles errores que se produzcan en el proceso.
Por supuesto en este script puedes hacer más cosas como validar los datos del formulario, modificarlos, añadir más campos al formulario ... Pero el objtivo del ejemplo es un esquema básico para enviar datos a un archivo php.
Y para terminar el archivo getdata.php: pues es tan simple como :
$mensaje = "Has dicho que eres ".$_POST['nombre'] ";
$mensaje .= "y tienes ".$_POST['edad']. "años";
echo json_encode(['mensaje' => $mensaje]);