Bardziej elastyczny skrypt dodawania pola

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Bardziej elastyczny skrypt dodawania pola

JamalBIG Zobacz profil	26.08.2011, 13:39:54 Post #1
Grupa: Zarejestrowani Postów: 496 Pomógł: 1 Dołączył: 16.01.2008 Skąd: Świnoujście Ostrzeżenie: (0%)	Witam Mógł bym prosić o pomoc w zmodyfikowaniu poniższego kodu JavaScript tak aby mógł obsługiwać więcej niż jedno pole w formularzu (skrypt dodaje pola w przypadku jeżeli ktoś chce dodać więcej pozycji a ja potrzebuje go do obsługi kilku pól np. zainteresowania, osiągnięcia itp., nie chce powielać kilka razy tego samego kodu zmieniając tylko id), dopiero się 'uczę' tego języka dlatego wszelkie uwagi i podpowiedzi będą na wagę złota Plik js: Kod var addElement = function(){ var count = document.getElementById('counter'); //uchwyt do licznika elementow var counter = parseInt(count.value); //pobieramy wartosc licznika elementow counter += 1; //zwiekszamy ja o 1 count.value = counter; //i aktualizujemy var container = document.getElementById('elements'); //uchwyt do bloku w ktorym //beda pojawiac sie nowe elementy var newDiv = document.createElement('div'); //tworzymy nowy div, ktory potem //wstawimy do kontenera newDiv.setAttribute('id','div'+counter); //dodajemy mu atrybut id w celu //mozliwosci usuniecia tego elementu newDiv.innerHTML = '<input id="element'+counter+'" type="text" class="text" id="element[]" value="" /><span class="removeelement" onclick="removeElement(\'div'+counter+'\')">Usuń</span>'; //jako zawartosc html nowego diva dodajemy kolejne elementy - pole tekstowe //o unikalnym, inkrementowanym ID //i spana z wywolaniem akcji usunienia konkretnego bloku div container.appendChild(newDiv); //tutaj dodajemy kolejne "dzieci" - nowe elementy //dla kontenera elementow } var removeElement = function(removeId){ //jako paramter przechwytujemy id bloku do usuniecia var container = document.getElementById('elements'); //tworzymy uchwyt do kontenera elementow var toRemove = document.getElementById(removeId); //tworzymy uchwyt to obektu do usuniecia container.removeChild(toRemove); //i usuwamy "childa" z kontenera;) } Plik html [HTML] pobierz, plaintext <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="funkcje.js"></script> <style type="text/css">@import url("style.css");</style> </head> <body> <form name="form" action="" method="post"> <input type="hidden" value="0" id="counter" /> <span class="addelement" onClick="addElement();"> Dodaj następny element... </span> <div id="elements"> </div> <input type="submit" value="Wyślij" class="submit" /> </form> </body> </html> [HTML] pobierz, plaintext