form submit with setTimeout not working as expected

Question

I am submitting a form based on a condition and a setTimeout statement in submit event handler, however the form is still getting submitted even when I put return false in setTimeout function.

bool = true;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    setTimeout(function () {      
        if(bool) {    
            console.log('form shouldnt submit coz the following statement is return false');
            return false; 
        }else{
            return true;
        }
    }, 1000);           
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

The `submit` event is not paused just because you call `setTimeout` in one of its handlers. Have a look at `.preventDefault()` — Andreas, Aug 13 '21 at 09:40
@SuperDJ thats not the point, why is form getting submitted when I have return false statement there ? — Shoyeb Sheikh, Aug 13 '21 at 09:42
@Andreas I did put e.preventDefault(), but I was not able to submit the form when validation is true, form was submitting with no values. — Shoyeb Sheikh, Aug 13 '21 at 09:43

score 1 · Answer 1 · answered Aug 13 '21 at 09:55

You should use e.preventDefault() only when you don't want to submit form.

var bool = false;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    if(bool) {    
        alert('Not submit');
         e.preventDefault();
         return false; 
    } else {
         alert('Submit');
        return true;
    }         
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

S N Sharma · Accepted Answer · 2021-08-13T09:52:03.387

0

bool = false;
$('.form-example').submit(function(e) { 
    e.preventDefault();
    //some_stuff where I am get a value true or false in variable bool
        if(bool) {    
            alert('Not submit');
            return false; 
        }else{
            alert('Submit');
            $(this).unbind("submit").submit();
            return true;
        }         
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

edited Aug 13 '21 at 09:52

answered Aug 13 '21 at 09:42

S N Sharma

1,436
2
7
20

Submit is an event. So if you want to stop the submission then you have to use event prevent. – S N Sharma Aug 13 '21 at 09:44
if bool is false form should submit again , how to do that – Shoyeb Sheikh Aug 13 '21 at 09:46
Check the snippet. If bool is false then it is submitting the form. – S N Sharma Aug 13 '21 at 09:47
1

its not submitting the form, its just alerting submit lol – Shoyeb Sheikh Aug 13 '21 at 09:47
Check the updated snippet. – S N Sharma Aug 13 '21 at 09:53
the problem was totally different, jQuery does not submit the value of submit button, and thats why I was not getting value of submit button in php, I fixed it with getting the value of username element in php. Your answer helped too, the `unbind('submit')` statement worked. – Shoyeb Sheikh Aug 13 '21 at 12:21

form submit with setTimeout not working as expected

2 Answers2