title: Reset HTML form after submit
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const scriptURL = 'URL'
  const form = document.forms['myform']
  
  form.addEventListener('submit', e =&gt; {
    e.preventDefault()
    fetch(scriptURL, {
        method: 'POST',
        body: new FormData(form)
      })
      .then(response =&gt; console.log('Success!', response))
      .catch(error =&gt; console.error('Error!', error.message))
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="myform"&gt;
    &lt;div class="col-md-6 col-sm-6"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="email" class="sr-only"&gt;Email&lt;/label&gt;
        &lt;input name="email" class="form-control" type="email" placeholder="Email" required&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 col-sm-6"&gt;
      &lt;button type="submit" class="btn btn-default btn-block"&gt;Subscribe&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I reset my form after handling form submission? </p>
  
  <p>Here's what I am doing currently:</p>
  
  <pre><code> form.addEventListener('submit', e =&gt; {
                            e.preventDefault()
                            fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                            .then(response =&gt; console.log('Success!', response))
                            .catch(error =&gt; console.error('Error!', error.message))
                            })
                           $('#myform').reset(); // attempt to reset the form
  </code></pre>
  
  <p>I searched for similar threads and tried <code>$('#myform').reset();</code> 
  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 </p>
  
  <p>EDIT: Form source</p>
  
  <pre><code>&lt;form name="myform" id="myform"&gt;
      &lt;div class="col-md-6 col-sm-6"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="email" class="sr-only"&gt;Email&lt;/label&gt;
                  &lt;input name="email" class="form-control" type="email" placeholder="Email" required&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 col-sm-6"&gt;
          &lt;button type="submit" class="btn btn-default btn-block"&gt;Subscribe&lt;/button&gt;
      &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>I tried the following suggestions:</p>
  
  <pre><code>  $('#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
  </code></pre>