ugrás a tartalomhoz

innerhtml ajax

tatarbj · 2010. Május. 17. (H), 11.28
Sziasztok! Egy kis segítséget szeretnék kérni: van egy elég nagy formom, amiben három olyan részem is van, ahol új tételeket tudok hozzáadni, mutatom:
username:
email:
...
végzettség neve:
végzettség szintje:
[ez az első, ebből többet is szeretnék adni, elsőre egyet jelenítek meg, majd mellette egy plusz gomb, amire katt és jön egy újabb ugyanilyen rész végzettég neve: végzettség szintje:...]
...
még egy hasonló és még egy ugyanilyen, mint a végzettséges (lényeg, három különböző :))

tehát amiben gondolkodom: innerhtml. Viszont hogy tegyem be ide a megfelelőt? Illetve valami szépség legyen ajaxos (vizuálisan jobban nézzen ki, mint csak simán beteszi oda az új divet). nézelődtem jquery-ben, de nem találtam okosat. Ha linkekkel láttok el az is jó, csak néhány indító gondolat kell :)

Előre is köszönöm, üdv tatarbj
‹ IE8 kompatibilitási nézet Megoldatlan hiba IE 7-8 ban, illetve input szöveg pozicionálás ›
 ■
1

Valami ilyesmi HTML esetén:

Poetro · 2010. Május. 18. (K), 00.26
Valami ilyesmi HTML esetén:
  1. <fieldset class="vegzettseg">  
  2.   <legend>Végzettség</legend>  
  3.   <div class="vegzettseg">  
  4.     <label>Végzettség neve: <input type="text" name="vegzettseg_neve[]" /></label>  
  5.     <label>Végzettség szintje: <input type="text" name="vegzettseg_szintje[]" /></label>  
  6.     <span class="add">+</span>  
  7.   </div>  
  8. </fieldset>  
Körülbelül ennyi a feladat.
  1. $(function () {  
  2.   var vegzettsegFieldset = $('fieldset.vegzettseg'),  
  3.       vegzettsegDiv = vegzettsegFieldset.find('div.vegzettseg:last'),  // Az utolsó elemet fogjuk majd klónozni  
  4.       add = vegzettsegDiv.find('span.add'),      // A hozzáadást végző 'gomb'  
  5.       addFields = function () {                  // Itt végezzük a hozzáadást  
  6.         var newVegzettseg = vegzettsegDiv.clone(); // Klonozzuk a divünket  
  7.         add.remove();                              // Eltávolítjuk az hozzaadó gombot  
  8.         vegzettsegDiv = newVegzettseg;             // Lecseréljük az utolsó elemet  
  9.         vegzettsegDiv.find(':text').val('');       // Kiürítjük a mezőket  
  10.         vegzettsegFieldset.append(vegzettsegDiv);  // Beszúrjuk az új elemet  
  11.         add = vegzettsegDiv.find('span.add').click(addFields);  // Aktiváljuk a hozzáadást.  
  12.       };  
  13.   add.click(addFields);  
  14. });