✔ Dynamisch Erweiterbares Formular (jQuery)

[H4ckHunt3r]

Guten Morgen,
ich habe da nen kleines Problem.

Ich möchte ein Formular für Keywords erstellen,
welches dem entsprechend auch dynamisch erweiterbar sein muss.

Ich habe bereits was geschrieben was denke ich eigentlich funktionieren müsste.

Es funktioniert allerdings nur einmal und dann nicht mehr.

Hier mal mein Code:

  <div id="keywords-l0">
  <input type="text" name="keyword-l0[0]" size="30" /> <a class="keyword add l0[0]"><img src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/128/Symbol-Add.png" style="width:16px;" alt="[+]" title="Weiteres Keyword Hinzuf&uuml;gen" /></a>
  </div>

$(document).ready(function(e) {
    $("a.keyword.add").click(function(e) {
        var langId = $(this).attr('class').replace("keyword add l","");
		var langId2 = langId.split("[");
		var lang = langId2[0];
		var id = langId2[1].replace("]", "");
		id++;
		
		var html = '<input type="text" name="keyword-l' + lang + '[' + id + ']" size="30" /> <a class="keyword add l' + lang + '[' + id + ']"><img src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/128/Symbol-Add.png" style="width:16px;" alt="[+]" title="Weiteres Keyword Hinzuf&uuml;gen" /></a>';
		$(this).replaceWith(html);
    });
});

Ich hoffe mir kann jemand beim beheben des Problems Helfen.
Achja das icon habe ich nur zu Testzwecken da drin.

 

[erik s.]

Dein zur Laufzeit neu erzeugtes ANCHOR-Element ist was die Events angeht noch jungfräulich.
Davon ausgehend, dass du die Formulardaten per PHP weiterverarbeiten möchtest, würde ich es an deiner Stelle in etwa so machen:

<div id="keywords-l0">
  <input type="text" name="keyword-l0[]" size="30" />
</div>
<a class="keyword add" onclick="javascript:addKeyword('0');">
  <img src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/128/Symbol-Add.png" style="width:16px;" alt="[+]" title="Weiteres Keyword Hinzuf&uuml;gen" />
</a>

var addKeyword = function(langid)  {
  var newInput = $('<br /><input type="text" name="keyword-l'+langid+'[]" size="30" />');
  $('#keywords-l'+langid).append(newInput);
};

Falls du die Indizes wirklich brauchen solltest, ginge das auch so:

<div id="keywords-l0">
  <input type="text" name="keyword-l0[0]" size="30" />
</div>
<a class="keyword add" onclick="javascript:addKeyword('0');">
  <img src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/128/Symbol-Add.png" style="width:16px;" alt="[+]" title="Weiteres Keyword Hinzuf&uuml;gen" />
</a>

var addKeyword = function(langid)  {
  var newIndex = $('#keywords-l'+langid).find('input').length;
  var newInput = $('<br /><input type="text" name="keyword-l'+langid+'['+newIndex+']" size="30" />');
  $('#keywords-l'+langid).append(newInput);
};

 

[H4ckHunt3r]

Ouh mann,
da hätte man auch selbst noch drauf kommen können >.<

Funktioniert wunderbar, habe um den String für newInput das $() weg gelassen.

Vielen Dank für die Hilfe.