Capturar o Envio

O formulário de agendamento coleta dados e exibe uma prévia. Agora precisamos lidar com o que acontece quando os usuários clicam em "Solicitar Agendamento." Nesta lição, você vai interceptar o evento de envio e processar os dados do formulário.

O Que Você Vai Aprender

Lidar com eventos de envio de formulário
Impedir o comportamento padrão do navegador
Exibir confirmação após o envio
Rastrear o estado de envio

O Problema: Comportamento Padrão

Por padrão, quando um formulário é enviado, o navegador realiza um recarregamento completo da página e envia os dados do formulário ao servidor. No nosso caso, não queremos isso.

Queremos:

Impedir o recarregamento da página
Processar os dados nós mesmos
Exibir uma mensagem de confirmação

Adicionar o Manipulador de Envio

Adicione uma variável de estado submitted e uma função manipuladora de envio:

<!-- 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>

Entendendo o Manipulador de Envio

A função handleSubmit é chamada quando o formulário é enviado. Veja o que cada parte faz:

O Parâmetro de Evento: O parâmetro event é um objeto SubmitEvent que o navegador passa automaticamente para o manipulador. Ele contém informações sobre o envio do formulário, incluindo qual formulário foi enviado e como (clique no botão ou tecla Enter).

Impedindo o Comportamento Padrão: O método event.preventDefault() interrompe o envio padrão do formulário pelo navegador. Sem isso, o navegador:

Coletaria os dados do formulário
Enviaria uma requisição HTTP POST para a URL atual
Recarregaria a página inteira
Perderia todo o estado do lado do cliente

Ao chamar preventDefault(), assumimos o controle total e tratamos tudo em JavaScript.

Log para Depuração: O comando console.log() é útil durante o desenvolvimento. Ele permite verificar que:

O manipulador está sendo chamado
As variáveis de estado contêm os valores esperados
A estrutura dos dados está correta

Abra as Ferramentas de Desenvolvedor do seu navegador (F12 ou Cmd+Option+I) para ver a saída registrada.

O Svelte oferece formas melhores para depuração e vamos abordar isso mais adiante, mas console.log é simples e eficaz por ora.

Definindo o Estado de Envio: Após impedir o comportamento padrão e registrar os dados, definimos submitted = true. Esse sinalizador booleano faz com que a interface alterne da visualização do formulário para a visualização de confirmação. Como submitted é declarado com $state(), alterá-lo atualiza automaticamente qualquer parte do template que o referencia.

Conectar o Manipulador ao Formulário

Adicione o manipulador onsubmit ao elemento de formulário:

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

Agora, clicar em "Solicitar Agendamento" (ou pressionar Enter em um campo) irá:

Impedir o recarregamento da página
Registrar os dados do agendamento no console
Definir submitted como true

Exibir Confirmação

A prática comum após enviar qualquer formulário é exibir uma mensagem de confirmação, enviar notificações por e-mail ou redirecionar o usuário. No nosso formulário, renderizamos um bloco de confirmação após o envio bem-sucedido.

Para isso, primeiro precisamos renderizar condicionalmente o formulário ou a mensagem de confirmação com base no estado submitted. Usaremos um bloco {#if} e {:else}. Com isso, podemos exibir conteúdos diferentes dependendo se o formulário foi enviado ou não.

<!-- 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>

O que acontece aqui:

Quando o usuário clica em "Enviar", a função handleSubmit é executada e define submitted como true. Isso faz com que o Svelte reavalie o bloco {#if}:

Se submitted for true, a mensagem de confirmação é exibida, mostrando o nome do usuário, a data e o horário selecionados, e o e-mail.
Se submitted for false, o bloco {:else} renderiza o formulário de agendamento e a prévia ao vivo como antes.

O Componente Completo

Aqui está o BookingForm.svelte completo com o tratamento de envio:

<!-- 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>

Observe que também adicionamos required aos campos essenciais. O navegador os validará antes de permitir o envio.

Testar o Fluxo

Visite a página de um serviço
Preencha todos os campos obrigatórios
Clique em "Solicitar Agendamento"
Veja a mensagem de confirmação com seus dados
Verifique o console do navegador — seus dados de agendamento estão registrados

O Que Ainda Não Está Acontecendo

Isso é apenas do lado do cliente. O agendamento:

Não é salvo em um banco de dados
Não envia um e-mail
Desaparece se você recarregar a página

A persistência real requer tratamento do lado do servidor, que abordaremos no Módulo 12: Formulários & Actions. Por ora, estamos focados na experiência do lado do cliente.

Erros Comuns

Esquecer o `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;
}

Sem preventDefault(), o navegador assume o controle e recarrega a página.

Usar `onclick` em um Botão de Envio

<!-- ❌ 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>

Sempre trate o submit no elemento <form>, não o click no botão. Isso garante que envios pelo teclado (pressionar Enter) também funcionem.

Resumo

O formulário de agendamento agora trata os envios. Ele impede o recarregamento padrão da página, processa os dados do formulário e exibe uma mensagem de confirmação. Os dados ainda não são persistidos, mas o fluxo do lado do cliente está completo.

Principais conclusões:

Use onsubmit no formulário, não onclick no botão
Chame event.preventDefault() para interromper o comportamento padrão do navegador
Use estado para alternar entre as visualizações do formulário e de confirmação

Próximos Passos

Os usuários podem enviar uma vez, mas e se quiserem agendar outro serviço? Continue com Redefinir Formulário Após o "Envio" para adicionar um recurso de "Agendar Outro".