Google+ VKontakte Facebook Twitter Odnoklassniki Favorites More

Динамическое управление числом полей формы

Опубликовал: Tuesday, December 25, 2023 в категории AJAX, PHP | Пока нет комментариев

На сайтах часто приходится решать задачу добавления (или удаления) полей для уже существующей формы. Создадим форму заказа экскурсии для группы людей. В форму необходимо вводить ФИО каждого человека. Поля для ввода ФИО будем добавлять динамически при нажатии ссылки Добавить человека. Также может возникнуть необходимость удалить человека из списка. Файлы примера расположены на компакт-диске в папке book_primers/2-4. В файле index.php создадим форму с необходимыми полями. Начальный вид страницы представлен на рис. 2.14. Содержимое файла index.php приведено в листинге 2.16. Экскурсии выбираем из выпадающего списка. Рассматриваемый пример будем делать без использования баз данных, поэтому каждое значение option будет содержать цену и название экскурсии, разделенные символом ;. Первое поле input для ввода ФИО имеет id=name1. Последующие созданные поля будут иметь id=name2, name3 и т. д. Так как эти поля могут создаваться и удаляться в произвольном порядке, необходимо иметь указатель на последний созданный ID. Оно будет храниться в скрытом поле input с id=counted. Необходимо иметь скрытое поле с указанием удаляемого элемента, его значение будет устанавливаться при нажатии на ссылку Удалить перед передачей значений формы xajax-функции Delete_Input.

Рис. 2.14. Первоначальный вид формы

Листинг 2.16

<?php

// подключение библиотеки

require_once ("xajax_core/xajax.inc.php");

// подключение внешних файлов require_once ("add_input.php"); require_once ("delete_input.php"); require_once ("new_path.php"); require_once ("result.php");

// создать новый xajax-объект

$xajax = new xajax();

// регистрация функций

$xajax->register(XAJAX_FUNCTION,"Add_Input");

$xajax->register(XAJAX_FUNCTION,"Delete_Input");

$xajax->register(XAJAX_FUNCTION,"New_Path");

$xajax->register(XAJAX_FUNCTION,"Result");

// разрешаем обрабатывать xajax асинхронные запросы

$xajax->processRequest();

// подключение к базе данных

require_once("mybaza.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title> Пример 4 (глава 2)к книге "XAJAX" </title>

<?php $xajax->printJavascript(”); ?>

</head>

<body>

<!-шапка ->

<div id=header1><b>Примеры к книге "XAJAX" (глава 2 пример 4)<br>

Динамическое управление количеством полей формы </b></div>

<br>

<!-Форма ->

<div id=’div1′>

<form id=’Form1′ action=’javascript:void(null);’ onsubmit=’ xajax.$("Button_Form1").disabled=true; xajax.$("Button_Form1").value="Подождите…"; xajax_Result(xajax.getFormValues("Form1"));’>

<table>

<!-маршрут ->

Экскурсии на

<?php

echo date(‘Y-m-d’,strtotime("today + 1 day"));

?>

<br>

<select name=’select_path’ id=’select_path’ onchange=’xajax_New_Path(xajax.getFormValues("Form1"));’>

<option value="550;Домбай" selected>Домбай 650 руб.

<option value="700;Архыз">Архыз 700 руб.

<option value="400;Медовые водопады">Медовые водопады 400 руб.

<option value="650;Приэльбрусье">Приэльбрусье 650 руб.

<option value="450;Чегемские водопады">Чегемские водопады 450 руб.

</select>

<br><br>

<!-скрытый счетчик ->

<input type=’hidden’ name=’count’ id=’count’ value=’1′>

<input type=’hidden’ name=’pay’ id=’pay’ value=’650′>

<input type=’hidden’ name=’countid’ id=’countid’ value=’1′>

<input type=’hidden’ name=’delete’ id=’delete’ value=’0′>

<!-вывод информации ->

Стоимость экскурсии (руб.)

<div name=’pay1′ id=’pay1′>650</div>

Кол-во

<div name=’people’ id=’people’>1</div>

Сумма (руб.)

<div name=’payall’ id=’payall’>650</div>

Телефон для контакта<br>

<input type=’text’ name=’phone’ id=’phone’ size=12 maxlength=12><br><br>

<!-состав группы ->

Состав группы (минимум 1 человек): <br>

<br>

<input type=’text’ name=’name1′ id=’name1′

value=’Введите ФИО’ size=50 maxlength=50><br><br>

<!-ссылка Добавить ->

<a href=’javascript:void();’ onclick=’ xajax_Add_Input(xajax.getFormValues("Form1"));’>

Добавить человека</a>

<br><br>

<input type=’submit’ id=’Button_Form1′ value=’Подать заявку ->’ >

</div>

<div id=’result’>

</div>

</body>

</html>

Рис. 2.15. Вид формы после добавления полей input

При нажатии на ссылку Добавить человека, вызывается xajax-функция Add_Input, расположенная в файле add_input.php (листинг 2.17). При этом для добавления поля input используем response-метод insertInputAfter. Затем добавляем элементы <br> и <span>, в элемент <span> вставляем ссылку на удаление элемента input и пересчитываем заново сумму платежа. Вид формы после добавления нового поля иллюстрирует рис. 2.15.

ЗАМЕЧАНИЕ

Элементы <span> и даже <br> должны иметь свой уникальный ID, чтобы при удалении поля не изменился вид формы.

Листинг 2.17

<?php

function Add_Input($Id)

{

$objResponse = new xajaxResponse();

// создать input

$countid=$Id[countid]+1;

$objResponse->insertInputAfter ("name1","input","name".$countid,"name".$countid);

// вставить <br>

$objResponse->insertAfter("name1","br","br".$countid);

// установить стили

$objResponse->assign("name".$countid,"size","50");

$objResponse->assign("name".$countid,"value","Введите ФИО");

// вставить <span> для ссылки удалить

$objResponse->insertAfter("name".$countid,"span","span".$countid);

// ссылка удалить

$a="<a href=’javascript:void();’ onclick=’document.getElementById(\"delete\").value=".$countid."; xajax_Delete_Input(xajax.getFormValues(\"Form1\"))’>Удалить</a>";

$objResponse->assign("span".$countid,"innerHTML",$a);

// установить новый countid

$objResponse->assign("countid","value",$countid);

// установить новый count

$objResponse->assign("count","value",$Id[count]+1);

// получить цену

//$pay1=substr($Id[select_path],0,strpos($Id[select_path],";"));

// установить цену, кол-во, сумму

$objResponse->assign("pay1","innerHTML",$Id[pay]);

$objResponse->assign("people","innerHTML",$Id[count]+1);

$objResponse->assign("payall","innerHTML",$Id[pay]*($Id[count]+1));

return $objResponse;

}

?>

При нажатии на ссылку Удалить, вызывается xajax-функция Delete_Input, расположенная в файле delete_input.php (листинг 2.18). При этом для удаления поля input используем response-метод remove. Необходимо удалить не только элемент input, но и элементы <br> и <span>, а также заново пересчитать сумму платежа.

ЗАМЕЧАНИЕ

При нажатии на ссылку удаления перед вызовом функции Delete_Input, необходимо изменить значение скрытого поля delete на ID удаляемого элемента input.

Листинг 2.18

<?php

function Delete_Input($Id)

{

$objResponse = new xajaxResponse();

// удалить input

$objResponse->remove("name".$Id[delete]);

// удалить ссылку

$objResponse->remove("span".$Id[delete]);

// удалить br

$objResponse->remove("br".$Id[delete]);

// установить новый count

$objResponse->assign("count","value",$Id[count]-1);

// получить цену

$pay1=substr($Id[select_path],0,strpos($Id[select_path],";"));

// установить цену, кол-во, сумму

$objResponse->assign("pay1","innerHTML",$pay1);

$objResponse->assign("people","innerHTML",$Id[count]-1);

$objResponse->assign("payall","innerHTML",$pay1*($Id[count]-1));

return $objResponse;

}

?>

При изменении экскурсии по событию onchange вызывается xajax-функция New_Path, расположенная в файле new_path.php (листинг 2.19). При этом необходимо пересчитать сумму платежа. Вид формы после выполнения xajax-функции иллюстрирует рис. 2.16.

Листинг 2.19

<?php

function New_Path($Id)

{

$objResponse = new xajaxResponse();

// получить цену

$pay1=substr($Id[select_path],0,strpos($Id[select_path],";"));

// установить новый pay

$objResponse->assign("pay","value",$pay1);

// установить цену, кол-во, сумму

$objResponse->assign("pay1","innerHTML",$pay1);

$objResponse->assign("people","innerHTML",$Id[count]);

$objResponse->assign("payall","innerHTML",$pay1*$Id[count]);

return $objResponse;

}

?>

Рис. 2.16. Изменение данных после выбора другой экскурсии

Рис. 2.17. Вывод результата заявки

При нажатии на кнопку Подать заявку вызываем xajax-функцию Result, расположенную в файле result.php, передавая при этом ей все значения формы. В реальном проекте эту информацию следует заносить в базу данных, в примере мы формируем контент подтверждения о приеме заказа в блоке result (рис. 2.17). Содержимое файла result.php приведено в листинге 2.20.

ЗАМЕЧАНИЕ

Для переноса блока вывода результата в зону видимости используем JavaScript-

функцию scrollIntoView(). При этом используется response-метод script.

Листинг 2.20

<?php

function Result($Id)

{

$objResponse = new xajaxResponse();

$text="";

$text="Ваша заявка принята<br>";

// получить название экскурсии и цену

$pay=substr($Id[select_path],0,strpos($Id[select_path],";"));

$path=str_replace($pay.";","",$Id[select_path]);

$text.="Экскурсия — ".$path."<br>";

$text.="Стоимость ".$Id[pay]." руб. <br>";

// список людей

$text.="В группе ".$Id[count]." человек <br>";

$text.="Список : <br>";

for($i=1,$j=1;$i<=$Id[countid];$i++)

{ if(isset($Id[‘name’.$i]))

{

$text.=$j.". ".$Id[‘name’.$i]."<br>";

$j++;

}

}

// общая сумма

$text.="<br>Общая сумма ".$Id[pay]*$Id[count]." руб. <br>";

// телефон

$text.="<br>С Вами свяжется менеджер по указанному Вами телефону — ".$Id[phone];

// вывести в блок result

$objResponse->assign("result","innerHTML",$text);

// кнопку установить

$objResponse->assign("Button_Form1","value","Подать заявку ->");

$objResponse->assign("Button_Form1","disabled",false);

// блок в поле видимости

$objResponse->script("document.getElementById (‘result’).scrollIntoView();");

return $objResponse;

}

?>

Источник: Петин В. А., Сайт на AJAX под ключ. Готовое решение для интернет-магазина. — СПб.: БХВ-Петербург, 2011. — 432 с.: ил. + CD-ROM — (Профессиональное программирование)

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *