flyingeagle: CreateElement

hi, ich mache mit createelement ein paar formularfelder in mein formular, das klappt auch wunderbar

codeauszug

var Elementknoten4 = document.createElement('input type="text" name="+test+4+" size="10" value="'+preis+'" readonly>');

document.getElementById("User").appendChild(Elementknoten4);

jetzt mächte icha uch tabellenteile mit in diese ausgabe bringen, leider klappt das nicht, geht das grundsätzlich nich tmit tabellenteilen?

codeauszug

var Elementknoten4 = document.createElement('<tr><td><input type="text" name="+test+4+" size="10" value="'+preis+'" readonly></td></tr>');

document.getElementById("User").appendChild(Elementknoten1);

hoffe mir kann jemand helfen

  1. Hi,

    var Elementknoten4 = document.createElement('input type="text" name="+test+4+" size="10" value="'+preis+'" readonly>');

    Du erzeugst hier einen html-String, nicht aber ein Element - das muss zu unvorhersehbaren Ergebnissen fuehren. Attribute sollte man z.B. mit setAttribute([name],[value])erzeugen.http://de.selfhtml.org/javascript/objekte/all.htm#set_attribute.
    Achtung: IE ist dort stoerrisch, wo er direkt auf die Eigenschaft zugreifen kann und ignoriert in diesem Falle setAttribute.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. ok danke für den tipp klappt aber leider immernoch nicht so wie ich das wollte
      wenn ich ein document write mache, muss das dann an die stelle wo der spätere text stehen soll oder geht das auch das ich das in eine funktion packe und dann das document write in irdendeinem div bereich angezeight wird?

      hier nochmal das was ich schon habe vielleicht haste ja auch noch ne andere idee wie ich das bauen könnte

      <script type="text/javascript">
      function Hinzufuegen(){

      var test= parseInt(document.getElementById("1").value);
        var artnr= document.getElementById("artnr").value;
        var artbez= document.getElementById("artbez").value;
        var anz= document.getElementById("anz").value;
        var preis= document.getElementById("preis").value;

      var Elementknoten1 = document.createElement('<input type="text" name="'+test+1+'" size="10" value="'+artnr+'" readonly>');
        var Elementknoten2 = document.createElement('<input type="text" name="+test+2+" size="40" value="'+artbez+'" readonly>');
        var Elementknoten3 = document.createElement('<input type="text" name="+test+3+" size="10" value="'+anz+'" readonly>');
        var Elementknoten4 = document.createElement('<input type="text" name="+test+4+" size="10" value="'+preis+'" readonly>');
        var Elementknoten5 = document.createElement('<br>');

      document.getElementById("User").appendChild(Elementknoten1);
        document.getElementById("User").appendChild(Elementknoten2);
        document.getElementById("User").appendChild(Elementknoten3);
        document.getElementById("User").appendChild(Elementknoten4);
        document.getElementById("User").appendChild(Elementknoten5);
        document.getElementById("1").value = test + 4;
      }
      </script>

      <form method="POST" action="--WEBBOT-SELF--">
        <input type="hidden" name="T5" value="0" ID="1"><table border="0">
          <tr>
            <td align="center"><div align="left"><p>Artike-Nr:<br>
            <input type="text" name="T1" size="10" ID="artnr"></td>
            <td align="center"><div align="left"><p>Artikelbezeichnung:<br>
            <input type="text" name="T2" size="40" ID="artbez"></td>
            <td align="center"><div align="left"><p>Anzahl:<br>
            <input type="text" name="T3" size="10" ID="anz"></td>
            <td align="center"><div align="left"><p>Einzelpreis:<br>
            <input type="text" name="T4" size="10" ID="preis"></td>
            <td align="center" valign="bottom"><input type="button" value=" ... " name="B3"></td>
            <td align="center" valign="bottom"><input type="button" value=" + " name="B4"
            onclick="Hinzufuegen();"></td>
          </tr>
          <tr>
            <td colspan="6" align="center"><hr><div ID="User"></div>
            <p><textarea rows="20" name="S1" cols="80"></textarea></td>
          </tr>
        </table>
        <p><input type="submit" value="Abschicken" name="B1"><input type="reset"
        value="Zurücksetzen" name="B2"></p>
      </form>

      und ich möchte jetzt das die formularfelder in die tabelle mit reinkommen und nicht einfach so hintereinander geschrieben werden sondern in der tabellenformatierung von der ersten zeile angegeben werden.

      1. Hi,

        wenn ich ein document write mache, muss das dann an die stelle wo der spätere text stehen soll

        Waehrend des Renderns kannst Du mit document.write dort schreiben, wo Du eine Ausgabe benoetigst.

        var test= parseInt(document.getElementById("1").value);

        Formreferenz ist immer noch document.FORMNAME.ELEMENTNAME bzw document.forms[].elements[]
        Ausserdem kann darf eine ID nicht nur aus einer Number bestehen, wenn Du mit Javascript damit arbeiten willst.

        var Elementknoten1 = document.createElement('<input type="text" name="'+test+1+'" size="10" value="'+artnr+'" readonly>');

        hast Du meinen vorherigen Text nicht gelesen? Einen String kannst Du mit innerHTML schreiben, mit der Dom-Methode createElement erzeugst Du ein Element - nur das. Die Attribute erzeugst Du mit setAttribute, createAttribute...

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. ok dann hab ich esjetzt mal hiermit probiert

          <script type="text/javascript">
          function Hinzufuegen(){

          var test= parseInt(document.getElementById("items").value);
            var artnr= document..getElementById("artnr").value;
            var artbez= document.getElementById("artbez").value;
            var anz= document.getElementById("anz").value;
            var preis= document.getElementById("preis").value;

          document.all.User.innerHTML = '<input type="text" name="'+test+1+'" size="10" value="'+artnr+'" readonly>';
            document.all.User.innerHTML = '<input type="text" name="+test+2+" size="40" value="'+artbez+'" readonly>';
            document.all.User.innerHTML = '<input type="text" name="+test+3+" size="10" value="'+anz+'" readonly>';
            document.all.User.innerHTML = '<input type="text" name="+test+4+" size="10" value="'+preis+'" readonly>';

          document.getElementById("items").value = test + 4;

          }
          </script>

          da wird mir aber nur eins von den feldern gemacht, warum das?

          bei document.formular.getElementById(..)....
          bekomme ich einen fehler obwohl mein formular den namen formular hat ohne geht alles wunderbar

          1. Hi,

            document.all.User.innerHTML = '<input type="text" name="'+test+1+'" size="10" value="'+artnr+'" readonly>';

            veraltete proprietaere MS-Syntax :-(

            bei document.formular.getElementById(..)....

            Vielleicht solltest Du Dir in der hiesigen Doku doch mal langsam die Grundlagen durchlesen, das sind Dinge, die hier vorausgesetzt werden. Wie referenziere ich ein Formelement: http://de.selfhtml.org/javascript/objekte/elements.htm

            Ansonsten mag Dir sowas als Anregung dienen, um DOM einzusetzen:
            <html><head>
            <script language="javascript" type="text/javascript">
            var inpNam =  "inp";
            var cnt    =  0;
            function goForIt() {
              cnt ++;
              var inp =  document.createElement("input");
              inp.style.width =  "100px";
              inp.setAttribute("type","text");
              inp.setAttribute("name",inpNam + cnt);
              br  =  document.createElement("br");
              document.getElementById("dynform").appendChild(inp);
              document.getElementById("dynform").appendChild(br);
            }
            </script>
            </head><body>
            <form Name="feld" id="dynform">
            <input type="button" value="goForIt" onclick="goForIt()"><br><br>
            </form></body></html>

            Gruesse, Joachim

            --
            Am Ende wird alles gut.
            1. hi, ok soweit funktioniert fast alles was ich vorhabe (danke schonmal für eure hilfe)
              aber wenn ich jetzt die neu dazugemachten felder an ein php übergeben will funktioniert das leider noch nicht.
              geht das überhaupt nicht? oder gibts da nen trick?

          2. Halo,

            Du kannst doch mit getElement... umgehen, warum dann document.all? Die modernen Browser, die DOM unterstützen, können auch innerHTML.

            document.all.User.innerHTML = '<input type="text" name="'+test+1+'" size="10" value="'+artnr+'" readonly>';
              document.all.User.innerHTML = '<input type="text" name="+test+2+" size="40" value="'+artbez+'" readonly>';
              document.all.User.innerHTML = '<input type="text" name="+test+3+" size="10" value="'+anz+'" readonly>';
              document.all.User.innerHTML = '<input type="text" name="+test+4+" size="10" value="'+preis+'" readonly>';

            jetzt hast Du das Feld viermal geändert. Versuch es ab der zweiten Zuweisung mit "+=".

            bei document.formular.getElementById(..)....

            ich glaube, dieser Mischmasch von DHTML und DOM ist nicht ok. Entweder document.getElementById("Name des Formularfeldes") oder document.Formularname.Elementname...

            Gruß

            Jürgen

      2. Hallo,

        Du solltest Dir im Selfhtml mal ansehen, wie das mit dem createElement funktioniert.
        http://de.selfhtml.org/javascript/objekte/document.htm#create_element
        Deine Syntax sieht mehr nach Fantasie aus. Und IDs dürfen nicht mit Ziffern beginnen.

        Gruß,

        Jürgen