Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reset HTML form after submit

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
like image 456
remy boys Avatar asked Mar 04 '26 19:03

remy boys


2 Answers

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

like image 145
Delowar Hosain Avatar answered Mar 06 '26 09:03

Delowar Hosain


You need to get actual form rather than jQuery object:

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

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!