JavaScript Textfeld dynamisch in Formular einfügen

Vossen · 23. Juni 2011

Hallo zusammen,

ich habe ein statisches Formular mit Datum, Startort, Zielort und weiteren Feldern.
Nun möchte ich - ähnlich wie bei google maps - Zwischenziele einfügen können. Die möchte ich gerne dynamisch einfügen.
Sprich: erst ist nur das Formular mit den statischen Feldern vorhanden und ein Button "Zwischenziel hinzufügen".
Beim Klick auf den Button soll ein weiteres Input-Field für das Zwischenziel erzeugt werden. Alternativ kann auch schon ein Zwischenziel-Feld vorhanden sein, was dann dupliziert wird, wenn es ein weiteres Zwischenziel gibt.
Ich habe hier schon ein feines Snippet gesehen, was an sich auch funktioniert.
Leider habe ich das Problem, dass sich der JS-Code das Eltern-Element, also in diesem Fall den div-Tag sucht und damit arbeitet.
Bei mir fügt sich das ganze Formular aber in mehrere divs- und span-tags. Und das ist mein Problem:
ich bekomme das JS-Snippet nicht überzeugt, das Formularfeld anzugezeigen...

Statisches Formularfeld:

HTML:

    <!-- STARTORT -->
    <div class="row">
      <span class="inputname">
        Startort
      </span>
      <span class="inputfield">
        <input type="text" name="startort" value="" class="defbreite">
      </span>
    </div>

versuchtes dynamisches Feld:

HTML:

    <!-- ZWISCHENZIELE-->
    <div class="row">
      <div="zwischenziele">
        <span class="inputname">
          Zwischenziel
        </span>
        <span class="inputfield">
              <input type="text" size="20" name="textfeldname[]"><br>
              <input type="button" value="noch eins"onclick="clone_this(this)"><br />
        </span>
      </div>
    </div>

Funktionierender Code, der alleine wunderbar funktioniert...

HTML:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
    /**
      *  Das div, in welchem sich das erste input befindet, wird geclont
      **/
    
    tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
    
    
    /**
      *  das geklonte div wird vor dem Button eingefügt
      *  Syntax...Elternknoten.insertBefore(einzufügenderKnoten,KnotenVorDemEingefügtWerdenSoll);
      **/
    
    objButton.form.insertBefore(tmpNode,objButton);
    
    
    /**  Den Wert des eingefügten inputs wieder löschen
      * previousSibling ist der vorige Knoten eines Typs vor einem anderen Knoten...
      * in diesem Fall das neue div vor dem Button....firstChild wieder das erste Kindelement darin...also das input
      **/
      
    objButton.previousSibling.firstChild.value='';
    
}
//-->
</script>
</head>
<body>
<form>
 <div><input size="20" name="textfeldname[]" type="text"></div>
 <input value="noch eins" onclick="clone_this(this)" type="button">
</form>
</body>
</html>

Vielleicht hat einer eine Idee, wie ich das in meine Seite integrieren kann, sodass es funktioniert?!

Vielen Dank schon einmal für eure Mühe!

Bene

Bender86 · 23. Juni 2011

Ich habe eben etwas ähnliches in einer Rails Anwendung gemacht, allerdings mit jQuery und einem Template.

Vorrausgesetzt, du hast ein Template in einem Container mit id "input_template", dass die Klasse "hidden" hat, damit das Template versteckt ist. Dann könntest du mit jQuery:

Code:

function addField() {
  var copy   = $('#input_template').clone(true, true);
  var target = $('.inputfield');
  target.append(copy);
  target.children().removeClass('hidden');
}

In einer css:

Code:

.hidden {
  position:absolute;
  visibility:hidden;
}

Ich bin aber kein JavaScript Profi und benutze es nur soweit ich es grade für ein bisschen Schnickschnack in Rails Anwendungen brauche.

Von daher wird dir bestimmt jemand eine bessere Lösung anbieten können.

/edit

Da mir grade langweilig war, so könnte es z.B mit ein paar IDs gehen:

Code:

<html>
<head>
<title>Clone Something</title>
<script type="text/javascript">
<!--
function clone()
{
    cloned = document.getElementById('to_clone').cloneNode(true);
    target = document.getElementById('target');
    target.appendChild(cloned);
}
//-->
</script>
</head>
<body>
<div id="to_clone"><p>Hallo....</p></div>
<div id="target"></div>
<input value="More sheeps!!!" onclick="clone()" type="button">
</body>
</html>

Suche

JavaScript Textfeld dynamisch in Formular einfügen

Vossen

Ensign

Bender86

Lieutenant

Ähnliche Themen