简体   繁体   中英

Javascript form submit creates huge number of POST requests (multiple submit)

This is a weird one, please feel free to edit the question or ask for more info if I haven't provided all the info.

I have a form (a timed quiz) that is automatically submitted if the user didn't submit it in a fixed amount of time and a countdown clock displayed on the page.

However, when time expires and the form is submitted, the browser gets into a weird state till it crushes, and the Apache log shows an endless list of POST requests. What could be causing this?

Even after I close down the browser window, the server still gets hit with the POST requests.

If I let the window open, Chrome will eventually display a failure message but the POST requests will still be coming in, long after this message is displayed (I would say up to a minute after). The error in question can be seen here, along with the Apache log file that records the POST requests coming on and on: http://imgur.com/zAniD1q or if I manage to insert it here: ! http://imgur.com/zAniD1q

This is a Wordpress website but heavily customized by me. My .htaccess file is quite basic, I don't think this is the issue.

The same code works on another part of the site, to make things even harder to understand.

I also tested and got the same behavior on both WAMP (Apache 2.2.22/PHP 5.4.3) and a production server running PHP 5.5 (not sure about Apache version).

PHP:

define('REDIRECT_LINK', '/finish-free-iq-test.php');

Javascript:

function update_time_remaining() {
    var start_time_millis = Math.floor(jQuery("#start_time").val());
    var redir_to = "<?php echo REDIRECT_LINK; ?>";
    var test_duration = <?php echo Question::get_duration($questionSetID) * 1000;?>;
    var now = new Date();
    var remainingTime = test_duration - (now.getTime() - start_time_millis);
    if (remainingTime <= 0) {
//        console.log("time is out, redir to: " + redir_to);
//        alert("stop=");
        // force-submit the form
        jQuery("#answerForm").attr("action", redir_to);
        jQuery("#answerForm").submit();
    }
    else {
        var minutesRemaining = Math.floor(remainingTime / 60000);
        var secondsRemaining = Math.floor((remainingTime - minutesRemaining * 60000) / 1000);
        jQuery("#timer").html("Time remaining : " + (minutesRemaining<10?"0":"") + minutesRemaining + ":" + (secondsRemaining<10?"0":"") + secondsRemaining);
        //console.log(secondsRemaining);
    }   
}

// Things to do once the page has loaded (start the clock for example)
jQuery(document).ready(function() {
    jQuery("#submitRow").hide();
    jQuery("#start_time").val(new Date().getTime() - <?php echo (time() - $timeStarted)*1000; ?>);
    update_time_remaining();
    // check every half a second so the ticking is consistent looking.
    window.setInterval("update_time_remaining()", 500);

HTML:

<div id="timer"></div> <br/>
<form id="answerForm" 
      method="POST" 
      action="<?php echo REDIRECT_LINK; ?>">

        <input id="submitRow" type="submit" name="go_next" value="Next question"> 

<?php echo "<input type=\"hidden\" name=\"current\" value=\"$id\">"; ?>
<input type="hidden" name="answer" id="answer" value="-1">
<input type="hidden" name="start_time" id="start_time" value="<?php echo $jsTimeStarted; ?>">

</form>

At a glance, it looks like you don't have anything that stops the "update_time_remaining()" being called on a 500ms interval.

This means that the 'if (remainingTime <= 0) {' check gets called continuously, even after the timer goes below zero- and leads to repeated post calls until the page is unloaded.

Perhaps incorporate a boolean flag that allows the following to only be called once:

jQuery("#answerForm").submit();

A good solution would be to remove the interval that calls 'update_time_remaining()' after the submit has been called.

As an additional note, remember that because this is a javascript-only timing check, someone with enough expertise (and time) could simply disable the check happening, and submit the answers whenever they please. A good solution to this would be checking how long the person took to answer the question at the server-side.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM