Solved

Timeout not disabling form input

Posted on 2008-10-20
4
250 Views
Last Modified: 2013-12-13
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.
0
Comment
Question by:Erikal
  • 2
4 Comments
 

Author Comment

by:Erikal
ID: 22758131
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 22763256
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22764836
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
 

Author Closing Comment

by:Erikal
ID: 31507769
Thank you very much for your help.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question