Envío de formularios en JavaScript

Ya sabes cómo trabajar con elementos de formulario en JavaScript, procesándolos en el navegador. Sin embargo, los formularios también se pueden enviar al servidor para que los procese la parte del servidor del sitio, escrita en PHP o NodeJS.

Esto es necesario para agregar y cambiar los datos del sitio almacenados en el servidor.

Veamos cómo se hace. Supongamos que tenemos varios inputs y un botón:

<input>
<input>
<input type="submit">

Envolvamos nuestros elementos en la etiqueta form. En este caso, obtendremos un formulario que al hacer clic en el botón se enviará al servidor:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Para que el servidor pueda obtener los datos del formulario, es necesario dar a cada input su propio nombre:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

En este caso, los datos del formulario llegarán al servidor en forma de pares clave-valor, donde las claves serán los nombres de los elementos del formulario y los valores serán los datos ingresados.

Para enviar el formulario, no es necesario un servidor. Puedes copiar el código proporcionado del formulario en cualquier archivo, abrirlo en el navegador y hacer clic en el botón de envío: el formulario se enviará y la página del navegador se recargará.

Sin un servidor, sin embargo, los datos del formulario no llegarán a ninguna parte. Por lo tanto, vamos a probar el funcionamiento del formulario junto con un servidor. Todavía no conoces ningún lenguaje de servidor, así que practiquemos enviando el formulario usando nuestro servidor HTTP educativo.

Coloquemos nuestro formulario en un archivo de modo que esté disponible en la dirección http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Agreguemos a nuestro formulario el atributo action, que indica la dirección de envío de nuestro formulario:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Ahora en el archivo server.js escribamos un manejador para la dirección de envío del formulario:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Al parámetro de nuestro manejador llegarán los datos del formulario enviados:

export default {
	'/handler/': function(data) {
		console.log(data); // se mostrará en la consola del servidor
		return 'form data received';
	}
}

Crea un formulario y un archivo para su procesamiento. Envía el formulario y verifica que los datos realmente llegaron al servidor.