Blog
Web development: Hromadné zpracování checkboxů
| Zobrazit obsah | Zobrazit komentáře | Zobrazit pouze komentáře
|
Jak vyřešit odeslání zaškrnutých checkboxů z formuláře, která se vhodně používá
např. pro hromadné mazání položek z databáze. Nejznámějším příkladem z praxe
je použití ve webových rozhraních e-mailů. Pro demonstraci použijeme ukázkový
formulář checkBoxes-Form.php.
Odkaz
na ukázkový kód, který obsahuje i demonstraci správného označování, resp. odznačování, všech checkboxů pouze daného formuláře. Ostatní checkboxy nejsou ovlivněny.
checkBoxes-Form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>KAVALEK.NET - Check Boxes</title> </head> <body> <form id="checkBoxesForm" method="post" action="checkBoxes-Action.php"> <div> <input type="checkbox" name="checkbox[]" id="checkbox_1" value="1" /> Check box 1<br /> <input type="checkbox" name="checkbox[]" id="checkbox_2" value="2" /> Check box 2<br /> <input type="checkbox" name="checkbox[]" id="checkbox_3" value="3" /> Check box 3<br /> <input type="checkbox" name="checkbox[]" id="checkbox_4" value="4" /> Check box 4<br /> <input type="checkbox" name="checkbox[]" id="checkbox_5" value="5" /> Check box 5<br /> <input type="checkbox" name="checkbox[]" id="checkbox_6" value="6" /> Check box 6<br /> <input type="checkbox" name="checkbox[]" id="checkbox_7" value="7" /> Check box 7<br /> <input type="checkbox" name="checkbox[]" id="checkbox_8" value="8" /> Check box 8<br /> </div> <input type="submit" name="action" value="Upload" /> </form> </body> </html>
checkBoxes-Action.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>KAVALEK.NET - Check Boxes</title>
</head>
<body>
<?php
if(isset($_POST["checkbox"]) && isset($_POST["action"]) && ($_POST["action"] == "Upload")) {
printf("<h1>Checked checkboxes</h1>");
foreach($_POST["checkbox"] as $key => $value) {
printf("Checkbox with value %s was checked!<br />", $value);
}
printf("<br />");
// Show SQL delete command
$sql_where = "id='" . implode("' OR id='", $_POST["checkbox"]) . "'";
printf("DELETE FROM test_table WHERE %s", $sql_where);
}
?>
</body>
</html>
Největší využití nabízí výše uvedený skript zejména při hromadném odstraňování
záznamů z databáze (jak již bylo výše uvedeno). Jako ukázka slouží pouze výpis
tohoto příkazu v souboru checkBoxes-Action.php v části okomentované
jako Show SQL delete command. Pomocí funkce implode
a malé úpravy (prefix a sufix) docílíme požadovaného tvaru klauzule
WHERE. Jednoduchý a transparentní kód a stejně takové je i jeho
použití. Pro hromadné odstraňování se bude hodit i následující kód, tentokrát
v JavaScriptu, pro označení, resp. zrušení označení, všech checkboxů.
Uvedený kód můžeme vložit přímo do souboru checkBoxes-Form.php,
případně uložit do samotného souboru a poté vložit pomocí
<script type="text/javascript" src="checkBoxes.js"></script>
(s tím si ale určitě každý poradí). Důležité je procházet pouze
checkboxy daného formuláře (jediný parametr funkcí), abychom
neovlivňovali i jiné checkboxy, které by se mohly na stránce vyskytovat.
Obě funkce projdou všechny elementy daného formuláře a pokud se jedná
o checkbox, změní hodnotu checked na true,
resp. false.
checkBoxes.js
function select_all(e) {
for(var i = 0; i < document.getElementById(e).elements.length; i++) {
if(document.getElementById(e).elements[i].type == "checkbox")
document.getElementById(e).elements[i].checked = true;
}
}
function unselect_all(e) {
for(var i = 0; i < document.getElementById(e).elements.length; i++) {
if(document.getElementById(e).elements[i].type == "checkbox")
document.getElementById(e).elements[i].checked = false;
}
}
Nyní lze kdekoliv v kódu formuláře vytvořit ovládací prvek, např. takto:
<a href="javascript:void(0);" title="Select all" onclick="select_all('checkBoxesForm');">Select all</a>
<a href="javascript:void(0);" title="Unselect all" onclick="unselect_all('checkBoxesForm');">Unselect all</a>