admin管理员组

文章数量:1023738

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

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
/>
  • javascript
  • svelte
Share Improve this question asked Aug 10, 2022 at 15:00 KyleMatthew159KyleMatthew159 131 silver badge7 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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. E.g.

<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

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/en-US/docs/Web/API/Document/querySelector https://developer.mozilla/en-US/docs/Web/HTML/Element/input#value

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.

E.g. 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

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

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
/>
  • javascript
  • svelte
Share Improve this question asked Aug 10, 2022 at 15:00 KyleMatthew159KyleMatthew159 131 silver badge7 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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. E.g.

<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

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/en-US/docs/Web/API/Document/querySelector https://developer.mozilla/en-US/docs/Web/HTML/Element/input#value

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.

E.g. 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

本文标签： javascriptClear input field in svelte after form submissionStack Overflow

版权声明：本文标题：javascript - Clear input field in svelte after form submission - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745586518a2157629.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。