02 февраля 2006

Выжить без JavaScript: выделенные чекбоксы

Была у меня такая стандартная задача.

Есть хтмл-форма. В ней таблица, в начале каждой строки есть чекбоксик, выделив который, мы помечаем эту строку на удаление. Затем по нажатию кнопки "Удалить выделенные" помеченные строки удаляются. Значение каждого чекбоксика - уникальное, и однозначно соответствует удаляемой строке.

Решение 1: JavaScript.

В обработчик события onclick кнопки "Удалить выделенные" пишем функцию на JavaScript, которая а) обходит все чекбоксы и собирает инфу об их выделенности, б) делает из значений выделенных чекбоксов список (просто строку с их перечислением через запятую), в) сохраняет эту строку в hidden-поле. Получается примерно так:

<input type="submit" name="delete"
value="Удалить выделенные"
onclick="document.getElementById
('selected').value=checkedValues('FormName');"/>

<input type="hidden" name="selected"
id="selected" value="" />

Здесь checkedValues() - эта та самая рукотворная функция на JavaScript.

На серверной стороне (а там стоит РНР) преобразуем список в массив:

<?
$selected = explode(",", $selected);
?>

Что мне не нравится в этом решении - нестандартность. Скажем, нет у броузера включённого JavaScript или библиотека с функциями недозагрузилась/пропала/неподключена - и всё, попа, функциональность не работает. Поэтому появилось

решение 2: РНР + HTML.

Матчасть: в результате этого кода будет а) создан переменная типа массив, б) следующему её элементу (в нашем случае первому, так как массив пустой) будет присвоено значение 4.

<?
$arr_example = array();
$arr_example[] = 4;
?>

То бишь "[]" означает "возьми следующий элемент". Данный простой код часто усложняют таким образом (получается то же, только грязнее):


<?
$arr_example = array();
$arr_example[sizeof($arr_example)] = 4;
?>

Так вот вернёмся к теме. Можно смело удалить обработчик onclick - за него всё сделает РНР и хтмл: будем использовать хитрое наименование переменных. Дело в том, что если назвать все хтмл-чекбоксы так:


<input type="checkbox"
name="selected[]" value="<?=$id?>"/>

то после субмита формы на стороне сервера появится переменная $selected типа "массив", проиндексированная последовательно (т.е. можно по ней пройтись циклом FOR, а не FOREACH, что есть быстрее). Более того, любимая explode() тут уже не понадобится. Ура!

4 комментов:

Ник комментирует...

Ха! Я узнал кое-что новое про эти злосчастные чекбоксы. Благодарствую.

Dmitry Kalabin комментирует...

дожили... маньяки-программисты в первую очередь думают о том как напихать в страницу побольше JavaScript, а только потом - "а можно ли вообще обойтись без JavaScript". :)

вроде на сколько я помню ненадо никакого "selected[]". Если просто проименовать чекбоксы одинаковыми именами, то в php будет массив (ну или как минимум список через разделитель).

посоветую в первую очередь основательно изучать HTML и протокол HTTP, а JavaScript - это баловство одно. ;)

A4 комментирует...

Согласен, что JavaScript не панацея, поэтому использую его в основном для помощи пользователю не делать глупых ошибок, а всё введённое проверяется на серверной стороне. Но гнать на него не надо: как ты будешь использовать HTTP для проверки заполения обязательных полей или проверки выделения хоть одного чекбокса? Да, в принципе можно, но только после перегрузки страницы, а это трафик, а это время, а это деньги.

Dmitry Kalabin комментирует...

Я просто говорю что надо знать основные функции реализованные основными стандартами, которыми для веба в первую очередь являются HTML и протокол HTTP.

Целая группа статей твоего блога построена на том, что ты "вынырнул" из каких-то неведомых глубин веб-программирования и обнаружил плавающие на поверхности вещи, такие как: input type="submit", особенности сабмита чекбоксов и т.д.
Те самые вещи которые уже довольно давно лежат в основе стандартов HTML и HTTP.
И если просто эти стандарты почитать, то не прийдётся во многих случаях огород городить левой пяткой за правым ухом. ;)

Отправить комментарий