Форум PHP программистов > Как делается "Плюсик"?

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Владимир55

11.10.2013 - 15:51

Наперед неизвестно, сколько строк потребуется в форме ввода - может быть, хватит одной, а может быть потребуется много. Случай это довольно типичный и я нашел в сети несколько реализаций этой проблемы.

Например, так (скриншот): рядом с окном формы видны "плюсик" и "минус". Если нужно еще одно окно, то по клику на плюсик оно добавляется ниже первого и так сколько угодно раз.

А если открыты лишние окна, то кликом на Минус их можно удалить.

Как осуществляется этот сервис?

SmorodinKA

11.10.2013 - 16:08

Я бы использовал библиотеку jquery и функцию prepend или append.

Владимир55

11.10.2013 - 16:17

jquery - такие тяжелые коды...

Не дадите ссылочку, где этот прием описан попонятнее?

SmorodinKA

11.10.2013 - 16:22

Владимир55
туда и не надо будет лезть. Допустим при клике на плюсик вызывается функция AddForm()

function AddForm() 
{
  n = n + 1;
  var div_form = document.getElementById("div_form");
  id_form = 'id' + n;
  $(div.form).append("<input type='text' onClick='' id=" + id_form +">");
}

а в html пишешь:

<FORM>
  <div id="div_form">
    Тут у тебя размещаются формы для ввода текста
  </div>
</FORM>

Я могу ошибиться в чем-то, так что пусть меня поправят более умные здесь люди. Я сам новичок :D

SmorodinKA

11.10.2013 - 16:23

Только надо будет не забыть в начале подключить jquery

Владимир55

11.10.2013 - 16:39

Может, оно и работает, а может и не работает - "Плюсика" то нет! На что кликать для вызова?

SmorodinKA

11.10.2013 - 16:44

Владимир55
То есть изначально у тебя совсем ни одной формы нет? Если так, то надо сделать ссылочку какую-то, чтобы добавить первый элемент.

Владимир55

11.10.2013 - 17:03

Формы есть и их много.

В общем перечне форм есть такой блок их шести импутов:

	<p class="df">
	<input type="text" name="abc" value=""  style="text-align:center;width:270px" />
	<input type="text" name="bcd" value=""  style="text-align:center;width:180px" />
	<input type="text" name="cde" value=""  style="text-align:center;width:100px" />
	<input type="text" name="def" value=""  style="text-align:center;width:100px" />
	<input type="text" name="efg" value=""  style="text-align:center;width:110px" />
	<input type="text" name="fgh" value=""  style="text-align:center;width:110px" /></p>

Сюда заносятся сведения об одном клиенте.

Но если клиентов два, то нужно кликнуть на Плюсик чтобы открылся еще такой же блок.

Если клиентов три, то кликунуть еще раз и т.д.

Естественно, именам надо добавлять число, что бы обработчик их различил.
Например, в исходном блоке имеется импут с name="abc". При клике на Плюсик и добавлении второго блока появится импут с name="abc1", при втором клике на Плюсик должен появиться блок, содержащий импут с name="abc2" и т.д.

SmorodinKA

11.10.2013 - 17:19

Ну сделай кнопочку "Добавить клиента" и по ней вызывай функцию AddForm(), только ее надо изменить немного.

Владимир55

11.10.2013 - 17:24

Цитата (SmorodinKA @ 11.10.2013 - 13:19)

Ну сделай кнопочку "Добавить клиента" и по ней вызывай функцию AddForm(), только ее надо изменить немного.

Так вот в этом и заковыка - не получается!

SmorodinKA

11.10.2013 - 19:13

Создаешь два файла.
1. index.php Вот его код:

<html>

<head>
  <title></title>

  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  <script type="text/javascript">
    var n=0;
    function AddClient()
    {
      n = n + 1;
      var client_form = document.getElementById("client_form");
      link = 'createNewClient.php?id=' + n;
     var http = createRequestObject();
      if( http )
      {
        http.open('get', link);
        http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        http.send();
        http.onreadystatechange = function ()
        {
          if(http.readyState == 4)
          {
            if ((http.responseText != 0))
            {
              $(client_form).append(http.responseText);
            }
          }
        }
        http.send(null);
       }
       else
       {
         document.location = link;
       }
    }

  function createRequestObject()
  {
    try { return new XMLHttpRequest() }
    catch(e)
    {
      try { return new ActiveXObject('Msxml2.XMLHTTP') }
      catch(e)
      {
        try { return new ActiveXObject('Microsoft.XMLHTTP') }
        catch(e) { return null; }
      }
    }
  }
  </script>

</head>

<body>

    <FORM>
     <div><a href="#" onClick="AddClient();return false;">Добавить клиента</a></div>
     <div id="client_form">
	  <p class="df">
	  <input type="text" name="abc" value=""  style="text-align:center;width:270px" />
	  <input type="text" name="bcd" value=""  style="text-align:center;width:180px" />
	  <input type="text" name="cde" value=""  style="text-align:center;width:100px" />
	  <input type="text" name="def" value=""  style="text-align:center;width:100px" />
	  <input type="text" name="efg" value=""  style="text-align:center;width:110px" />
	  <input type="text" name="fgh" value=""  style="text-align:center;width:110px" /></p>
     </div>
   </FORM>

</body>

</html>

2. createNewClient.php
Вот его код:

<?php
$id_form = 'id' . $_GET['id'];
$name1 = 'abc' . $_GET['id'];
$name2 = 'bcd' . $_GET['id'];
$name3 = 'cde' . $_GET['id'];
$name4 = 'def' . $_GET['id'];
$name5 = 'efg' . $_GET['id'];
$name6 = 'fgh' . $_GET['id'];
?>
<div id="<?=$id_form;?>">
	  <p class="df">
	  <?php echo $name1 ?><input type="text" name="<?=$name1;?>" value=""  style="text-align:center;width:270px" />
	  <?php echo $name2 ?><input type="text" name="<?=$name2;?>" value=""  style="text-align:center;width:180px" />
	  <?php echo $name3 ?><input type="text" name="<?=$name3;?>" value=""  style="text-align:center;width:100px" />
	  <?php echo $name4 ?><input type="text" name="<?=$name4;?>" value=""  style="text-align:center;width:100px" />
	  <?php echo $name5 ?><input type="text" name="<?=$name5;?>" value=""  style="text-align:center;width:110px" />
	  <?php echo $name6 ?><input type="text" name="<?=$name6;?>" value=""  style="text-align:center;width:110px" />
	  </p>
</div>

Не забудь создать папку js и залить туда файл jquery-1.5.1.min.js. Думаю, найдешь в интернете. И все. Работает. Не лучшая реализация, без проверок на ошибки, но работает. Если подумаешь головой, то сможешь упростить код или сделать все в одном файле.

Быстрый ответ:

Здесь расположена полная версия этой страницы.