How do I submit a form in Javascript with a delay

Asked 10/11, 2010 at 19:21 Answered 10/1, 2020 at 15:38

I am trying to submit the form automatically with a delay in a chrome extension I am writing and it does not seem to be submitting. Below is my form and javascript:

function submitForm() { // submits form
    document.getElementById("ismForm").submit();
}

if (document.getElementById("ismForm")) {
    setTimeout("submitForm()", 5000); // set timout 
}


<form method="post" id="ismForm" name="ismForm" action="http://www.test.com" class=""> 
<label for="searchBox">Search </label>
<input type="text" id="searchBox" name="q" value=""> <input type="hidden" id="sayTminLength" value="3"><input type="hidden" id="coDomain" value="US"><input class="button" type="submit" id="search.x" name="search.x" value="Search" autocomplete="off"> 
</form>

Impetus answered 10/11, 2010 at 19:21 Comment(1)

For some reason, the code does not go into the submitForm() function. I tested this by adding an alert at the beginning of the submitForm() function. – Impetus 10/11, 2010 at 19:48

Don't know the context, but it might be that the page has not been loaded yet completely - you might try putting

if (document.getElementById("ismForm")) {
    setTimeout("submitForm()", 5000); // set timout 
}

in body onLoad() event. As another thing, try putting as simple alert before setTimeout and at the start of submitForm() to confirm the timeout is getting fired in the first place.

Grumous answered 10/11, 2010 at 19:29 Comment(1)

For some reason, the code does not go into the submitForm() function. I tested this by adding an alert at the beginning of the submitForm() function. – Impetus 10/11, 2010 at 19:37

Here's what you need to do (copy and paste):

<html>
    <head>
    <script type="text/javascript">
    function submitForm() { // submits form
        document.getElementById("ismForm").submit();
    }
    function btnSearchClick()
    {
        if (document.getElementById("ismForm")) {
            setTimeout("submitForm()", 5000); // set timout 
       }
    }
    </script>
    </head>
    <body>
    <form method="post" id="ismForm" name="ismForm" action="http://www.test.com" class=""> 
    <label for="searchBox">Search </label>
    <input type="text" id="searchBox" name="q" value=""> <input type="hidden" id="sayTminLength" value="3">
    <input type="hidden" id="coDomain" value="US">
    <input class="button" onclick="btnSearchClick();" type="button" id="search.x" name="search.x" value="Search" autocomplete="off"> 
    </form>
    </body>
    </html>

Or, if you want to submit the form after 5 seconds, attach to the windown.onload event the call to btnSearchClick() like so: window.onload=btnSearchClick

Chopin answered 10/11, 2010 at 19:35 Comment(1)

I can't change the form. I am writing an extension for Chrome. – Impetus 10/11, 2010 at 19:38

Try this:

<form method="post" action="yourpage/" id="customForm">
    <input type="text" name="input1"/>
    <input type="text" name="input2"/>
</form> 
<button id="submit">SubmitForm</button><!-- Outside of form -->
<script>
    function submitForm() {
        document.getElementById("customForm").submit()
    }

    document.getElementById('submit').onclick = function() {
        setTimeout(submitForm, 3000); 
    }
</script>

Kyoko answered 6/11, 2015 at 15:29 Comment(0)

Here is one more simple solution:

<script type="text/javascript">
    function formSubmit(){
          document.getElementById("ismForm").submit();
    }

    window.onload=function(){ 
          window.setTimeout(formSubmit, 5000);
    };
</script>

Wouldbe answered 25/2, 2013 at 11:39 Comment(0)

Here is the way that works for me:

 const form = $("#formId");

     form.submit(() => {

//some other functions you need to proceed before submit

     setTimeout(() => {}, 1200);
            return true;
    });

Now it will wait 1200 ms before submitting the form. Also, if you return false instead of true, the form won't submit.

Magill answered 24/9, 2019 at 9:5 Comment(1)

No, it won't unless the form takes a LONG time to submit. The form closes before the timeout happens. – Equanimous 17/7, 2023 at 18:40

Solution in jQuery (to avail of expando), easily editable to plain JavaScript:

$('form').eq(0).on('submit', function(e) {
    var $form = $(this);

    if ($form.data('blocked') !== true) {
        // mark the form as blocked
        $form.data('blocked', true);
        console.log('Scheduling form submit...');

        window.setTimeout(function() {
            console.log('Submitting!');
            $form.submit();
            $form.data('blocked', false);
        }, 1000);

        // disallow submit
        return false;
    }
});

Repast answered 10/1, 2020 at 15:38 Comment(0)

Recommended topics

Hot tags