Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Динамическое добавление/удаление блока

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (3): [1] 2 3 »   

> Описание: как средствами jquery добавлять/удалять дополнительные поля
Поиск в теме | Версия для печати
natariga
Отправлено: 12 Сентября, 2011 - 12:37:06
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
Доброе время суток, уважаемые магистры и любители!

Как то стою в тупике и никак не могу разрулить даже на уровне схематичном следующую задачу:

Есть блок в регистрации :
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="ContainerOwnExpert">
  3.   Имя пользователя:
  4.   <input type="text" name="NameOwnExpert" value=""  />
  5.   Краткая информация о нем:
  6.   <textarea name="shortAboutOwnExpert" cols="55" rows="3"></textarea>
  7. </div>
  8. <input type="button" class="AddOwnExpert" name="AddOwnExpert" value="Добавить еще одного Эксперта" />
  9.  


Требуется:

Первый раз на форме регистрации есть этот блок и кнопка Добавить (недоступная)

После того, как ввели какие-то символы в поля первого блока, кнопка Добавить становится доступной.

По нажатию на кнопку добавляется между 1-м блоком и кнопкой 2-й блок с такими же полями.

И так дальше, макимум 10 раз (к примеру, ограничение берется из переменной).

А по кнопке уже РЕГИСТРАЦИЯ эти поля отправляются на сервер.

Как это реализовывать? Просто схематично, без детального описания, чтоб просто понять логику и инструменты. Подскажите плис...
Растерялся
вот тут накидала пример
http://hpsite[dot]natariga[dot]lv/test_gruppafiles.php
 
 Top
LIME
Отправлено: 12 Сентября, 2011 - 12:51:01
Post Id


Активный участник


Покинул форум
Сообщений всего: 10732
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)
ну если знаете JS то
делаем обработчик события онклик для кнопки "добавить" в котором
счетчик добавлений проверяем на 0
уменьшаем его
создаем новый элемент и аппендчайлд к элементу <div class="ContainerOwnExpert">
вроде все если схематично
 
 Top
Viper
Отправлено: 12 Сентября, 2011 - 13:37:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Можно ещё склонировать через clone()


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
natariga
Отправлено: 12 Сентября, 2011 - 15:10:16
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
не, настолько схематично я примерно догадывалась. надо чуток поподробнее.
Лучше средствами jquery, потому что так попроще, я больше понимаю чем в JS, и потом он все равно уже подключен по другим надобностям на странице.

Какие использовать, назовем это, команды:

append, insertAfter?

я не дока, я только учусь

наведи, плис, поподробнее, а я все сама прочитаю.

И как мне формировать массив из этих введенных инпутов, чтоб по кнопке Зарегистрироваться, я могла их постом отправить....

Мне тут всегда очень хорошо помогают, я много учусь на Вашем форуме, что теперь даже перед такой страшной задачей не пасую, и думаю вместе разберемся!
Закатив глазки
 
 Top
natariga
Отправлено: 12 Сентября, 2011 - 21:48:43
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
ну вот, порадовалась, что тут помогают раньше времени!!! ау Ниндзя

Меня чуток не так поняли. Мне не просто один инпут надо добавлять, а по кнопке Добавить надо создавать точно такой же div как ContainerOwnExpert. И это в примере в нем пару полей, в полном коде там еще и аякс подгрузка файла, но это позже.
Пока надо добиться просто полного добавления diva со всем его содержимым....

как? Не понял
(Добавление)
круто! начало сообразила и сделала. А?!
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.         $(".AddOwnExpert").click(function() {
  4.                 $(".ContainerOwnExpert").filter(':first').clone().appendTo('#person_info');
  5.         });
  6.  
  7. });
  8.  

но Вы все равно не уходите далеко, посматривайте на топик, потому что точно не смогу одна разобраться. Правда, очень сложная задача!

Ну да, тогда не получается вставить Удалить. Вернее не получается, чтоб удалялся соответсвующий div
Вот как сделала и не выходит
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3.  
  4.         $(".AddOwnExpert").click(function() {
  5.  
  6.                 $(".ContainerOwnExpert").filter(':first').clone().appendTo('#BlockInfoAboutExperts');
  7.         });
  8.         $(".DelOwnExpert").click(function() {
  9.                 $(this).parents('.ContainerOwnExpert').remove();
  10.         });
  11. });
  12.  

(Отредактировано автором: 12 Сентября, 2011 - 22:55:09)

 
 Top
Viper
Отправлено: 13 Сентября, 2011 - 07:20:51
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
natariga думается вместо parents надо closest


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
SAD
Отправлено: 13 Сентября, 2011 - 07:42:44
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
natariga пишет:
Правда, очень сложная задача!


Радость

На самом деле ничего сложного
 
 Top
natariga
Отправлено: 13 Сентября, 2011 - 08:28:31
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
Viper пишет:
closest

неа, не отрабатывает как надо. вообще на так отрабатывает (по линку можно посмотреть, что получается)
http://hpsite[dot]natariga[dot]lv/test_gruppafiles.php
(Добавление)
SAD пишет:
На самом деле ничего сложного

Хе, это только самый простой элемент задачи.
Ок. Может я вообще не так разложила и не тем путем начинаю идти.
Стоит следующая задача.
По кнопке добавить Эксперта открывается первый див, в котором поля:
- имя
-коротко о себе
(которые проверяются на допустимость)
- загрузить фото, в которое мы будем грузить, используя аякс подгрузку, которую уже один раз с Вами прошли (там и удаление фото).
Кнопка Удалить - удаляет весь этот блок.

Кнопка Добавить неактивная до тех пор, пока обязательное поле не введено корректно (к примеру хотя бы имя).
По кнопке Добавить появляется еще точно такой же блок, с чистыми полями, в котором все те же действия возможны.

И так, к примеру, 10 раз (счетчик из переменной)

А внизу кнопка Загрузить, по которой массив имен, инфо-коротко и имен-файлов - передается на запись.

ВОТ А?!

(Отредактировано автором: 13 Сентября, 2011 - 08:49:21)

 
 Top
SAD
Отправлено: 13 Сентября, 2011 - 09:06:11
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).parent('div').remove()
 
 Top
natariga
Отправлено: 13 Сентября, 2011 - 09:12:48
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
SAD пишет:
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).parent('div').remove()


неа
 
 Top
DeepVarvar Супермодератор
Отправлено: 13 Сентября, 2011 - 09:28:34
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).parent().find('.ContainerOwnExpert').eq(0).remove();
 
 Top
natariga
Отправлено: 13 Сентября, 2011 - 09:32:38
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
DeepVarvar пишет:
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).parent().find('.ContainerOwnExpert').eq(0).remove();


тоже нет Растерялся
(Добавление)
может как то изначально изменить и делать пронумерованные дивы (может глупость, конечно, сказала)
 
 Top
DeepVarvar Супермодератор
Отправлено: 13 Сентября, 2011 - 09:36:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. $(".DelOwnExpert").live("click",function() { ...
 
 Top
SAD
Отправлено: 13 Сентября, 2011 - 09:40:17
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
короче рассказываю. после каждого добавления блока нужно переопределять событие удаления. или использовать live()
(Добавление)
DeepVarvar, опередил)
 
 Top
natariga
Отправлено: 13 Сентября, 2011 - 09:49:22
Post Id


Частый гость


Покинул форум
Сообщений всего: 199
Дата рег-ции: Май 2011  


Помог: 0 раз(а)
Супер!
Прошел ваш совместный вариант
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2.         $(".DelOwnExpert").live("click",function() {
  3. $(this).parent('div').remove();
  4.         });
  5.  
  6.  


буду двигаться дальше почуток. Теперь мне надо чтоб поля были чистыми, а то она клонирует уже с заполненными
 
 Top
Поиск в теме | Версия для печати
Страниц (3): [1] 2 3 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB