Mit JS Daten aus Formular in eine Tabelle schreiben

[janand2]

Hallo,

ich möchte folgendes tun:

Ich habe eine HTML Seite die verschiedene Rechner Systeme zeigt. Die Systeme sind in einer Tabelle aufgezeigt. Die Tabelle besitz verschiedenen Spalten, z.B. Name, Betriebssystem... usw.

Ausserdem habe ich den Button "Add" mit dem ein neues Sytem zur Tabelle hinzugefügt werden soll. D.h. ich drücke auf den Button Add und ein neues Fenster (Pop-Up) geht auf. Hier gebe ich die benötigten Daten ein... sobald ich auf dem Pop-Up dann auf Save klicke, soll es sich schliessen und zurück zur Tabelle springen, das ist ja soweit kein Problem. Nur wie müsste ein JavaScript aussehen, dass mir die eingegebenen Werte aus dem Pop-Up in eine neue Tabellenzeile schreibt. Z.b. habe ich den Namen im Pop-up eingegeben, ich drücke Save, eine neue Tabellen Zeile wird automatisch erstellt und der Wert wird in die dafür vorgesehene Zelle geschrieben.

Ist sowas mit JavaScript möglich?

Danke für eure Antworten

Janand

[etreu]

Woher holst du denn die anderen Daten?

[janand2]

Wie meinst du das?

Ich möchte Daten in das Pop-Up eingeben, z.B. Name, dann drücke ich auf Save, Pop-up geht zu, wir sind wieder bei der Tabelle, der Tabelle wird automatisch eine Zeile hinzügefügt und dort in in die Spalte Name das eingefügt was ich im Pop-Up eingegeben hab. Verstehst du?

Ist das mit JS möglich?

[kills]

mach doch in dein PopUp ein Formular und mach beim form-tag dann als "target" dein Elternfenster wieder rein.

Code für ins Popup:

<form action="addRow.php" method="post" target="mainWindow">

.

.

.

<input type="submit" value="Hinzufügen" name="Addbutton">

</form>

dann musste nur noch schauen, dass dein ElternFenster den namen "mainWindow" trägt!

[janand2]

Aber wie mach ich es, dass die Daten aus dem Pop-Up in eine neue Tabellenzeile geschrieben werden? Irgendwie muss ich ihm ja sagen, dass er z.B. den Wert aus dem Eingabefeld Name in die neue Spalte der Tabelle in die Zelle Name schreibt... , oder nicht?

[etreu]

Du speicherst die Referenz auf das PopUp in einer Variablen.

Dann übergibst du an das PopUp die Referenz des Fensters mit der Tabelle.

Beim Abschicken des Formulars löst du im Tabellenfenster ein reload() aus.

[janand2]

Hi,

danke für deine Antwort, so ganz versteh sie aber nicht ;O( ich hab noch nicht soviel Ahnung von JS.

Aber ich habe mir gerade etwas anderes überlegt... die Tabelle brauch ich gar nicht unbedingt Ich wollte es jetzt so machen:

Ich habe eine Übersicht, auf der man die Server Informationen sieht.

Ausserdem habe ich einen Button "Edit", wenn man den drückt geht ein Pop-Up in dem man die Daten verändern kann, anschliessend auf Save, das Pop-Up geht zu, und die geänderten Daten werden übernommen.

Hast du ne Ahnung wie ich das machen könnte?

[kills]

mach doch in dein PopUp ein Formular und mach beim form-tag dann als "target" dein Elternfenster wieder rein.

Code für ins Popup:

<form action="addRow.php" method="post" target="mainWindow">

.

.

.

<input type="submit" value="Hinzufügen" name="Addbutton">

</form>

dann musste nur noch schauen, dass dein ElternFenster den namen "mainWindow" trägt!

steht doch alles hier!

du verschickst beim submit mit target "mainWindows" die daten des formulars an dein hauptfenster und wertest diese dort aus.

vielleicht wäre es auch besser für die Positionen einen eigenen Frame einzubauen?

dein Kopf/Fuß sollte ja unverändert bleiben oder?

[etreu]

Mit dem Target dürfte das nicht funktionieren.

Eigentlich müsste er eine neue Seite öffnen, sobald das Formular gesendet wurde.

# Hauptfenster

<script type="text/javascript">

var editForm = "edit.htm";

var editWindow;


function popUp(url) {

  return window.open(url);

}


function openEdit() {

  editWindow = popUp(editForm);

  // hier referenz übergeben

  // bin nicht sicher, ob das klappt

  editWindow.document.setParent(window);

}

</script>[/PHP]

[PHP]
# EditFenster
<script type="text/javascript">
var parent = null;

function setParent(p) {
parent = p;
}

function handleSubmit() {
if (parent != null) {
parent.document.reload();
}
}
</script>

// ... weiter unten
<form action="actionUrl" method="POST" onsubmit="javascript:handleSubmit()" >

das einzige wo ich mir nicht sicher bin, ist das fensterübergreifende Aufrufen von Funktion (in dem Hauptfenster)

[janand2]

Hi danke für eure Antworten.

Ich werde das mal testen, aber wieso hast du jetzt PHP-Code verwendet?

Oder seh ich das falsch?

[etreu]

[..] aber wieso hast du jetzt PHP-Code verwendet?

Oder seh ich das falsch?

Nee, ist richtig. Ist einfach mal bunter. Hat nichts weiter zu sagen.

[janand2]

ok, ich werde das mal ausprobieren, danke

Janand