Okno pro licenční podmínky na webové stránce

25. října 2003

•

Někdy potřebujeme potvrzení uživatele o tom, že souhlasí s našimi podmínkami. Z instalačních programů známe okno, ve kterém jsou zobrazeny licenční podmínky a pod nimi zatrhávací políčko pro potvrzení souhlasu. Dole je potom tlačítko pro pokračování, které je do okamžiku zaškrtnutí souhlasu nedostupné. Podobné okno můžeme mít i na webu.

Pro naši aplikaci použijeme formulář. Zde totiž můžeme použít pole textarea, do kterého přímo vypíšeme naše podmínky. Nelze sice použít formátování textu, ovšem pro náš účel to není nutné. Výhodou je, že nemusí být ve stránce celé podmínky najednou, rozměry pole si libovolně nastavíme a zobrazený text podmínek lze v poli rolovat, a to ve všech prohlížečích. Ve vlastnostech pole textarea můžeme nastavit také atribut readonly (ve většině prohlížečů nebude možné údaje editovat) a wrap=“virtual“ (flexibilní zalamování textu).

Pod textové pole umístíme zatrhávací políčko, které bude obsluhovat JavaScript ve stránce. Jeho hodnotu musíme otestovat i ve skriptu, který obsluhuje náš formulář.

Nakonec si přidáme libovolný počet tlačítek pro pokračování po souhlasu s podmínkami. JavaScriptem budeme ovládat jejich vlastnost disabled. V některých starších prohlížečích je tato vlastnost ignorována, proto je potřeba s tím počítat ve funkci obsluhující zatrhávací políčko.

Obslužný skript bude testovat stav zatrhávacího políčka a při zatržení změní vlastnost všech tlačítek typu submit na enabled. V prohlížečích, které to nepodporují, bude alternativně stornováno odeslání formuláře a pomocí alert bude zobrazeno hlášení o nutnosti souhlasu s podmínkami. Výhodou je, že můžeme přidat více odesílacích tlačítek s různými funkcemi, aniž bychom museli zvlášť zasahovat do obslužného skriptu, viz ukázka.

Na událost onload JavaScriptem povinně „odškrtneme“ zatrhávací políčko (některé browsery si pamatují stav políčka i po reloadu stránky) a provedeme funkci, která zakáže všechna odesílací tlačítka – tak bude formulář řádně připraven k použití.

Stránka Rules.html:

<html>
<head>
    <title>Licenční podmínky</title>
</head>
<body>
    <script type=“text/javascript“>
     <!– <![CDATA[
    var objname;
    function agsubmit(el)
    { // funkce, která povolí všechna tlačítka v závislosti na stavu zatrhávacího políčka
      objname = el;
      if (document.all || document.getElementById)
      {
        for (i = 0; i < objname.form.length; i++)
        {
          var tempobj = objname.form.elements[i];
          if (tempobj.type.toLowerCase() == „submit“)
            tempobj.disabled = !objname.checked;
        }
      }
    }
    function defaultagree(el)
    { // funkce, která rozliší, zda prohlížeč podporuje zakázání tlačítka
      if (!document.all && !document.getElementById)
      {
        if (window.objname && objname.checked)
          return true;
        else
        {
          alert(„Pro pokračování musíte souhlasit s podmínkami“)
          return false;
        }
      }
    }
    function forminit()
    { // odškrtnout souhlas a zakázat tlačítka
      document.forms.rulesform.rulesagree.checked = false;
      agsubmit(document.forms.rulesform.rulesagree);
    }
    window.onload = forminit; // nachystat formulář
     //]]> –>
    </script>
    <form action=“Script.php“ name=“rulesform“ id=“rulesform“ onsubmit=“return defaultagree(this)“ method=“POST“> // v onsubmit se volá funkce pro podporu starších prohlížečů
      <textarea rows=“6″ cols=“30″ wrap=“virtual“ readonly=“readonly“>
1. první pravidlo je takové a takové
2. musíte to a to a to
3. nesmíte vůbec nic
4. nedáváme žádné záruky
5. je možné, že se to pokazí
      </textarea><br />
      <input name=“rulesagree“ id=“rulesagree“ value=“1″ type=“checkbox“ onclick=“agsubmit(this);“ /> Souhlasím s licenčními podmínkami<br /> // v onclick se volá funkce, která v novějších browserech povolí zakázaná tlačítka
      <input type=“submit“ value=“Další »“ /> // při načtení stránky je tlačítko v novějších prohlížečích zakázáno – disabled
      <input name=“print“ id=“print“ type=“submit“ value=“Pokračovat a vytisknout »“ />
    </form>
</body>
</html>

Za zmínku ještě stojí použití metody Post pro odeslání formuláře. Metoda Post přenášená data nepředává do řetězce URL. Tím zabráníme uživatelům, aby si chráněnou stránku uložili například do oblíbených odkazů v podobě přímého odkazu. Aplikace je samozřejmě funkční i bez JavaScriptu, ovšem nesouhlas uživatele s podmínkami zjistíme až na serveru.

Z formuláře se odešle pouze hodnota zatrhávacího políčka a těch tlačítek, u kterých uvedeme atribut name. Pole textarea není pojmenované, takže se jeho obsah neodesílá. Je úlohou zpracovávajícího skriptu, aby otestoval hodnotu proměnné zatrhávacího políčka (v našem příkladu rulesagree). Pokud jeho hodnota není rovna 1 (true), měl by zobrazit upozornění na nutnost souhlasu s podmínkami a případně ještě odkaz na příslušný formulář.

V PHP by to bylo například takto:

if ($_POST[‚rulesagree‘] != 1)
Echo (‚Bohužel jste nepotvrdil(a) souhlas s <a href=“Rules.html“>podmínkami</a>.‘);
else
{
// zde je kód stránky v případě, že je souhlas potvrzen
}

Tuto jednoduchou aplikaci si můžete stáhnout i s ukázkou obslužného skriptu pro PHP.

Pozn. red.: Tento článek vyšel poprvé 15. 5. 2002. Původní verze článku a k němu vedené diskuse jsou vám k dispozici v ZIP archivech.