limbajul JavaScript

Autosubmit în x secunde

Acest tutorial prezintă o modalitate prin care datele unui formular vor fi transmise către acțion-ul acestuia într-un anumit interval de timp.
Pentru început am să exemplific un posibil caz în care putem folosi codul din acest tutorial.
Presupunem că avem de făcut o pagină în care este afișată o întrebare grilă cu x variante de răspuns și un buton "Răspunde la întrebare". Utilizatorul trebuie să răspundă la acea întrebare într-un anumit interval de timp (să zicem 10 secunde). După expirarea celor 10 secunde, browserul va face automat submit (asta în cazul în care utilizatorul nu a apăsat încă pe butonul "Răspunde la întrebare").
Pentru a realiza acestă pagină și pentru ca aceasta să răspundă cerințelor noastre vom folosi cod JavaScript și PHP.

Pagina temp.php

Cod:



  

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  

  <html>
  

  <head>
  

  <title>Tutorial</title>

  

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  

  <script type="text/javascript" language="JavaScript">

  

  function data(valoare)
  

      {
  

      valoare--;
  

      var numar_zile=Math.floor(valoare/86400);
  


      var secunde_ramase_pentru_ore= valoare % 86400;
  

      var numar_ore=Math.floor(secunde_ramase_pentru_ore /3600);
  


      var secunde_ramase_pentru_minute=secunde_ramase_pentru_ore % 3600;
  

      var numar_de_minute=Math.floor(secunde_ramase_pentru_minute/60);
  


      var numar_de_secunde=secunde_ramase_pentru_minute % 60;
  

      var unitate_zi=" zile ";
  


      var unitate_ora=" ore ";
  

      var unitate_minut=" minute ";
  


      var unitate_secunda=" secunde";
  

  

      if(numar_zile==1)
  


          {
  

          unitate_zi=" zi ";
  

          }
  

  

      if(numar_ore==1)
  


          {
  

          unitate_ora=" ora ";
  

          }
  

  

      if(numar_de_minute==1)
  


          {
  

          unitate_minut=" minut ";
  

          }
  

  

      if(numar_de_secunde==1)
  


          {
  

          unitate_secunda=" secunda";
  

          }
  

  

      window.status=numar_zile+""+unitate_zi+""+numar_ore+""+unitate_ora+""+numar_de_minute+""+unitate_minut+""+numar_de_secunde+""+unitate_secunda;
  


      if(valoare<=0)
  

          {
  

          document.formular.submit();
  


          }
  

      setTimeout("data("+valoare+")",1000);
  

      }
  


  </script>
  

  </head>
  

  <body <?php if(!isset($_GET['auto_submit'])) { echo 'onLoad="data(10)"'; }?> >




  <form method="get" name="formular" action="tmp.php">


<table align="center" width="30%" cellpadding="1" cellspacing="2" border="1">



    <tr>


        <td>


        Intrebare:<br />


        Ratza impunge?



        </td>


    </tr>


    <tr>


        <td>


        <input type="checkbox" name="raspuns[]" value="da">Da! :D



        </td>


    </tr>


    <tr>


        <td>


        <input type="checkbox" name="raspuns[]" value="nu">Nu!



        </td>


    </tr>


    <tr>


        <td>


        <input type="hidden" name="auto_submit" value="1">



        <input type="submit" name="raspunde" value="Raspunde la intrebare">


        </td>



    </tr>


</table>


</form>


</body>



</html>

Explicația codului:

Cod:



  

  <script type="text/javascript" language="JavaScript">

  

  function data(valoare)
  

      { 
  

      // se transmite ca parametru numarul de secunde ramase pana la submit
  


      valoare-- ; 
  

      // numarul de secunde ramas pana la autosubmit este decrementat cu o unitate
  


      var numar_zile=Math.floor(valoare/86400);
  

      // se calculeaza numarul de zile ramase
  


      var secunde_ramase_pentru_ore= valoare % 86400;
  

      var numar_ore=Math.floor(secunde_ramase_pentru_ore /3600); 

  

      // se calculeaza numarul de ore ramase
  

      var secunde_ramase_pentru_minute=secunde_ramase_pentru_ore % 3600;
  


      var numar_de_minute=Math.floor(secunde_ramase_pentru_minute/60); 
  

      // se calculeaza numarul de minute ramase
  


      var numar_de_secunde=secunde_ramase_pentru_minute % 60; 
  

      // se calculeaza numarul de secunde ramase
  


      var unitate_zi=" zile ";
  

      var unitate_ora=" ore ";
  


      var unitate_minut=" minute ";
  

      var unitate_secunda=" secunde";
  


  

      if(numar_zile==1)
  

          {
  

          unitate_zi=" zi ";
  


          }
  

  

      if(numar_ore==1)
  

          {
  

          unitate_ora=" ora ";
  


          }
  

  

      if(numar_de_minute==1)
  

          {
  

          unitate_minut=" minut ";
  


          }
  

  

      if(numar_de_secunde==1)
  

          {
  

          unitate_secunda=" secunda";
  


          }
  

  

      window.status=numar_zile+""+unitate_zi+""+numar_ore+""+unitate_ora+""+numar_de_minute+""+unitate_minut+""+numar_de_secunde+""+unitate_secunda; 

  

      // se afiseaza in status bar timpul ramas pana la autosubmit
  

      if(valoare<=0)
  


          { 
  

          // daca numarul de secunde ramase este mai mic sau egal cu 0 se face submit
  


          document.formular.submit();
  

          }
  

      setTimeout("data("+valoare+")",1000); 

      // se autoapeleaza functia data odata pe secunda &#8211; atentie 1000 reprezinta milisecundele (1s=1000milisecunde) A NU SE MODIFICA ACEASTA VALOARE
  


      }
  

  </script>

Cod:



  <?php  

  if(!isset($_GET['auto_submit'])){ echo 'onLoad="data(10)"'; }
  


  // atat timp cat nu este transmis $_GET['auto_submit'] - browserul va apela JavaScriptul. 

  // 10 reprezinta numarul de secunde pana la autosubmit. 


  // Puteti incerca orice alta valoare intreaga mai mare ca 0. 

  // 
  In cazul in care parametrul functiei este mai mic sau egal cu 0, 


  // odata cu incarcarea paginii se va face autosubmit.  

  ?>

Folosind această metodă utilizatorul dacă va încerca să schimbe data din sistem, numerotarea inversă nu va fi afectată. Dacă utilizatorul dezactivează JavaScript, atunci se poate verifica pe partea de PHP, dacă s-a răspuns în intervalul dorit sau nu (respectiv se compară data când s-a primit cererea și data maxim admisă când cererea ar fi trebuit să fi fost primită în cazul în care serverul este aglomerat se poate lua în calcul și un delay de x secunde la data maxim admisă).

Observație!
PENTRU UTILIZATORII FIREFOX!!! Activați CHANGE STATUS BAR TEXT din TOOLS -> OPTIONS -> CONTENT -> ADVANCED (cel din dreptul lui ENABLE JAVASCRIPT) -> check CHANGE STATUS BAR TEXT.