提交表单后清除 svelte 中的输入字段

Question

I'm struggling to find a way to clear form inputs after submission. I should mention that this form is in a Modal. It posts to Supabase correctly, I just can't figure out how to clear the input fields. Any ideas? I'm new to this and still learning. Thank you.

My Code:

<script>
const addVendorTest = async (event) => {
    const formData = new FormData(event.target)
   
    for(let field of formData){
      const[key, value] = field;
    }
<script/>

<form on:submit|preventDefault = {addVendorTest}>
<input
class="form-control"
type="text"
name="name"
value= "Test Name"
required
/>
<input
class="form-control"
type="text"
name="phone"
value= ""
required
/>
<input
class="form-control"
type="text"
 name="email"
value= ""
required
/>
                

Answer 1

This clears the input field value:

const inputElement = document.querySelector(".form-control[name='name']")
inputElement.value = ""

Either do this for each input field separately. Or better, create a loop that goes through all input fields in your form.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value

Answer 2

As an alternative to DOM querying, you could bind: the values to individual variables, an array or an object. Then you can reset the state and the form will also reset accordingly.

Eg using a dictionary object:

<script>
    const valueDefaults = {
        name: "Test Name",
        phone: '',
        email: '',
    };
    let values = { ...valueDefaults };
    
    const addVendorTest = async (event) => {
        const formData = new FormData(event.target)
    
        // [Use formData]
        console.log([...formData]);

        values = { ...valueDefaults };
    }
</script>

<form on:submit|preventDefault = {addVendorTest}>
    <input class="form-control" type="text" name="name"
           bind:value={values.name} required />
    <input class="form-control" type="text" name="phone"
           bind:value={values.phone} required />
    <input class="form-control" type="text" name="email"
           bind:value={values.email} required />
    <button>Submit</button>
</form>

REPL

Answer 3

Forms have a native reset mechanism which can be triggered via the reset() function or a button with type="reset" .

One limitation is that a value set via regular Svelte properties will not be considered the default. To work around this, you can use setAttribute to set the default value. Eg

<script>
    const value = (node, param) => node.setAttribute('value', param);
    const addVendorTest = async (event) => {
        const formData = new FormData(event.target)
    
        // [Use formData]
        console.log([...formData]);

        event.target.reset();
    }
</script>

<form on:submit|preventDefault={addVendorTest}>
    <input class="form-control" type="text" name="name"
           use:value={'Test Name'} required />
    <input class="form-control" type="text" name="phone"
           required />
    <input class="form-control" type="text" name="email"
           required />
    <button>Submit</button>
</form>

REPL