Solved

Timeout not disabling form input

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

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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 look for a specific file type in a local or remote server directory using PHP.
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now