XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Formular Elemente mit JS hinzufügen -> dyn. Bezeichnung? (http://xhtmlforum.de/showthread.php?t=55780)

da.executor 12.02.2009 13:07

Formular Elemente mit JS hinzufügen -> dyn. Bezeichnung?
 
Hallo zusammen

Ich habe bisher immer alles mit PHP gelöst und beschäftige mich seit kurzem auch ein bisschen mit JS/AJAX. Ich habe eine Tabelle wo ich Komonenten für einen PC eintragen will, da ich nicht weiss wieviele Festplatten der PC hat etc. will ich die Liste der Komponenten dynamisch erweitern. Dazu habe ich eine JS Funktion geschrieben die soweit auch einwandfrei funktioniert:
HTML-Code:

<script type="text/JavaScript" language="JavaScript">
function addline() {
var myTR = document.createElement("tr");
var myTD = document.createElement("td");
var myTD2 = document.createElement("td");
var myTD3 = document.createElement("td");
var myTD4 = document.createElement("td");
var myTD5 = document.createElement("td");
var Komponente                        = document.createElement("select");
Komponente.name                = "Komponente";
Komponente.value                = "Bezeichnung";
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Prozessor");
theOption.appendChild(theText);
theOption.setAttribute("value","CPU");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Mainboard");
theOption.appendChild(theText);
theOption.setAttribute("value","MAINBOARD");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Arbeitsspeicher");
theOption.appendChild(theText);
theOption.setAttribute("value","RAM");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Festplatte");
theOption.appendChild(theText);
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Opt. Laufwerk");
theOption.appendChild(theText);
theOption.setAttribute("value","OPTIC");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Netzteil");
theOption.appendChild(theText);
theOption.setAttribute("value","PS");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Betriebssystem");
theOption.appendChild(theText);
theOption.setAttribute("value","OS");
Komponente.appendChild(theOption);
var theOption                        = document.createElement("OPTION");
var theText                                = document.createTextNode("Erweitert");
theOption.appendChild(theText);
theOption.setAttribute("value","HOPUP");
Komponente.appendChild(theOption);                       
var Bezeichnung                = document.createElement("input");
Bezeichnung.name                = "Bezeichnung";
Bezeichnung.value                = "Bezeichnung";
var Seriennummer                = document.createElement("input");
Seriennummer.name                = "Garantiebeginn";
Seriennummer.value                = "Garantiebeginn";
var Garantiebeginn                = document.createElement("input");
Garantiebeginn.name        = "Garantieende";
Garantiebeginn.value        = "Garantieende";
var Garantieende = document.createElement("input");
Garantieende.name = "Garantieende";
Garantieende.value = "Garantieende";
myTD.appendChild(Komponente);
myTD2.appendChild(Bezeichnung);
myTD3.appendChild(Seriennummer);
myTD4.appendChild(Garantiebeginn);
myTD5.appendChild(Garantieende);

myTR.appendChild(myTD);
myTR.appendChild(myTD2);
myTR.appendChild(myTD3);
myTR.appendChild(myTD4);
myTR.appendChild(myTD5);
var Ausgabebereich = document.getElementById("nz");
Ausgabebereich.appendChild(myTR);
}
</script>

Wenn ich aber auf der anderen Seite mit PHP die Formular Elemente auslesen will habe ich immer nur die letzte Zeile, logisch da die Formularelemente immer gleich bezeichnet sind.

Nun meine Frage, kann ich mit JS zählen wieoft die Funktion bereits aufgerufen wurde und dann bei jedem erneuten Aufruf einfach die Bezeichnung numerisch erhöhen? Z.Bsp. input1, input2, input3 etc. etc.

Oder gibt es noch eine andere möglichkeit?

Da ich neu im JS Land bin, bin ich auch offen für Verbesserungen an meinem bisherigen Code.

Vielen Dank!

Gruss

da.eXecutoR

da.executor 12.02.2009 14:01

erledigt:
HTML-Code:

<script type="text/javascript">
var anzahlZeilen = 0;

function hochZaehlen(){
        anzahlZeilen++;
        alert(anzahlZeilen);
}
</script>


da.executor 12.02.2009 17:56

Doch noch ne Frage.

Wie kann ich den Wert für onkeyup auf einem Input Feld definieren?

Code:

var Bezeichnung                = document.createElement("input");
Bezeichnung.name                = "Bezeichnung"+ anzahlZeilen;
Bezeichnung.value                = "Bezeichnung"+ anzahlZeilen;
Bezeichnung.onkeyup                = "compcheck(this.value,document.form1.(Komponente" + anzahlZeilen + "),this.name);";

so hats leider nicht funktioniert. Any ideas?

Gruss

da.eXecutoR

protonenbeschleuniger 12.02.2009 18:15

Crosspost: Formular Elemente mit JS hinzufügen -> dyn. Bezeichnung? - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:19 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023