Autor Zpráva
SkyVessel
Profil
Opět zdravím,

jelikož mi javascript stále říká pane, tak i to, co vám předvedu mi dalo sakra zabrat :), tak snad to není kravina na první pohled :D.

Cílem je vytvořit stránku podobnou rezervaci sedadel v kině :). V podstatě naklikat několik polček a data poslat dál ke zpracování. Než ale začnu něco dávat dokupy, tak se chci ujistit, jestli jdu na to dobře, popřípadě poraďte nějaké úpravy...
<!doctype html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <meta name="keywords" content="">
  <meta name="description" content="...">
  <meta name="author" content="SkyVessel">
  <link rel="shortcut icon" href="favicon.ico">
  <title>kalendář</title>
  <style type="text/css">
  <!--
    td {
border: 1px black solid;
text-align: center;
cursor: pointer;
}

.vyber input{
  visibility: hidden;
}
  //-->
  </style>
  </head>
  <body>

<script>

function oznac(idt,idc)
{
if (document.getElementById(idc).checked == false)
    {
    document.getElementById(idc).checked = true;
    document.getElementById(idt).style.backgroundColor = '#CFCFCF';
    }
else
    {
  document.getElementById(idc).checked=false;
    document.getElementById(idt).style.backgroundColor = '#FFFFFF';
  }
}
</script>

<form method="post" name="vyber" id="vyber" class="vyber">
<table>
    <tr><td colspan="3">pondělí:</td></tr>
    <tr>
        <td id="b1" onclick="oznac('b1','1')">8h - 11h <input type="checkbox" id="1" name="1" value="1"></td>
        <td id="b2" onclick="oznac('b2','2')">11h - 14h <input type="checkbox" id="2" name="2" value="2"></td>
        <td id="b3" onclick="oznac('b3','3')">14h - 17h <input type="checkbox" id="3" name="3" value="3"></td>
                                                                                                               
    </tr>
    <tr><td colspan="3">úterý:</td></tr>
    <tr>
        <td id="b4" onclick="oznac('b4','4')">8h - 11h <input type="checkbox" id="4" name="4" value="4"></td>
        <td id="b5" onclick="oznac('b5','5')">11h - 14h <input type="checkbox" id="5" name="5" value="5"></td>
        <td id="b6" onclick="oznac('b6','6')">14h - 17h <input type="checkbox" id="6" name="6" value="6"></td>
    </tr>
    <tr><td colspan="3">středa:</td></tr>
    <tr>
        <td id="b7" onclick="oznac('b7','7')">8h - 11h <input type="checkbox" id="7" name="7" value="7"></td>
        <td id="b8" onclick="oznac('b8','8')">11h - 14h <input type="checkbox" id="8" name="8" value="8"></td>
        <td id="b9" onclick="oznac('b9','9')">14h - 17h <input type="checkbox" id="9" name="9" value="9"></td>
    </tr>
</table>
...
<button type="submit" id="Odeslat" name="Odeslat">Odeslat</button>
</form>
  </body>
</html>
juriad
Profil
Ano, jdeš na to dobře.
Poznámky:
5., 6., 12., 22. řádek můžeš úplně vyhodit.
Je třeba formuláři přidat autocomplete="false", jinak po refereshi obnoví původní hodnoty.
Id teoreticky nesmí začínat číslicí, takže id="1" je neplatné. Ale funguje to.
Je lepší nastavit třídu než nějaký konrétní styl, dovoluje to více prostoru.
Lepší je display: none než visibility: hidden.
Pokud nastavíš name u inputů tak jak jako já, PHP z toho rovnou udělá pole hodnot.
Nejspíš chceš skrýt jen checkboxy, přendej tedy třídu vyber tabulce.
Tlačítko pro odeslání je <input type="submit" ...>; zobrazený text je v jeho atributu value.
Ten JS jde trochu zjednodušit:
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="...">
    <meta name="author" content="SkyVessel">
    <link rel="shortcut icon" href="favicon.ico">
    <title>kalendář</title>
    <style type="text/css">
        td {
            border: 1px black solid;
            text-align: center;
            cursor: pointer;
            background-color: #ffffff;
        }
        .vyber input {
            display: none;
        }
        td.vybrany {
            background-color: #cfcfcf;
        }
    </style>
</head>
<body>
    <script>
        function oznac(td) {
            var input = td.getElementsByTagName('input')[0];
            if (input.checked) {
                td.className = '';
                input.checked = false;
            } else {
                td.className = 'vybrany';
                input.checked = true;
            }
        }
    </script>
    <form method="post" autocomplete="off">
        <table class="vyber">
            <tr>
                <td colspan="3">pondělí:</td>
            </tr>
            <tr>
                <td onclick="oznac(this)">8h - 11h
                    <input type="checkbox" name="vyber[]" value="1">
                </td>
                <td onclick="oznac(this)">11h - 14h
                    <input type="checkbox" name="vyber[]" value="2">
                </td>
                <td onclick="oznac(this)">14h - 17h
                    <input type="checkbox" name="vyber[]" value="3">
                </td>
            </tr>
            <tr>
                <td colspan="3">úterý:</td>
            </tr>
            <tr>
                <td onclick="oznac(this)">8h - 11h
                    <input type="checkbox" name="vyber[]" value="4">
                </td>
                <td onclick="oznac(this)">11h - 14h
                    <input type="checkbox" name="vyber[]" value="5">
                </td>
                <td onclick="oznac(this)">14h - 17h
                    <input type="checkbox" name="vyber[]" value="6">
                </td>
            </tr>
            <tr>
                <td colspan="3">středa:</td>
            </tr>
            <tr>
                <td onclick="oznac(this)">8h - 11h
                    <input type="checkbox" name="vyber[]" value="7">
                </td>
                <td onclick="oznac(this)">11h - 14h
                    <input type="checkbox" name="vyber[]" value="8">
                </td>
                <td onclick="oznac(this)">14h - 17h
                    <input type="checkbox" name="vyber[]" value="9">
                </td>
            </tr>
        </table>
        ...
        <input type="submit" value="Odeslat">
    </form>
</body>
</html>
SkyVessel
Profil
Tak jsem se k tomu konečně dostal...

juriad:
5., 6., 12., 22. řádek můžeš úplně vyhodit.
Díky... 5 a 6, jsem zapoměl smazat - nebudou tam vůbec. No ale když už jsme u toho - keywords už teda nemá cenu používat, jo?

Je třeba formuláři přidat autocomplete="false", jinak po refereshi obnoví původní hodnoty.
To má fungovat jako, že po f5 zůstanou zaškrtnuté? To asi ne, protože mi to vždy najelo čisté :).

Id teoreticky nesmí začínat číslicí, takže id="1" je neplatné. Ale funguje to.
To jsem si nebyl jistý, ale funkčnost mě zmátla. Díky

Je lepší nastavit třídu než nějaký konrétní styl, dovoluje to více prostoru.
Pravda...

Lepší je display: none než visibility: hidden.
Nevím, jak mě to napadlo, ale říkal jsem si, že to vypadá nějak divně. Díky =)

Pokud nastavíš name u inputů tak jak jako já, PHP z toho rovnou udělá pole hodnot.
No vypadá to moc hezky, jednoduše a předpokládám, že to bude dělat i to, co jsem chtěl ale ještě nepřišel na způsob, jak to udělat :D. Jen jsem teď nepřišel na způsob, jak k tomu poli přistupovat. To je klasické pole? A ukládá to 0 a 1 nebo true a false? Něco jsem zkoušel, ale zatím jsem z toho nic nevytáhl, tak nevím :D

Nejspíš chceš skrýt jen checkboxy, přendej tedy třídu vyber tabulce.
Přesně, díky...

Tlačítko pro odeslání je <input type="submit" ...>; zobrazený text je v jeho atributu value.
Jo, jenže to mi po tom mojem visibility nějak nešlo najít, tak jsem to musel očůrat ... Hold někdy se člověk na to dívá a stejně neví, že to vidí :)

Ten JS jde trochu zjednodušit:
Tím jsem si byl více než jist, ale js jsem nechápal už na škole :D

Jinak díky moc...
juriad
Profil
Ano, keywords nemá vůbec cenu vyplňovat. Meta tagy » Další informace pro vyhledávače

SkyVessel:
> Je třeba formuláři přidat autocomplete="false", jinak po refereshi obnoví původní hodnoty.
To má fungovat jako, že po f5 zůstanou zaškrtnuté? To asi ne, protože mi to vždy najelo čisté :).
Mě lokálně při refreshi zůstala pole zaškrtnutá a kvůli tomu se to chovalo divně (pole bylo na začátku vždy bílé bez ohledu na zaškrtunutí). autocomplete=false naopak zajišťuje, že všechna pole budou nevyplněná/nezaškrtnutá.

V proměnné $_POST['vyber'] bude pole obsahující jednotlivé value zaškrtnutých checkboxů. Nezaškrtnuté se neodesílají, nikdy.
Například var_dump($_POST):
array(1) {
  ["vyber"]=>
  array(4) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
    [2]=>
    string(1) "5"
    [3]=>
    string(1) "7"
  }
}
Klidně si do toho value u checkboxů můžeš dát něco chytřejšího než jen pořádové číslo, třeba den-hodina (st-11, po-8 atp.).
SkyVessel
Profil
juriad:
Mě lokálně při refreshi zůstala pole zaškrtnutá a kvůli tomu se to chovalo divně (pole bylo na začátku vždy bílé bez ohledu na zaškrtunutí). autocomplete=false naopak zajišťuje, že všechna pole budou nevyplněná/nezaškrtnutá.
No tak tohle mě nenapadlo, protože jsem to zkoušel už se skrytými checkboxy...
V proměnné $_POST['vyber'] bude pole obsahující jednotlivé value zaškrtnutých checkboxů. Nezaškrtnuté se neodesílají, nikdy.
Jo, díky za praktickou ukázku. Pochopil jsem to a dokonce mi to i funguje :).

Teď jen nevím, jakým způsobem navrhnout tabulku. Jde mi o to, že třeba teď v březnu bych chtěl mít plán i na duben, v dubnu už plánovat na květen atd... Samozřejmě je více uživatelů. Předpokládám, že udělat dvě pole a pomocí implode to nějak sesmolit dohromady je asi pořádná blbost. Udělat to v jedné tabulce a použít vce buněk, nebo dělat pro každý měsíc tabulku zvlášť?
březen  ->  uživatel 1  -> den a, den b, den c, den d...
            uživatel 2  -> den a, den b, den c, den d...
            uživatel 3  -> den a, den b, den c, den d...
            uživatel 4  -> den a, den b, den c, den d...
duben  ->   uživatel 1  -> den a, den b, den c, den d...
            uživatel 2  -> den a, den b, den c, den d...
            uživatel 3  -> den a, den b, den c, den d...
            uživatel 4  -> den a, den b, den c, den d...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: