Reset HTML form after submit

Question

const scriptURL = 'URL'
const form = document.forms['myform']

form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, {
      method: 'POST',
      body: new FormData(form)
    })
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
});

<form name="myform">
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input name="email" class="form-control" type="email" placeholder="Email" required>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <button type="submit" class="btn btn-default btn-block">Subscribe</button>
  </div>
</form>

How can I reset my form after handling form submission?

Here's what I am doing currently:

 form.addEventListener('submit', e => {
                          e.preventDefault()
                          fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                          .then(response => console.log('Success!', response))
                          .catch(error => console.error('Error!', error.message))
                          })
                         $('#myform').reset(); // attempt to reset the form

I searched for similar threads and tried $('#myform').reset(); Clearly it's not working, I am new to Javascript if anyone can point me where to learn this form related topics then it will be great

EDIT: Form source

<form name="myform" id="myform">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label for="email" class="sr-only">Email</label>
                <input name="email" class="form-control" type="email" placeholder="Email" required>
                </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <button type="submit" class="btn btn-default btn-block">Subscribe</button>
    </div>
            </form>

I tried the following suggestions:

  $('#myform').val(''); // not responding
  $('#myform')[0].reset // not responding
  $('#myform').reset(); // not responding
  $('#myform').get(0).reset(); // not responding

  $('#myform').find("input:not([type="submit"), textarea").val(""); // resetting the whole page with performing submission task

  $('#myform')[0].reset() // not responding
  document.forms['myform'].val(""); // not responding
  document.getElementById('#myform').reset() // not responding

Possible duplicate: https://stackoverflow.com/questions/8701812/clear-form-after-submission-with-jquery — Mamun, Apr 25 '18 at 06:11
Possible duplicate of [Clear form fields with jQuery](https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery) — Saeed, Apr 25 '18 at 06:11
Your form does not have the id myform, so you can not select it by it. $('[name="myform"]').get(0).reset(); — Lain, Apr 25 '18 at 06:13
As @Lain said, # is for selecting *id* not *name* try adding an id="myform" and check again! — Harish ST, Apr 25 '18 at 06:16
@HarishST just added the ID, please check the updated question — remy boys, Apr 25 '18 at 06:23
Shouldn't the call to reset be inside the function that handles the submit event? — Jasha, Apr 25 '18 at 06:41
What about the semicolumn after addEventListener() ? And you have added Jquery script to your page? — Harish ST, Apr 25 '18 at 06:49
Since you declare form and use it inside your listener anyway, cant you just do form.reset()? Works fine for me if I rebuild your code. — Lain, Apr 25 '18 at 08:40

Delowar Hosain · Answer 1 · 2018-04-25T07:36:40.943

6

Try this:

$('#myform').find("input:not([type="submit"), textarea").val("");

It will clear all data of your form. but if you have prefilled value, you should use this code: document.getElementById('myform').reset()

Note: Use 'myform' as your form id attribute. ex: <form name="myform" id="myform">

edited Apr 25 '18 at 07:36

answered Apr 25 '18 at 06:15

Delowar Hosain

2,214
4
18
35

Is emptying all values really the same as reseting a form? What about prefilled values? – Lain Apr 25 '18 at 06:22
@Delowar just tried your suggestion, seems like it's resetting the whole page instead of just form – remy boys Apr 25 '18 at 06:29
if you have prefilled value, you should use this code: document.getElementById('myform').reset(); – Delowar Hosain Apr 25 '18 at 06:55

score 3 · Answer 2 · answered Apr 25 '18 at 06:12

3

You need to get actual form rather than jQuery object:

$('#myform').get(0).reset();

answered Apr 25 '18 at 06:12

score 3 · Answer 3 · answered Apr 25 '18 at 06:14

3

For the javascript to know what form to reset, you need to add id to the form, not just a name. Try,

<form name="myform" id="myform">

answered Apr 25 '18 at 06:14

finnishNinja

91
1
5

score 3 · Answer 4 · answered Apr 25 '18 at 06:19

Please note that a form reset will bring it to its original state as it was rendered. If you had prepopulated fields, those fields will get that value again. Besides that, there are 2 things you need to fix:

$('#myform') needs an id="myform" in the HTML to get the form as jQuery object.
reset() only works on the HTML form object, not on a jQuery object. Either change your call to $('#myform')[0].reset() or to document.getElementById('myform').reset().

score 2 · Answer 5 · answered Apr 25 '18 at 06:16

One way to clear your form is to set the value to "empty" like so:

$('#myForm').val('');

Then the form input has no value in it!

$('#myBtn').click(function () {
  $('#myForm').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="hello world" id="myForm">

<button id="myBtn">myBtn</button>

score 2 · Answer 6 · edited Apr 15 '19 at 21:07

2

document.getElementById('#myform').reset() // not responding

You were almost there.. getElementByID so you can omit # in ('#myform')

This would work if you used document.getElementById('myform').reset();

For some reason reset() does not work with jquery only with pure JS.

edited Apr 15 '19 at 21:07

Pika Supports Ukraine

3,612
10
26
42

answered Apr 15 '19 at 21:06

Marcin Pres

21
1

score 2 · Answer 7 · edited Aug 17 '19 at 15:59

2

jQuery is not required for everything

<form action='server-script.cgi' onsubmit='this.submit();this.reset();return false;'>
  <blah>...</blah>
</form>

edited Aug 17 '19 at 15:59

Dharman

30,962
25
85
135

answered Aug 17 '19 at 15:55

atesin

21
1

Isitar · Answer 8 · 2018-04-25T06:29:33.600

1

Get the real form $('#myForm')[0].reset()
You need to add an id tag to your form <form id="myForm">

If you just used plain js, you could go with document.getElementById('myForm').reset() but still, add an id tag to your form

Edit: corrections pointed out in the comment

edited Apr 25 '18 at 06:29

answered Apr 25 '18 at 06:18

Isitar

1,286
12
29

Even with the id your selector seems wrong to me. Also use .get(0). If you really feel the urge to use jquery atleast be consistent in it. – Lain Apr 25 '18 at 06:20
Could you elaborate what event you mean? – Isitar Apr 25 '18 at 06:24
They didn't say event ;-). Your jQuery statement is not fully correct. The `#` is missing in the selector and you should call `reset()` as a function. There's nothing wrong using `[0]` instead of `get(0)`: https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/ – Jasha Apr 25 '18 at 06:28

score 0 · Answer 9 · answered Apr 25 '18 at 07:06

document.getElementById("myform").addEventListener('submit',reset_form);

function reset_form(event) {
  //Your code goes here
  document.getElementById("myform").reset();
}

<form name="myform" id="myform">
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input name="email" id="myform" class="form-control" type="email" placeholder="Email" required>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <button type="submit" class="btn btn-default btn-block">Subscribe</button>
  </div>
</form>

Are you looking for this ? And do your coding inside the function! Alternatively, If you don't want the form to submit, you can use the button type="button" instead of "submit" also.

score 0 · Answer 10 · answered Apr 25 '18 at 08:45

Since form is declared and resused in the listener anyway, could just call a reset on it.

<html>
    <head>
        <script>
            window.onload = function(){
                const scriptURL = 'URL';
                const form = document.forms['myform'];

                form.addEventListener('submit', e => {
                    e.preventDefault()

                    fetch(scriptURL, {
                        method: 'POST',
                        body: new FormData(form)
                    })
                    .then(response => console.log('Success!', response))
                    .catch(error => console.error('Error!', error.message));

                    form.reset() //Reset the form
                })
            }
        </script>
    </head>

    <body>
        <form name="myform">
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label for="email" class="sr-only">Email</label>
                    <input name="email" class="form-control" type="email" placeholder="Email" required>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <button type="submit" class="btn btn-default btn-block">Subscribe</button>
            </div>
        </form>
    </body>
</html>

score 0 · Answer 11 · answered Aug 26 '19 at 13:54

0

try this:

$('#yourInputID').val('');

this will reset reset the selected input by its Id.

answered Aug 26 '19 at 13:54

Yehia Fouad

21
1
3

score 0 · Answer 12 · answered Sep 27 '20 at 07:33

Reason

while using fetch() for the data is already delivered and you only get response object back from server. the reset() inside fetch.then() won't execute.

Workaround

one of the way to make things work is , instead of getting form data inside fetch , you should collect data before that & saved it somewhere and reset the form.

Code

form.addEventListener('submit', e => {
  e.preventDefault()

  const options = {
     method: 'POST',
     body: new FormData(form),
  }

  form.reset();

  fetch(scriptURL, options)
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
  });

Reset HTML form after submit

12 Answers12

Linked