Prevent multiple executions of JS function / form submission

Question

I am using a form with a single input as follows:

<form action="" method="POST" id="myForm" name="myForm">
    <input type="text" name="myInput" id="myInput" maxlength="9" OnKeyPress="checkMyForm();" onKeyUp="checkMyForm();" onChange="checkMyForm();" />
    <button id="btnSubmit" class="btnSubmit" >Submit</button>
</form>

The JS function checks the input, and if it is happy with it is waits 1.25 seconds and then submits the form as follows:

function checkMyForm () {
var input = document.getElementById("myInput");
var form = document.getElementById("myForm");
    if ( /* check the input here */) {
        setTimeout(function() {
            // submit the form
            $("#myForm").submit(); }, 1250);
        }
     else {
        // do nothing
    }
}

The if statement checks the for input's length. If I type it in (7 characters) - it executes 6-7 times. If I paste it in - it executes twice. Is there a way for me to prevent the multiple form submission?

I am already having this in place:

$(document).ready(function() {
    $("#myForm").submit(function(event) {
        // disable the submit/print button
        document.getElementById('btnSubmit').disabled = true;
        // prevent resubmission of the form
        $(this).submit(function() {
            return false;
        });

        // prevent page refresh
        event.preventDefault();

        // contineu with my stuff to submit the form
        $.ajax({
            url: 'index.php',
            type: 'post',
            data: {
                "myInput" : $('#myInput').val(),
            },
            success: function(response) {
                if(!alert(response)) {
                    // do my thing here
                }
            }
        });
    }
}

That prevent from actually running the PHP side code to submit the form; but the alert is being triggered regardless (twice if paste in, or 5-7 times if typed in). How can I prevent the multiple submissions and response returns?

where is the checkMyForm() method you use in the input field? — Mivaweb
– Mivaweb, Commented May 14, 2014 at 13:37
Am I right to assume that check_promisLot () is checkMyForm()? And are you trying to submit the form when a special condition is met? Eg. if the input has 9 characters? If so, please post the condition. — nils
– nils, Commented May 14, 2014 at 13:41

Thierry Blais · Accepted Answer · 2014-05-14 13:44:08Z

3

I'm assuming that your checkMyForm() function is in effect your check_promisLot() function, you should change that.

Have you tried clearTimeout, it would go something like this;

var delayExec; 

function check_promisLot () {
    clearTimeout(delayExec);
    var input = document.getElementById("myInput");
    var form = document.getElementById("myForm");
        if ( /* check the input here */) {
            delayExec = setTimeout(function() {
                // submit the form
                $("#myForm").submit(); }, 1250);
            }
         else {
            // do nothing
        }
}

Essentially, try to reset your timer every time an update triggering event happens.

answered May 14, 2014 at 13:44

Thierry Blais

2,85825 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KingsInnerSoul Over a year ago

I am actually facing another issue. If I do not press the Return key it processes the form and spits only one Alert. But if I press the Return key fast enough it spins two Alerts. Any idea how to prevent this from happening?

Collectives™ on Stack Overflow

Prevent multiple executions of JS function / form submission

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related