Timeout not disabling form input

Hi Experts,
You have kindly helped me with a timeout javascript, which disables the radio input buttons of a form when time runs out. In addition, if the users try to leave the page before timeout they are given the option of returning to the page by a means of a confirm box.

Initially, my only concern was to disable the input buttons at timeout and the code provided worked perfectly. Here is that original code:
===============================
<script type="text/javascript">
      window.onload=init;
      function init(){
            var minutes=(15);
            setTimeout("nextPage()", 1000*60*minutes );
      }
      function nextPage(){
            //assuming you have <form id="English1"...>
            var f = document.getElementById("English1");
            for( var i=0; i < f.elements.length; ++i)
            {
                    if( String(f.elements[i].type).toLowerCase() != "submit" )
                  f.elements[i].disabled=true;
            }
      }
       function activate(f){
            for( var i=0; i < f.elements.length; ++i)
            {
                  f.elements[i].disabled=false;
            }
      return true;
      }
</script>
==================================

But, then I wanted to add the option for the users to be able to return to the page if timeout not yet occuered and I was provided with a modified code to do that: Here is the modified code:
===============================
<script type="text/javascript">
var minutes = 15;
var timeLeft = minutes*60*1000;
var tId = "";
var leave = "";
function countdown() { timeLeft -= 1000; }
window.onload=function() {
  leave = setTimeout("nextPage()", timeLeft);
  tId = setInterval('countdown()',1000)
}

      function nextPage(){
            //assuming you have <form id="English1"...>
            var f = document.getElementById("English1");
            for( var i=0; i < f.elements.length; ++i)
            {
                    if( String(f.elements[i].type).toLowerCase() != "submit" )
                  f.elements[i].disabled=true;
            }
      }
       function activate(f){
  if (timeLeft > 14 && confirm('Are you sure you want to leave the English test? You still have some time left to go back and check your answers. If you are sure you want to go

on to the Verbal Reasoning Test, please click OK button. Otherwise, click Cancel button to return to the English test and use the remaining minutes to improve your English

score.')) return false;
            for( var i=0; i < f.elements.length; ++i)
            {
                  f.elements[i].disabled=false;
            }
      return true;
      }
</script>
===========================
I thought everthing was OK.
But upon checking the new code I found that:
 The confirm box function works OK, i.e. the confirm box displayes if the user tries to leave before timeout and the user can return to the current page. However, at timeout the input buttons disable function no longer works.

please help.
ErikalAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ErikalAuthor Commented:
I sorted out this proble, which created another one.
The culprit was the onLoad=Display() statement at body tag.
This one is for the actual clock which displays.
How can I merge the two scripts into one.
Below are the two scripts:
One for the timeout event and the other one which displays a countdown clock.

Timeout
================
<script type="text/javascript">
var minutes = 15;
var timeLeft = minutes*60*1000;
var tId = "";
var leave = "";
function countdown() { timeLeft -= 1000; }
window.onload=function() {
  leave = setTimeout("nextPage()", timeLeft);
  tId = setInterval('countdown()',1000);
}

      function nextPage(){
            //assuming you have <form id="English1"...>
            var f = document.getElementById("English1");
            for( var i=0; i < f.elements.length; ++i)
            {
                    if( String(f.elements[i].type).toLowerCase() != "submit" )
                  f.elements[i].disabled=true;
            }
      }
       function activate(f){
      if (timeLeft > 60000 && confirm('Are you sure you want to leave the English test? You still have some time left to go back and check your answers. If you are sure you want to go on to the Verbal Reasoning Test, please click OK button. Otherwise, click Cancel button to return to the English test and use the remaining minutes to improve your English score.')) return false;
            for( var i=0; i < f.elements.length; ++i)
            {
                  f.elements[i].disabled=false;
            }
      return true;
      }
</script>
=================

and the clock
================
<script>
<!--
//
var seconds = 900;
var numminutes = 15;
var numseconds = 0;
var displayval = numminutes + ':' + numseconds;

document.counter.d2.value = displayval;

function display()
{
  if (seconds >= 0)
  {
    document.counter.d2.value = numminutes + ':' + numseconds;
    seconds -= 1;
    setTimeout('display()', 1000);

    if (numseconds == 0)
    {
      numseconds = 60;
      numminutes -= 1;
    }
    numseconds -= 1;
  }
  else
  {
    alert('Time allowed for the English test has expired! Please press the Maths Test button to continue');
  }
}
-->
</script>
0
Ray PaseurCommented:
Erikal: You might want to consideradding a different technology - something on the server side - if you are interested in having data integrity.  Since JavaScript is a client-side technology, your client computer is exposed to manipulation by the client.  This means that the times you have set can be changed by the client and are therefore unreliable.  

You might want to capture the elapsed time in the PHP script and check there for validity of the information from Javascript.  If, for example, the Javascript time showed a duration of five minutes and the PHP script time showed a duration of ten minutes, you have a problem on your hands and you should invalidate the result.

Best of luck, ~Ray
0
Michel PlungjanIT ExpertCommented:
remove document.counter.d2.value = displayval;
and you might want to just click the button instead of the alert



var tId = "";
var tId2 = "";
window.onload=function() {
  leave = setTimeout("nextPage()", timeLeft);
  tId = setInterval('countdown()',1000);
  document.counter.d2.value = displayval;
  tId2=setInterval('display()', 1000);
}
 
 
Or just put display() into the countdown function

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ErikalAuthor Commented:
Thank you very much for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.