Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Bardziej elastyczny skrypt dodawania pola
JamalBIG
post
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 (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
wszerad
post
Post #2





Grupa: Zarejestrowani
Postów: 106
Pomógł: 18
Dołączył: 11.12.2008

Ostrzeżenie: (0%)
-----

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ć.
Go to the top of the page
+Quote Post

Posty w temacie
- JamalBIG   Bardziej elastyczny skrypt dodawania pola   26.08.2011, 13:39:54
- - Sephirus   W sumie jak na początkującego to jest dobrze Cośt...   27.08.2011, 14:53:45
- - wszerad   Nie ma to jak innerHTML nie:D Ja sobie napisałem ...   27.08.2011, 21:04:45

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 14.10.2025 - 08:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn