jQuery: powielanie pól formularza

Autor: Arkadiusz Tobiasz 10 maja 2010

Dzięki jQuery możemy powielać niektóre pola naszego formularza w bardzo prosty sposób. Wartości wpisywane do tych pól są zapisywane wtedy w tablicy. Do naszego powielania pól formularza wykorzystamy plugin do jQuery o nazwie relCopy.
Na początku musimy zaopatrzyć się w bibliotekę jQuery oraz wspomniany plugin relCopy. Te dwa pliku umieszczamy na serwerze i się do nich odwołujemy w sekcji <head>…</head>:

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"
></script>
<script type="text/javascript" src="relCopy.js"></script>

Następnie w tej sekcji definiujemy również z wykorzystaniem jQuery link do usuwania dodanych uprzednio „klonów” naszych pól. Link będzie przydatny wtedy, gdy dodamy ich np. za dużo. Ponadto w przedostatniej linijce wywołujemy funkcję relCopy():

1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">usuń</a>';

$('a.copy').relCopy({ append: removeLink});
});
</script>

Możesz również narzucić limit liczby powielonych pól. Wystarczy, że zamienisz przedostatnią linijkę na:

1
$('a.copy').relCopy({limit: 5, append: removeLink});

Ostatnią rzeczą jaką musimy zrobić, to wkleić kod formularza i odwołać się do naszego pluginu:

1
2
3
4
5
<form method="post" action="test.php">
   <p class="clone"> <input name="pole[]" class="input" type="text"></p>
   <p><a href="#" class="copy" rel=".clone">dodaj kolejne</a></p>
   <input value="Wyslij" type="submit">
   </form>

Zauważ, że nazwa naszego pola jest tablicą pole[]. Możliwość powielenia danego pola formularza robimy za pomocą dodania linku, w którym dodajemy parametr rel=”.clone oraz umieszczenia tego pola między znacznikami <p>…</p> z parametrem class=”clone”. Nazwa clone może zostać zastąpiona inną, ważne jest jedynie, aby były takie same dla linku i pola formularza, a różne dla kolejnych pól, które będziemy chcieli powielić. Ponadto link ma jeszcze parametr class=”copy”. Jak możesz zauważyć jego wartość, czyli copy jest taka sama jak przy wywołaniu funkcji z sekcji <head>…</head>. Po kliknięciu w link, w jego miejsce pojawia się powielone pole formularza oraz link do usunięcia pola, który wcześniej zadeklarowaliśmy w sekcji <head>…</head>.

W jaki sposób uzyskać wysłane dane? Plik test.php może wyglądać np. tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
if($_POST['pole'])
{
     $array=$_POST['pole'];
     foreach($array as $pole)
     {
          if(strlen($pole)>0)
          {
               echo $pole.'<br><br>';
          }
     }
}
?>

Działający skrypt możecie znaleźć tutaj.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]