[JavaScript] input felder dynamisch einfügen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [JavaScript] input felder dynamisch einfügen

    hallo,

    ich will per js neue input felder dynamisch an einer bestimmten position einfügen. das mache ich mit folgender funktion:
    Code:
    function doIt() {
    	content = document.getElementById('newElBG').innerHTML;
    	document.getElementById('newElBG').innerHTML = content + '<input type="text" name="bgText[]" id="bgText" value="" class="inputText" style="width:338px;"><br>';
    }
    eingefügt wird es hier:
    Code:
    <div id="newElBG"></div>
    	<input type="button" name="newElBG" onClick="doIt()" value="neues Element hinzufügen" class="inputButton">
    klappt auch beim ie wunderbar. ff macht aber probleme. wenn man ein neues element erstellt, werden die werte der vorherigen elemente nicht übernommen sondern gelöscht, was aber nicht passieren darf. weiß jemand wieso die value beim ff nicht übernommen wird?
    Erfahrungen vererben sich nicht jeder muss sie allein machen.

  • #2
    Firefox macht eigentlich nur, was du ihm sagst. Ein Teil des Qelltextes wird mit innerHTML entnommen und anschließend komplett überschrieben. Da die Werte der Felder so gesehen nicht im Quelltext stehen, können die auch nicht gelesen werden.

    Sauberer geht's mit dem DOM und document.createElement() bzw. appendChild()

    http://de.selfhtml.org/javascript/objekte/node.htm

    Kommentar


    • #3
      so habe ich es anfangs gemacht. habe dazu diese funktion benutzt:
      Code:
      function buildNewElement(parentID, childID) {
      	var newFields = document.getElementById(parentID).cloneNode(true);
      	var newField = newFields.childNodes;
      	var insertHere = document.getElementById(childID);
      	insertHere.parentNode.insertBefore(newFields,insertHere);
      }
      aufruf:
      Code:
      <div id="newElST"></div>
      <div id="parentSTBG">
      <input type="text" name="stText[]" value="" class="inputText" style="width:290px;"><br></div>
      <input type="button" name="newElST" onClick="buildNewElement('parentSTBG', 'newElST')" value="neues Element hinzufügen" class="inputButton">

      das problem dabei ist, das wenn das elternelement gefüllt ist, der text beim klonen in die kinderelemente mit übernommen wird. das sollte aber nicht passieren. die kinderelemente sollen aber leer sein. das krieg ich aber nicht hin. deswegen habe ich es mit innerHTML probiert, und es schien zu klappen ... bis ich es mit ff getestet habe
      Erfahrungen vererben sich nicht jeder muss sie allein machen.

      Kommentar


      • #4
        wie wärs denn wenn du das neue Feld nicht klonst, sondern eine neues anlegst
        PHP-Code:
        var input document.createElement('input');
        input.setAttribute('type''text');
        input.setAttribute('name''stText[]');
        //usw je nachdem welche Attribute das Tag noch haben soll
        document.getElementById('newElBG').addChild(input); 
        (ungetestet)

        Kommentar


        • #5
          danke für deinen vorschlag. habe den grad getestet (musst aber addChild druch appendChild ersetzen). klappt zwar ganz gut, gibt aber zwei probleme:
          1. class wird beim ie nicht übernommen
          2. ich kann kein <br> für eine neue zeile einfügen (soll ja nicht alles nach ein ander eingefügt werden)
          die sache ist auch das es nicht nur ein inputfeld ist, sondern mehrere und ich muss dazwischen auch etwas html einfügen.
          Erfahrungen vererben sich nicht jeder muss sie allein machen.

          Kommentar


          • #6
            1. class wird beim ie nicht übernommen
            vielleicht hilft dir das hier weiter.

            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              na gut, aber es geht hier ja nicht nur um die class. ich will ja dazwischen auch html elemente einfügen, und das geht ja damit nicht.
              das was ich brauche ist so etwas wie innerHTML, das aber nur elemente hinzufügt und die bestehenden nicht überschreibt.
              Erfahrungen vererben sich nicht jeder muss sie allein machen.

              Kommentar


              • #8
                natürlich kannst du auch ein <br /> einfügen
                PHP-Code:
                document.getElementById('newElBG').appendChild(document.createElement('br')); 
                umrühren fertig
                alle HTML Elemente kannst du mittels dieser Funktionen erzeugen und hinzufügen, das ist ja grad das tolle

                Kommentar


                • #9
                  ich habe jetzt eine einfachere möglichkeit gefunden bei der ich die obere funktion buildNewElement verwenden kann.
                  ich füge das div, das geklont werden soll einfach ein "unsichtbares" div rum.
                  also so:
                  Code:
                  <div style="visibility:hidden; display:none">
                  <div id="parentElBG"><input type="text" name="bgText[]" id="bgText" value="" class="inputText" style="width:338px;"><br></div>
                  </div>
                  das klappt ganz gut. ok, ff zickt etwas (übernimmt die werte des letzten inputs), aber das ist nicht so schlimm. das komisch ist nur, das bei einem reload (beim ff), die value vom hauptelement erhalten bleibt.
                  Zuletzt geändert von joextra; 21.07.2008, 16:48.
                  Erfahrungen vererben sich nicht jeder muss sie allein machen.

                  Kommentar

                  Lädt...
                  X