form problem with jquery

the scenario is I am generating a test. There is a countdown clock. When this countdown is finished the form is submitted.

so currently if I complete the test normally etc, and submit my results myself it all works fine.

this is my statement which triggers the form submission when the countdown is up:

if(Todays_Date >= Target_Date){
        alert("Timeup, Submitting exam....");
        clearTimeout(timeoutID);
        $("form#testForm").submit();
    }

what开发者_StackOverflow社区 I am currently getting is if statement fires successfully and the alert pops up, however it appears nothing else happens, i.e it doesn't navigate to the action page.

form details:

<form id="testForm" method="post" action="add_responses.php">

now I am quite a noob, so does using submit() not actually follow the action page? do I have to tell the software to send to the page or what? (window location etc)

many thanks,

EDIT: added a bit more code:

// TEST COUNTDOWN CLOCK
function countdown(timestamp) {
    timetarget = new Date(timestamp);

    var Today = new Date();

    var Todays_Date = Today.getTime();
    var Target_Date = timetarget.getTime();

    var tester = new Date(Target_Date);

    //Find their difference, and convert that into seconds.
    var Time_Left = Math.round((Target_Date - Todays_Date) / 1000);

    if(Todays_Date >= Target_Date){
        clearTimeout(timeoutID);
        $("form#testForm").submit();
        alert("Timeup, Submitting exam....");
    }

    //More datailed.
    days = Math.floor(Time_Left / (60 * 60 * 24));     
    Time_Left %= (60 * 60 * 24);
    hours = Math.floor(Time_Left / (60 * 60));
    Time_Left %= (60 * 60);
    minutes = Math.floor(Time_Left / 60);
    Time_Left %= 60;
    seconds = Time_Left;

    if(hours == 0 && minutes < 10){
    document.getElementById('countdown').style.color='red';
        }

    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    html = hours + ':' + minutes + ':' + seconds + ' secs';

    document.getElementById('countdown').innerHTML = html;

    //Recursive call, keeps the clock ticking.
    var timeoutID = setTimeout(function() { countdown(timestamp); }, 1000);
}

Update:

As I suspected it's because of where you've placed your if statement, and general ordering of code.

Once the form is submitted, it keeps heading down the code and back onto the setTimeout.

The easiest thing to do would be to just add a return statement inside your if;

if(Todays_Date >= Target_Date){
    clearTimeout(timeoutID);
    $("form#testForm").submit();
    alert("Timeup, Submitting exam....");
    return; // <-- add this so the code below isn't excuted again.
}

As some side notes, and as explained in my comments, this kind of logic belongs on the server side, as relying on the Javascript will cause serious implications and flaws in your system:

• Users with Javascript knowledge can hack your system into getting as much time to complete an exam as they like: i.e. javascript:document.getElementById('testForm').setAttribute('id', 'i_want_as_much_time_as_i_like_to_complete_this_exam_mwuhahaha');

This point alone is just unacceptable for a system such as this (unless this is a silly questionnaire or something of insignificance, but for real exams, such as uni work or something -- it needs serious rethinking)

An alternative

Well it's interesting to design such a system as this because your doing something instinctively intrusive; demanding a user submit their form in the allocated time. But let's but this into perspective; when your in a real exam you don't allocate the time you have, it's set, simple as that. When you hand in coursework; you have a deadline. When that isn't met, tough luck. Bottom line is the user has to take responsibility for submitting their work in and on time.

Techniques

• Database & Server Side Logic: Store the deadline date in the database for that paticular user, relational to that exam id. If the user tries to submit after that time, the server simply won't allow it.
• Saving Drafts/Not Losing Data: Split the exam up across multiple pages and force the user to submit to get onto the next page. This will mean the server has chance to save the exam state so far.
• How the user knows how long they have & the consequences: On each page have a fixed div bar which shows the deadline time, so the user knows exactly how long they have got and warn them of the consequences of not submitting their form on time.
• Javascript as a polite informer and submitter: You can continue to do what your doing of submitting the form once the deadline is reached, and even have a countdown on the fixed bar running across the screen that countdowns in realtime the timeleft. The difference is that the server knows whether to accept latecomers or not; so the Javascript doesn't decide, nor does the user.

I would try clearing the timeout first, then submitting the form, and after that displaying the alert:

if(Todays_Date >= Target_Date){
    clearTimeout(timeoutID);
    $("form#testForm").submit();
    alert("Timeup, Submitting exam....");
}

I think the order in which you preformed operations was working against you.