Form is resetting before it submits, how can i get it to wait a few seconds?

Question

I am trying to reset a form and I have a function, the form resets before it submits. Is there a way to get it to wait a few seconds?

<form action="#" method="POST" id="file-form" name="file-form" enctype="multipart/form-data">
    <div class="file-field input-field">
      <div class="btn">
        <span>File</span>
        <input type="file" class="upload" id="files" name="files" multiple>
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload one or more files">
      </div>
    </div>

    <button class="btn waves-effect waves-light" type="submit" value="submit" name="action" onclick="submitForm()">Submit
        <i class="material-icons right">send</i>
    </button>
</form>

<script type="text/javascript">
function submitForm() {
   var resetForm = document.getElementsByName('file-form')[0];
   resetForm.submit(); 
   resetForm.reset(); 
   return false;
}
</script>

[Check me out](http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep) maybe this? — ZombieChowder, Mar 20 '17 at 23:08
What do you intend to happen when the form is submitted? Why reset at all? — E. Sundin, Mar 20 '17 at 23:10
When you call `.submit()`, the browser will navigate away from the page, so why do you want to do something afterwards? Why do you use a JS event handler at all? — Bergi, Mar 20 '17 at 23:13

score 0 · Answer 1 · answered Mar 20 '17 at 23:28

0

You can use setTimeOut method to reset the form after 3 seconds.

var formReset;

function triggerReset() {
  formReset= setTimeout(resetDelay, 3000);
}

function resetDelay() {
 resetForm.reset();
}

function submitForm() {
  var resetForm = document.getElementsByName('file-form')[0];
  resetForm.submit();
  triggerReset(); 
  return false;
}

answered Mar 20 '17 at 23:28

Sridhar

128
1
10

But by then it long will have been submitted? – Bergi Mar 20 '17 at 23:36
you have to use either `ajax` or `xmlhttprequest` to submit your form. so call the `triggerReset()` in success and change the timer to 1sec. – Sridhar Mar 20 '17 at 23:49
Ajax *is* XMLHttpRequest, but the OP doesn't appear to use either? And even then, `setTimeout` would be the wrong solution. – Bergi Mar 21 '17 at 10:51

per.eight · Answer 2 · 2017-03-20T23:35:43.547

-1

About your question

Is there a way to get it to wait a few seconds?

setTimeout(function(){ 
     //submit code
}, 3000); //wait 3 seconds before reset

edited Mar 20 '17 at 23:35

answered Mar 20 '17 at 23:12

per.eight

418
6
16

@Bergi howd you know that it doesn't solve his real problem. If you read the OOPs code it has 'waves-effect waves-light' classes. If I am right what hes trying to achieve is trying to finish the effect or animation before it submits. The question was answered the way it was asked. – per.eight Mar 20 '17 at 23:21
He says "*the form resets before it submits.*" (even though in the code it is submitted before it resets). Delaying the reset will still submit it instantly. I doubt that his concerns are about the animation, but we have too less information to answer. – Bergi Mar 20 '17 at 23:26
Also, if the question really is *How to wait a few seconds* then this question is really a duplicate. – E. Sundin Mar 20 '17 at 23:27
@Bergi i just realized that i placed "reset your form here" in the comment instead of code to submit. editing my answer. – per.eight Mar 20 '17 at 23:35

Form is resetting before it submits, how can i get it to wait a few seconds?

2 Answers2