Capturar el Envío

El formulario de reserva recopila datos y muestra una vista previa. Ahora necesitamos manejar lo que sucede cuando los usuarios hacen clic en "Solicitar Reserva." En esta lección, interceptarás el evento de envío y procesarás los datos del formulario.

Lo Que Aprenderás

Manejar eventos de envío de formularios
Prevenir el comportamiento predeterminado del navegador
Mostrar confirmación después del envío
Rastrear el estado del envío

El Problema: Comportamiento Predeterminado

Por defecto, cuando se envía un formulario, el navegador realiza una recarga completa de la página y envía los datos del formulario al servidor. En nuestro caso, no queremos eso.

Queremos:

Prevenir la recarga de la página
Procesar los datos nosotros mismos
Mostrar un mensaje de confirmación

Agregar el Manejador de Envío

Agrega una variable de estado submitted y una función manejadora de envío:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	// ... existing code  ..

	let submitted = $state(false)

	// Add Format date and time functions...

	/**
	 * @param {{ preventDefault: () => void; }} event
	 */
	function handleSubmit(event) {
		event.preventDefault()

		// For now, just log the data and show confirmation
		console.log('Booking submitted:', {
			customerName,
			email,
			date,
			time,
			notes
		})

		submitted = true
	}
</script>

Entendiendo el Manejador de Envío

La función handleSubmit se llama cuando se envía el formulario. Esto es lo que hace cada parte:

El Parámetro de Evento: El parámetro event es un objeto SubmitEvent que el navegador pasa automáticamente al manejador. Contiene información sobre el envío del formulario, incluyendo qué formulario fue enviado y cómo (clic en el botón o tecla Enter).

Prevenir el Comportamiento Predeterminado: El método event.preventDefault() detiene el envío de formulario predeterminado del navegador. Sin esto, el navegador:

Recopilaría los datos del formulario
Enviaría una solicitud HTTP POST a la URL actual
Recargaría toda la página
Perdería todo el estado del lado del cliente

Al llamar a preventDefault(), tomamos control total y manejamos todo en JavaScript.

Registro para Depuración: La instrucción console.log() es útil durante el desarrollo. Te permite verificar que:

El manejador está siendo llamado
Las variables de estado contienen los valores esperados
La estructura de datos es correcta

Abre las Herramientas de Desarrollador de tu navegador (F12 o Cmd+Option+I) para ver la salida registrada.

Svelte ofrece mejores formas de depurar y las cubriremos más adelante, pero console.log es simple y efectivo por ahora.

Establecer el Estado de Envío: Después de prevenir el comportamiento predeterminado y registrar los datos, establecemos submitted = true. Este indicador booleano hace que la interfaz cambie de la vista del formulario a la vista de confirmación. Debido a que submitted se declara con $state(), cambiarlo actualiza automáticamente cualquier parte de la plantilla que lo referencie.

Conectar el Manejador al Formulario

Agrega el manejador onsubmit al elemento del formulario:

<form onsubmit={handleSubmit}>
	<!-- ... form fields ... -->
</form>

Ahora hacer clic en "Solicitar Reserva" (o presionar Enter en un campo) hará lo siguiente:

Prevenir la recarga de la página
Registrar los datos de reserva en la consola
Establecer submitted en true

Mostrar Confirmación

La práctica común después de enviar cualquier formulario es mostrar un mensaje de confirmación, enviar notificaciones por correo electrónico o redirigir al usuario. En nuestro formulario renderizamos un bloque de confirmación al enviarse exitosamente.

Para hacer esto, primero, necesitamos renderizar condicionalmente el formulario o el mensaje de confirmación según el estado submitted. Usaremos un bloque {#if} y {:else}. Con esto, podemos mostrar contenido diferente dependiendo de si el formulario ha sido enviado.

<!-- filename: src/lib/components/BookingForm.svelte -->

<script>
  // ... existing code  ..
</script>

<div class="booking-container">
	<!-- add if - else -->
	{#if submitted}
		<div class="confirmation">
			<h2>Booking Requested!</h2>
			<p>Thank you, {customerName}. We've received your booking request.</p>

			<dl>
				<dt>Service Date</dt>
				<dd>{formatDate(date)} at {formatTime(time)}</dd>

				<dt>Confirmation Email</dt>
				<dd>We'll send details to {email}</dd>
			</dl>

			<p>We'll contact you within 24 hours to confirm your appointment.</p>
		</div>
	{:else}
		<form onsubmit={handleSubmit}>
			<!-- ... form fields ... -->
		</form>

		<aside class="preview">
			<!-- ... preview content ... -->
		</aside>
	{/if}
</div>

Lo que ocurre aquí:

Cuando el usuario hace clic en "Enviar", la función handleSubmit se ejecuta y establece submitted en true. Esto hace que Svelte reevalúe el bloque {#if}:

Si submitted es true, se muestra el mensaje de confirmación con el nombre del usuario, la fecha y hora seleccionadas, y el correo electrónico.
Si submitted es false, el bloque {:else} renderiza el formulario de reserva y la vista previa en vivo como antes.

El Componente Completo

Aquí está el BookingForm.svelte completo con el manejo del envío:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')

	let submitted = $state(false)

	function formatDate(dateString) {
		if (!dateString) return 'Not selected'
		const dateObj = new Date(dateString + 'T00:00:00')
		return dateObj.toLocaleDateString('en-US', {
			weekday: 'long',
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		})
	}

	function formatTime(timeString) {
		if (!timeString) return 'Not selected'
		const [hours, minutes] = timeString.split(':')
		const hour = parseInt(hours)
		const ampm = hour >= 12 ? 'PM' : 'AM'
		const displayHour = hour % 12 || 12
		return `${displayHour}:${minutes} ${ampm}`
	}

	function handleSubmit(event) {
		event.preventDefault()

		console.log('Booking submitted:', {
			customerName,
			email,
			date,
			time,
			notes
		})

		submitted = true
	}
</script>

<div class="booking-container">
	{#if submitted}
		<div class="confirmation">
			<h2>Booking Requested!</h2>
			<p>Thank you, {customerName}. We've received your booking request.</p>

			<dl>
				<dt>Service Date</dt>
				<dd>{formatDate(date)} at {formatTime(time)}</dd>

				<dt>Confirmation Email</dt>
				<dd>We'll send details to {email}</dd>
			</dl>

			<p>We'll contact you within 24 hours to confirm your appointment.</p>
		</div>
	{:else}
		<form onsubmit={handleSubmit}>
			<h2>Book a Service</h2>

			<div class="field">
				<label for="name">Your Name</label>
				<input
					type="text"
					id="name"
					name="name"
					placeholder="Jane Smith"
					bind:value={customerName}
					required
				/>
			</div>

			<div class="field">
				<label for="email">Email Address</label>
				<input
					type="email"
					id="email"
					name="email"
					placeholder="jane@example.com"
					bind:value={email}
					required
				/>
			</div>

			<div class="field">
				<label for="date">Preferred Date</label>
				<input type="date" id="date" name="date" bind:value={date} required />
			</div>

			<div class="field">
				<label for="time">Preferred Time</label>
				<select id="time" name="time" bind:value={time} required>
					<option value="">Select a time...</option>
					<option value="09:00">9:00 AM</option>
					<option value="10:00">10:00 AM</option>
					<option value="11:00">11:00 AM</option>
					<option value="13:00">1:00 PM</option>
					<option value="14:00">2:00 PM</option>
					<option value="15:00">3:00 PM</option>
				</select>
			</div>

			<div class="field">
				<label for="notes">Additional Notes</label>
				<textarea
					id="notes"
					name="notes"
					rows="3"
					placeholder="Any special requests?"
					bind:value={notes}
				></textarea>
			</div>

			<button type="submit">Request Booking</button>
		</form>

		<aside class="preview">
			<h3>Booking Preview</h3>

			<dl>
				<dt>Name</dt>
				<dd>{customerName || 'Not entered'}</dd>

				<dt>Email</dt>
				<dd>{email || 'Not entered'}</dd>

				<dt>Date</dt>
				<dd>{formatDate(date)}</dd>

				<dt>Time</dt>
				<dd>{formatTime(time)}</dd>

				<dt>Notes</dt>
				<dd>{notes || 'None'}</dd>
			</dl>
		</aside>
	{/if}
</div>

Observa que también agregamos required a los campos esenciales. El navegador los validará antes de permitir el envío.

Probar el Flujo

Visita una página de servicio
Completa todos los campos requeridos
Haz clic en "Solicitar Reserva"
Observa el mensaje de confirmación con tus datos
Revisa la consola del navegador — los datos de tu reserva están registrados

Lo Que Aún No Está Sucediendo

Esto es solo del lado del cliente. La reserva:

No se guarda en una base de datos
No envía un correo electrónico
Desaparece si recargas la página

La persistencia real requiere manejo del lado del servidor, que cubriremos en el Módulo 12: Formularios y Acciones. Por ahora, nos enfocamos en la experiencia del lado del cliente.

Errores Comunes

Olvidar `event.preventDefault()`

<!-- ❌ Page will refresh -->
function handleSubmit(event) {
  console.log('Submitted!');
  submitted = true;
}

<!-- ✅ Prevents refresh -->
function handleSubmit(event) {
  event.preventDefault();
  console.log('Submitted!');
  submitted = true;
}

Sin preventDefault(), el navegador toma el control y recarga la página.

Usar `onclick` en un Botón de Envío

<!-- ❌ Doesn't capture Enter key submissions -->
<button type="submit" onclick={handleSubmit}>Submit</button>

<!-- ✅ Captures all form submissions -->
<form onsubmit={handleSubmit}>
	<button type="submit">Submit</button>
</form>

Siempre maneja submit en el elemento <form>, no click en el botón. Esto garantiza que los envíos por teclado (presionar Enter) también funcionen.

Resumen

El formulario de reserva ahora maneja los envíos. Previene la recarga predeterminada de la página, procesa los datos del formulario y muestra un mensaje de confirmación. Los datos aún no se persisten, pero el flujo del lado del cliente está completo.

Puntos clave:

Usa onsubmit en el formulario, no onclick en el botón
Llama a event.preventDefault() para detener el comportamiento predeterminado del navegador
Usa estado para alternar entre las vistas del formulario y de confirmación

Próximos Pasos

Los usuarios pueden enviar una vez, pero ¿qué pasa si quieren reservar otro servicio? Continúa con Restablecer Formulario Después del "Envío" para agregar una función "Reservar Otro".