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
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

W sumie jak na początkującego to jest dobrze (IMG:style_emoticons/default/wink.gif) Cośtambym zoptymalizował jednak (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/wink.gif)
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 - 11:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn