Reset Form State in Svelte 5 | Build BookIt

Let Users Book Again

After submitting a booking, users often want to make another one — for a different date, service, or person. Without a reset mechanism, the only option is refreshing the page.

Let’s add a proper reset flow so users can book multiple services in one session.

What You’ll Learn

How to reset multiple $state variables
How to return the UI to its initial view
How to create a complete form lifecycle

Add the “Book Another” Button

In the confirmation section, add a button that lets users start over:

<!-- filename: src/lib/components/BookingForm.svelte -->
{#if submitted}
  <div class="confirmation">
    <h2>✓ Booking Requested!</h2>
    <p>Thank you, {customerName}. We've received your booking request.</p>
    <p>We'll send confirmation details to {email}.</p>
    
    <button onclick={resetForm}>Book Another Service</button>
  </div>
{:else}
  <!-- ... form ... -->
{/if}

When clicked, it calls resetForm to clear everything and show the form again.

Create the Reset Function

The reset function sets each state variable back to its initial value:

<!-- 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 handleSubmit(event) {
    event.preventDefault();
    console.log('Booking submitted:', { customerName, email, date, time, notes });
    submitted = true;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</script>

Each assignment clears a field. Setting submitted = false switches back to the form view.

Test the Full Cycle

Fill out the booking form
Click “Request Booking”
See the confirmation message
Click “Book Another Service”
Form reappears, empty and ready

The cycle can repeat indefinitely without page refreshes.

Why This Works

Svelte’s reactivity system tracks changes to $state variables. When we assign new values, Svelte automatically updates the DOM. By resetting all variables to their initial values, the UI returns to its starting state.

This manual approach is straightforward and works well for forms with a handful of fields. For this stage of learning, it’s exactly what we need.

Note: As forms grow larger, there are alternative patterns like grouping fields into an object for easier resets. We’ll explore those techniques in more advanced lessons.

The Complete Component

Here’s the final BookingForm.svelte with the full lifecycle:

<!-- 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;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</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>
      
      <button onclick={resetForm}>Book Another Service</button>
    </div>
  {:else}
    <form onsubmit={handleSubmit}>
      <h2>Book a Service</h2>
      
      <div class="field">
        <label for="name">Your Name</label>
        <input 
          type="text" 
          id="name" 
          placeholder="Jane Smith"
          bind:value={customerName}
          required 
        />
      </div>
      
      <div class="field">
        <label for="email">Email Address</label>
        <input 
          type="email" 
          id="email" 
          placeholder="jane@example.com"
          bind:value={email}
          required 
        />
      </div>
      
      <div class="field">
        <label for="date">Preferred Date</label>
        <input type="date" id="date" bind:value={date} required />
      </div>
      
      <div class="field">
        <label for="time">Preferred Time</label>
        <select id="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" 
          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>

Common Mistakes

Forgetting to Reset `submitted`

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  // ❌ Forgot submitted — still shows confirmation!
}

Always reset the state that controls which view is shown:

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  submitted = false;  // ✅ Now the form appears again
}

Summary

The booking form now has a complete lifecycle: fill → submit → confirm → reset. Users can make multiple bookings without page refreshes, and all state cleanly resets to initial values.

Key takeaways:

Reset functions set each state variable back to its initial value
Don’t forget UI control state like submitted
Manual reset works well for simple forms

Module Complete! 🎉

You’ve finished Module 4: Reactivity Basics. BookIt’s booking form now:

Tracks all field values with $state
Shows a live preview as users type
Handles form submission
Displays confirmation with booking details
Resets for additional bookings

What you’ve learned:

Why $state is needed for reactive updates
Two-way binding with bind:value
Event handling with onsubmit and onclick
Managing UI state for different views

Next Steps

The booking form works, but the services page just shows a plain list. Continue with Module 5: Control Flow to learn how to conditionally show content and handle empty states.