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:

    <fieldset class="vegzettseg">
      <legend>Végzettség</legend>
      <div class="vegzettseg">
        <label>Végzettség neve: <input type="text" name="vegzettseg_neve[]" /></label>
        <label>Végzettség szintje: <input type="text" name="vegzettseg_szintje[]" /></label>
        <span class="add">+</span>
      </div>
    </fieldset>
Körülbelül ennyi a feladat.

    $(function () {
      var vegzettsegFieldset = $('fieldset.vegzettseg'),
          vegzettsegDiv = vegzettsegFieldset.find('div.vegzettseg:last'),  // Az utolsó elemet fogjuk majd klónozni
          add = vegzettsegDiv.find('span.add'),      // A hozzáadást végző 'gomb'
          addFields = function () {                  // Itt végezzük a hozzáadást
            var newVegzettseg = vegzettsegDiv.clone(); // Klonozzuk a divünket
            add.remove();                              // Eltávolítjuk az hozzaadó gombot
            vegzettsegDiv = newVegzettseg;             // Lecseréljük az utolsó elemet
            vegzettsegDiv.find(':text').val('');       // Kiürítjük a mezőket
            vegzettsegFieldset.append(vegzettsegDiv);  // Beszúrjuk az új elemet
            add = vegzettsegDiv.find('span.add').click(addFields);  // Aktiváljuk a hozzáadást.
          };
      add.click(addFields);
    });