jQuery: powielanie pól formularza

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.

Leave a Comment

20 − 3 =