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.
Popularity: unranked
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
