Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Bardziej elastyczny skrypt dodawania pola
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
JamalBIG
26.08.2011, 13:39:54
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 wink.gif

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 
  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <script type="text/javascript" src="funkcje.js"></script>
  6.         <style type="text/css">@import url("style.css");</style>
  7.     </head>
  8.     <body>
  9.         <form name="form" action="" method="post">
  10.             <input type="hidden" value="0" id="counter" />
  11.             <span class="addelement" onClick="addElement();">
  12. 				Dodaj następny element... 
  13. 			</span>
  14.             <div id="elements">
  15.             </div>
  16. 			<input type="submit" value="Wyślij" class="submit" />
  17.         </form>
  18.     </body>
  19. </html>
[HTML] pobierz, plaintext
Sephirus
27.08.2011, 14:53:45
W sumie jak na początkującego to jest dobrze wink.gif Cośtambym zoptymalizował jednak tongue.gif

[JAVASCRIPT] pobierz, plaintext 
  1. var elementsCount = 0;
  2.  
  3. var addElement = function(){
  4.     // Jak dla mnie liczba elementów jest niepotrzebna - ale może Ci się do czegoś tam przydawać sama liczba więc pozostawiłem zmienna
  5.     var container = document.getElementById('elements'); 
  6.     var newDiv = document.createElement('div'); 
  7.     newDiv.innerHTML = '<input type="text" class="text" id="element[]" value="" /><span class="removeelement" onclick="removeElement(this)">Usuń</span>';
  8.     container.appendChild(newDiv);
  9.    elementsCount++;
  10. }
  11. var removeElement = function(obj){
  12.     obj.parentNode.parentNode.removeChild(obj.parentNode);
  13.    elementsCount--;
  14. }
  15.  
[JAVASCRIPT] pobierz, plaintext


HTH wink.gif
wszerad
27.08.2011, 21:04:45
Nie ma to jak innerHTML nie:D
Ja sobie napisałem prostą funkcje:
[PHP] pobierz, plaintext 
  1. window['addHTML'] = function(){
  2. 	if(typeof arguments[0] === 'object') arguments = arguments[0]; 		
  3. 	var obj = document.createElement(arguments[0]);
  4. 	for(var i=1;i<arguments.length;i++){
  5. 		if(typeof arguments[i] === 'function'){
  6. 			arguments[i](obj);
  7. 		}else if(arguments[i].split('=')[0]=='text'){
  8. 			obj.innerHTML = arguments[i].split('=')[1];
  9. 		}else{
  10. 			obj.setAttribute(arguments[i].split('=')[0],arguments[i].split('=')[1]);
  11. 		}
  12. 	}
  13. 	obj.addHTML = function(){
  14. 		return this.appendChild(window['addHTML'](arguments));
  15. 	}
  16. 	return obj;
  17. }
[PHP] pobierz, plaintext

Użycie:
[PHP] pobierz, plaintext 
  1. var zmienna = 'moja_nazwa';
  2. var div = addHTML('div','class=klasa','id=id_elementu','text=zawartość_tekstowa','name='+zmienna,function(x){x.onclick = costam...}).addHTML(/*dodajemy kolejny element do tego elementu*/);
  3. //można też:
  4. div.addHTML(/*dodajemy kolejny element do tego elementu*/);
[PHP] pobierz, plaintext

Kod napisałem lata temu ale nadal z niego korzystam i nie chce mi się go zmieniać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.