CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Łukasz Gręźlikowski
Łukasz Gręźlikowski

Reputation: 61

jquery form submit - show div and submit

I am trying to make jQuery script where after click form submit will make div display:block and after 5 seconds will submit my form.

Code in header code below - not working even for testing submit delay:

<script>
   $('#registerform').submit(function (e) {
    var form = this;
    e.preventDefault();
    setTimeout(function () {
        form.submit();
    }, 1000); // in milliseconds
});
</script>

This div should become after click submit in form visible:

<div id="gif"><img src="img/digital_signature.gif" /></div>

And after 5 second this form should submit:

<form action="todo.php" method="post" id="registerform">
                    <div class="input-holder">
                        <input class="fname" type="text" name="login" placeholder="Firstname">
                    </div>
                    <div class="input-holder">
                        <input class="fname" type="text" name="pass" placeholder="Lastname">
                    </div>
                    <div class="input-holder">
                        <input class="city" type="text" name="pass" placeholder="Postal Adress">
                    </div>
                    <div class="input-holder">
                        <input class="city" type="text" name="pass" placeholder="City">
                    </div>
                    <div class="input-holder">
                        <input class="city" type="text" name="pass" placeholder="Country">
                    </div>
                    <div class="input-holder">
                        <input class="email" type="text" name="pass" placeholder="E-mail">
                    </div>
                    <div class="input-holder">
                        <input class="revenue" type="text" name="pass" placeholder="Your Value">
                    </div>
                    <div class="input-holder">
                        <textarea rows="1" class="baddress" placeholder="Secret address"></textarea>
                    </div>
                    <div class="input-holder">

                        <input type="file" class="custom-file-input" name="SCAN" id="fileToUpload" />
                    </div>

                    <input type="submit" value="Login" id="submit">

                </form>

Upvotes: 2

Views: 740

Answers (1)

jnoreiga
jnoreiga

Reputation: 2174

http://codepen.io/anon/pen/gPayYe

 $('#submit').on('click', function (e) {
   alert('button clicked: submitting in 5 seconds')
   $('#gif').show();
    e.preventDefault();
    setTimeout(function () {
        $('#registerform').trigger('submit');
    }, 5000); // in milliseconds
 });
$('#registerform').on('submit', function() {
  alert('form submitted')
});

Upvotes: 2

Related Questions