Solved

Timeout not disabling form input

Posted on 2008-10-20
4
248 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

777 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