Solved

Timeout not disabling form input

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 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