Эта кнопка передает функции JavaScript что нужно добавить еще одно поле. В интернете есть множество скриптов позволяющих это сделать, однако, для тех кто незнаком с JavaScript, или еще плохо в нем разбирается, понять как работает такой скрипты задача довольно сложная. В этой статье я постараюсь подробно описать, как создать добавление поля в форму методами PHP.
Задача: в форме есть поле, нужно нажатием на кнопку добавить еще одно.
Основная проблема в казалось бы простой задаче: у формы не может быть два действия action, если бы можно было задать их два, то проблемы бы не стояло, мы бы просто делали два обработчика, один обрабатывает форму, другой – добавляет поля.
Логика скрипта:
Справочники, инструменты, документация<script type="text/javascript" language="javascript">
function Cheker() {
with(document.forms.form1) {
if (check.checked == false)
/* check есть id элемента chekbox */
{
/* button1 есть id элемента button который отправляет форму */
button1.value = "Отправить";
} else {
button1.value = "Добавить строку";
}
}
}
</script>Окончательно страница будет выглядеть так:
<script type="text/javascript" language="javascript">
function Cheker() {
with(document.forms.form1) {
if (check.checked == false) {
button1.value = "Отправить";
} else {
button1.value = "Добавить строку";
}
}
}
</script>
<?php
/*---Проверяем была ли отправлена форма---*/
if (!isset($_POST['added']))
/*---Фома не была отправлена---*/
{
?>
<form action="index.php" method="post" name="form1">
<input name="text[0]" type="text" /><br>
<input name="check" type="checkbox" value="addrow" onChange="Cheker()" />
<!-- Поле added не передает никакого значения, однако сообщает обработчику, что форма уже отправлялась -->
<input name="added" type="hidden" value="" />
<input name="button1" type="submit" value="Отправить" />
</form>
<?php
}
else
/*---Форма отправлена---*/
{
/*---Проверяем стоит ли галочка "Добавить поле"---*/
if (!empty($_POST['check']))
/*---Добавляем еще одно поле---*/
{
?>
<form action="index.php" method="post" name="form1">
<?php
/*---Проверяем было ли уже добавлено поле---*/
if (!isset($_POST['row_count']))
/*---Поле добавлено не было, нужно добавить еще одно---*/
{
// $row_count - счетчик количества полей в форме.
$row_count=2;
for ($i=0; $i<($row_count - 1); $i++)
{
?>
<input name="text[<?php echo($i);?>]" type="text" value="<?php echo($text[$i])?>"/><br>
<?php
}
?>
<!--Строка с пустыми полями-->
<input name="text[<?php echo($i);?>]" type="text" value=""/><br>
<?
$row_count = $row_count + 1;
?>
<input name="row_count" type="hidden" value="<?php echo($row_count);?>" />
<?php
}
else
{
$row_count = $_POST['row_count'];
for ($i=0; $i<($row_count - 1); $i++)
{
?>
<input name="text[<?php echo($i);?>]" type="text" value="<?php echo($text[$i]);?>"/><br>
<?php
}
?>
<!--Строка с пустыми полями-->
<input name="text[<?php echo($i);?>]" type="text" value=""/><br>
<?
$row_count = $row_count + 1;
?>
<input name="row_count" type="hidden" value="<?php echo($row_count);?>" />
<?php
}
?>
<input name="check" type="checkbox" value="addrow" onChange="Cheker()"/>
<input name="added" type="hidden" value="" />
<input name="added" type="hidden" value="" />
<input name="button1" type="submit" value="Отправить" />
</form>
<?php
}
else
{
//Печатаем переданный массив.
print_r($_POST);
}
}
?>В этой статье я расскажу как быстро и без перезагрузки страницы добавлять и удалять поля из html формы с помощью jQuery. Начнем с постановки задачи. У нас есть некая html форма. В ней есть различные поля. Чаще всего с задачей добавления поля в форму сталкиваешься при загрузке изображений на сервер (например изображения товаров в интернет-магазине). Сначала создадим саму форму:
<form action="post" enctype="multipart/form-data" action="">
<div id="file_fields">
<input type="file" name="image[]" />
</div>
<p style="cursor:pointer" onclick="add_field()">добавить</p>
<input type="submit" value="Загрузить" />
</form>Как видите, поле для загрузки файла вынесено в отдельный слой div, зачем это сделано будет понятно ниже. Следующим шагом нужно создать javascript функцию add_field(), которая собственно и будет добавлять поле в форму:
function add_field() {
var form_field='<p style="cursor:pointer"><input type="file" name="image[]" /><span
onclick="$($(this).parent()).remove()">удалить</span></p>'
$('#file_fields').append(form_field);
}Что же она делает. Первой строкой создается переменная form_field, которая содержит код html элемента, который нужно добавить. Ниже я объясню весь код более детально. Ну а дальше, методом .append() jQuery мы добавляем созданный элемент в конец слоя с идентификатором file_fields.
Теперь подробнее об элементе, который мы добавляем к форме. Как видите, мы добавляем параграф, который содержит в себе поле для добавления файла, а также элемент span, в атрибуте onclick которого находится некая функция jQuery. Объясню что значит каждый из ее элементов:
$(this).parent() – метод .parent() возвращает родительский элемент (для элемента span родителем является параграф, который мы добавляем). Ключевое слово this указывает на текущий html элемент. Соответственно такая запись возвращает указатель (не знаю как правильно выразиться) добавляемого параграфа..remove() – этот метод jQuery удаляет выбранный элемент. Т.к. в аргументе стоит указатель на текущий параграф, то по клику на элемент span параграф будет удален. Получилось немного сумбурно, но это не главное.Вот в принципе и все, ничего сложного в этом примере нет. Главное, не забудьте подключить jQuery, а то работать не будет.