nicht angemeldet
Liste dynamisch zusammenstellen
Hallo Zusammen,
ich bin JavaScript Einsteiger und habe jetzt schön länger ein Problem für das ich keine Lösung finden kann. Die unten beschriebene Seite soll zur Userverwaltung dienen. Hier soll man die Userkennung und den Usernamen eingeben. Der eingegebene Name soll auf der gleichen Seite in einer Tabelle aufgelistet werden. 5 User zur Berechtigung sollen das Limit sein. Jetzt das Problem - jedes mal wenn ich einen neuen - sprich 2. User eingebe, verschwindet der 1. User. Es soll also eine Liste aus den max 5 User dargestellt werden
und dann per Submit an ein PHP Skript weitergegeben werden. Wie bekomme ich die Liste hin .. kann mir jemand helfen?
Schon vorab vielen Dank und Grüße
Tolwin
<!--
var userNumber = "_";
var userName = "_";
var newUserList = new Array(5);
var count = 0;
function addNewUser()
{
// ermitteln des Usernamens und der ID
userNumber = document.getElementById("newNumber").getAttribute('value');
userName = document.getElementById("newName").getAttribute('value');
if(count<=4)
{
newUserList[count] = new Array();
newUserList[count][0] = userNumber;
newUserList[count][1] = userName;
document.userForm.pnummer.value = newUserList[count][0];
document.userForm.name.value = newUserList[count][1];
document.userForm.submit();
count++;
}
else
{
alert("Es können max. 5 User eingetragen werden");
}
}
//-->
</script>
</head>
<body>
<!-- 100% Höhe Tabelle -->
<table height="100%" border="0" cellpadding="0" cellspacing="0" width="600">
<tr><td valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="250">
<h1 style="margin-bottom:2px;margin-top:0px;">User </h1><br>
<h3 style="margin-bottom:2px;margin-top:0px;">Neue User hinzufuegen</h3>
</td>
</tr>
<tr><td><br><br></td></tr>
<tr>
<td><b>P-Nummer Name, Vorname</b></td>
</tr>
<tr>
<td><input type="text" name="newNumber" value="" size="10" maxlength="7" id="newNumber">
<input type="text" name="newName" value="" size="25" maxlength="25" id="newName">
<button name="b_hinzufuegen" type="button" onclick="addNewUser()" style="cursor:hand; padding:0px; border-style:none; background-color:#FFFFFF;"><img src="/public/icons/application_buttons/b_hinzufuegen.gif" border="0" alt="hinzufuegen"></button></td>
</tr>
<tr>
<td><br><br>
<!-- ######################### -->
<!-- Begin der Tabelle mit neuen Usern -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5">
<b>Liste der neuen User</b>
</td>
<td></td>
</tr>
<tr>
<td colspan="5">
<hr width="100%" size="1">
</td>
</tr>
<tr class="TabMittelgrau">
<td width="3px" bgcolor="white"></td>
<td>
<h2>User-ID</h2>
</td>
<td width="3px" bgcolor="white"></td>
<td>
<h2>Username (Name, Vorname)</h2>
</td>
</tr>
<tr></tr>
<form name="userForm" action="<?php $PHP_SELF ?>" method="POST">
<input type="hidden" name=pnummer value="">
<input type="hidden" name=name value="">
<?php
/*if($pnummer) {
$smbUsersClass->addNewSmbUser($pnummer, $name);
}*/
?>
<tr>
<td width="3px"></td>
<td class="TabHellgrau" width="50%">
<p style="background-color:"><b style="color:red"> <?= $pnummer ?></b></p></td><td width="3px"></td><td class="TabHellgrau"><p><b style="color:red"> <?= $name ?></b></p>
</td>
<td width="3px"></td>
</tr>
</form>
<tr>
<td colspan="5">
<hr width="100%" size="1">
</td>
</tr>
<tr>
<td align="right" colspan="5">
<button name="b_bestaetigen" type="button" onclick="addNewUser()" style="cursor:hand; padding:0px; border-style:none; background-color:#FFFFFF;"><img src="/public/icons/application_buttons/b_bestaetigen.gif" border="0" alt="bestätigen"></button></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
-
Hallo,
ich bin JavaScript Einsteiger und habe jetzt schön länger ein Problem für das ich keine Lösung finden kann. Die unten beschriebene Seite soll zur Userverwaltung dienen. Hier soll man die Userkennung und den Usernamen eingeben. Der eingegebene Name soll auf der gleichen Seite in einer Tabelle aufgelistet werden. 5 User zur Berechtigung sollen das Limit sein. Jetzt das Problem - jedes mal wenn ich einen neuen - sprich 2. User eingebe, verschwindet der 1. User. Es soll also eine Liste aus den max 5 User dargestellt werden
und dann per Submit an ein PHP Skript weitergegeben werden. Wie bekomme ich die Liste hin .. kann mir jemand helfen?Du hast anscheinend den Zusammenhang von PHP und JavaScript nicht verstanden (oder du hast den wichtigsten Teil deines Codes nicht gepostet).
Nachdem die User-Daten eingetragen wurden und der Button gedrückt wird, wird addNewUser() augeführt. Diese Funktion überträgt die Daten vom einen Formular in ein anderes. Direkt darauf sendet es das zweite Formular ab, woraufhin genau ein Datensatz per POST an das Script übergeben wird. Da frage ich mich, wieso du überhaupt zwei Formulare brauchst.Vorher speicherst du die Daten in einem JavaScript-Array. Aber welchen Sinn hat das? Dieser Array wird bei jedem Aufrufen bzw. Absenden der Seite zurückgesetzt:
var newUserList = new Array(5);
Auch deine Zählvariable wird niemals über 0 kommen:
if(count<=4)
{
newUserList[count] = new Array();
newUserList[count][0] = userNumber;
newUserList[count][1] = userName;newUserList wird immer leer sein, wenn dieses ausgeführt wird.
document.userForm.pnummer.value = newUserList[count][0];
document.userForm.name.value = newUserList[count][1];
document.userForm.submit();An dieser Stelle wird das Formular abgesendet und die bisherige Seite mitsamt aller JavaScript-Variablen verschwindet.
count++;
Diese Variable geht durch das Absenden sowieso verloren.
<td><input type="text" name="newNumber" value="" size="10" maxlength="7" id="newNumber">
<input type="text" name="newName" value="" size="25" maxlength="25" id="newName">
<button name="b_hinzufuegen" type="button" onclick="addNewUser()" style="cursor:hand; padding:0px; border-style:none; background-color:#FFFFFF;"><img src="/public/icons/application_buttons/b_hinzufuegen.gif" border="0" alt="hinzufuegen"></button></td>Wie gesagt, wozu zwei Formulare?
<tr></tr>
<form name="userForm" action="<?php $PHP_SELF ?>" method="POST">Du kannst kein form-Element einfach so in einem table-Element unterbringen. In table dürfen nur tr-Elemente (und thead, tbody und tfoot) vorkommen. Entweder du lässt das form-Element die Tabelle umschließen (<form><table>...</table></form>) oder das Formular darf nur eine Zeile umfassen (<table><tr><td><form>...</form></td></tr></table>). Wie gesagt sollte sich diese Frage erübrigen.
<form name="userForm" action="<?php $PHP_SELF ?>" method="POST">
<input type="hidden" name=pnummer value="">
<input type="hidden" name=name value="">
<?php/*if($pnummer) {
$smbUsersClass->addNewSmbUser($pnummer, $name);
}*/
?>
<tr><p style="background-color:"><b style="color:red"> <?= $pnummer ?></b></p></td><td width="3px"></td><td class="TabHellgrau"><p><b style="color:red"> <?= $name ?></b></p>
</td>
<td width="3px"></td>
</tr>Wieso soll hier auch mehr als ein Benutzer angezeigt werden? Es werden lediglich die POST-Parameter $pnummer und $name ausgegeben. Das ist also *ein* Datensatz.
Im Übrigen solltest du mit $_POST arbeiten.Wieso willst du JavaScript für diese Aufgabe heranziehen? Wenn ich dich richtig verstehe, kannst mit einem simplen Formular arbeiten, das das Eingeben der beiden Werte erlaubt. Wenn das Script dann beim Absenden Daten bekommt, wird der Benutzer hinzugefügt (aber nur, falls noch nicht fünf Benutzer existieren). Gleichzeitig wird per PHP eine Liste der bereits angelegten Benutzer ausgegeben.
Oder sollen insgesamt mehr als fünf Benutzer existieren und es geht nur darum, mit einem mal nur fünf Benutzer anlegen zu können? Dann erstelle ein Formular, in das man fünf Datensätze eingeben kann. Wenn du die Formularfelder alle name="pnummer[]" und name="name[]" nennst, hast du im PHP-Script in $_POST['pnummer'] bzw. $_POST['name'] jeweils einen Array mit den übergebenen Nummern/Benutzernamen.Mit JavaScript lässt sich das Ganze natürlich noch verkomplizieren, aber wieso sollte man?
Mathias
-
Hi Mathias,
erst mal vielen Dank für die ausführliche Antwort.
Wenn ein User/Userkennung auf der Seite eingegeben wird,
soll diese etwas weiter unten in einer Tabelle aufgelistet werden.
Der nächste eingegebene User/Userkennung soll dann unter dem vorherigen aufgelistet werden - allerdings sollen maximal 5 User neu angelegt werden können. Mit 5 Formularfeldern könnte man das Problem sicher einfacher lösen, aber halt auch etwas weniger elegant.
Für eine schnelle Lösung wäre dies sicher angebracht - aber jetzt hat mich der Ehrgeiz gepackt :). Es gibt in der Tat noch ein php Skript - eine Klasse um genau zu sein. In dieser klasse soll die
erstellte Liste (die aus einem Array dargestellt werden soll - so hab ich es mir zumindest gedacht) wieder in ein PHP Array geschrieben werden. Evtl. ist dies jetzt auch durch´s linke Auge in´s Schlüsselbein geschossen. Hätte da noch jemand ne Idee, bzw
ein paar beispielhafte Codeschnipsel? Danke und Gruß
Tolwin-
Hallo,
Mit 5 Formularfeldern könnte man das Problem sicher einfacher lösen, aber halt auch etwas weniger elegant.
Für eine schnelle Lösung wäre dies sicher angebracht - aber jetzt hat mich der Ehrgeiz gepackt :).Gut. Dann mache es eben so. Wo genau kommst du nicht weiter?
Versteckte Formularfelder kannst du mit createElement() und setAttribute() erzeugen und diese mit appendChild() an ein Element (z.B. p oder div) im Formular einhängen. Gleichzeitig kannst du über dieselben Methoden sowie createTextNode() ein Element erzeugen, das du in die sichtbare Tabelle einhängst. Darin stehen dann die jeweils eingegebenen Daten zur Kontrolle. Diese Prozedur darf nur fünf Mal ausgeführt werden, dann muss das Formular abgesendet werden. Im Formular gibt es dann wie gesagt mehrere <input type="hidden" name="name[]" value="..."> <input type="hidden" name="pnummer[]" value="...">.
Es gibt in der Tat noch ein php Skript - eine Klasse um genau zu sein. In dieser klasse soll die erstellte Liste (die aus einem Array dargestellt werden soll - so hab ich es mir zumindest gedacht) wieder in ein PHP Array geschrieben werden. Evtl. ist dies jetzt auch durch´s linke Auge in´s Schlüsselbein geschossen. Hätte da noch jemand ne Idee
Die Ideen habe ich dir schon geliefert. Du musst sie nur noch umsetzen. Alles Weitere ist in SELFHTML beschrieben.
Mathias
-
Gute Idee!
Das scheint der richtige Lösungsweg zu sein.
Allerdings bekomme ich das Input Field nicht ausgegeben.
In einem form tag habe ich eine Id="form1" geschrieben.
im nachfolgenden JS rufe ich diese auf und versuche die beiden hidden fields zu schrieben. leider ohne Erfolg! woran könnte das denn liegen?function addNewUser()
{
// ermitteln des Usernamens und der ID
userNumber = document.getElementById("newNumber").getAttribute('value');
userName = document.getElementById("newName").getAttribute('value');if(count<=4)
{
newUserList[count] = new Array();
newUserList[count][0] = userNumber;
newUserList[count][1] = userName;//document.write(newUserList[0][0]);
//document.userForm.pnummer.value = newUserList[count][0];
//document.userForm.name.value = newUserList[count][1];var myInput1 = document.createElement("input");
myInput1.setAttribute("type","hidden");
myInput1.setAttribute("name",newUserList[count][0]);
myInput1.setAttribute("value","");var myInput2 = document.createElement("input");
myInput2.setAttribute("type","hidden");
myInput2.setAttribute("name",newUserList[count][1]);
myInput2.setAttribute("value","");document.getElementById("form1").appendChild(myInput1);
document.getElementById("form1").appendChild(myInput2);//document.getElementsByTagName("input")[0].setAttribute("newNumber", document.formular.name.value);
//document.getElementsByTagName("input")[1].setAttribute("newName", document.formular.name.value);
count++;
//document.userForm.submit();}
else
{
alert("Es können max. 5 User eingetragen werden");
}
}function submit()
{
document.userForm.submit();
}//-->
-
Hallo,
userNumber = document.getElementById("newNumber").getAttribute('value');
userName = document.getElementById("newName").getAttribute('value');Du brauchst wie gesagt hier nicht mit getElementById arbeiten.
newUserList[count] = new Array();
newUserList[count][0] = userNumber;
newUserList[count][1] = userName;Ich weiß immer noch nicht, wozu du den Array brauchst.
var myInput1 = document.createElement("input");
myInput1.setAttribute("type","hidden");
myInput1.setAttribute("name",newUserList[count][0]);
myInput1.setAttribute("value","");Der name muss wie gesagt »pnummer[]« lauten. Und die userNumber muss selbstverständlich im value-Attribut stehen.
Zusammengefasst:
<script type="text/javascript">
var count = 0;
function addNewUser () {
var userNumber = document.forms.eingabe.elements.newNumber.value;
var userName = document.forms.eingabe.elements.newName.value;if (count < 5) {
var myInput1 = document.createElement("input");
myInput1.setAttribute("type", "hidden");
myInput1.setAttribute("name", "pnummer[]");
myInput1.setAttribute("value", userNumber);var myInput2 = document.createElement("input");
myInput2.setAttribute("type", "hidden");
myInput2.setAttribute("name", "pname[]");
myInput2.setAttribute("value", userName);document.getElementById("form1").appendChild(myInput1);
document.getElementById("form1").appendChild(myInput2);count++;
} else {
alert("Es können maximal fünf User eingetragen werden.");
}
}
</script><form action="" name="eingabe" onsubmit="addNewUser(); return false">
<p><input type="text" name="newNumber"> <input type="text" name="newName"> <input type="submit"></p>
</form><form action="...">
<p id="form1"><input type="submit" value="Eintragen"></p>
</form>Mathias
-
Nochmals vielen Dank -
Bin mir nicht sicher, aber vielleicht habe ich mich etwas undeutlich ausgedrückt. Auf der ersten Seite, die die das JS enthält, soll die möglichkeit bestehen 5 User nebst Userkennung einzugeben (maximal 5 User). Diese sollen auf der gleichen Seite in einer Tabelle nach jeder Eingabe eines neuen User aufgelistet werden - summiert sozusagen - daher das Array das ich dann ausgeben lassen wollte. das
Hinzufügen geschieht über den gleichnamigen Button - allerdings erst einmal nur in der Liste. ein weitere Button - bestätigen - soll die
Werte der 1 bis max 5 aufgelisteten User an ein PHP Skript zur Auswertung weitergeben. Wenn ich es richtig gesehen habe, hängt Dein Beispiel die Userkennung und Namen an den Link. Sorry dass ich bzgl JS etwas begriffsstutzig bin - tüftle jetzt aber schon ne Woche am Problem rum und finde keine passende Lösung -vielleicht gibts ja gar keine?!? Hier noch mal der korrigierte - nicht funktionierende Quelltext
<script language="JavaScript">
<!--
var count = 0;
function addNewUser ()
{
var userNumber = document.forms.eingabe.elements.newNumber.value;
var userName = document.forms.eingabe.elements.newName.value;if (count < 5)
{
var myInput1 = document.createElement("input");
myInput1.setAttribute("type", "hidden");
myInput1.setAttribute("name", "pnummer[]");
myInput1.setAttribute("value", userNumber);var myInput2 = document.createElement("input");
myInput2.setAttribute("type", "hidden");
myInput2.setAttribute("name", "pname[]");
myInput2.setAttribute("value", userName);document.getElementById("form1").appendChild(myInput1);
document.getElementById("form1").appendChild(myInput2);
count++;
}
else
{
alert("Es können maximal fünf User eingetragen werden.");
}
}
</script>// -->
</script>
</head>
<body>
<!-- 100% Höhe Tabelle -->
<table height="100%" border="0" cellpadding="0" cellspacing="0" width="600">
<tr><td valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="250">
<h1 style="margin-bottom:2px;margin-top:0px;">User - Shares f. die VI Umgebung</h1><br>
<h3 style="margin-bottom:2px;margin-top:0px;">Neue Samba-User hinzufuegen</h3>
</td>
</tr>
<tr><td><br><br></td></tr>
<tr>
<td><b>P-Nummer Name, Vorname</b></td>
</tr>
<tr>
<td>
<form name="formular" action="">
<input type="text" name="newNumber" value="" size="10" maxlength="7" id="newNumber">
<input type="text" name="newName" value="" size="25" maxlength="25" id="newName">
</form>
<button name="b_hinzufuegen" type="button" onclick="addNewUser()" style="cursor:hand; padding:0px; border-style:none; background-color:#FFFFFF;"><img src="/public/icons/application_buttons/b_hinzufuegen.gif" border="0" alt="hinzufuegen"></button></td>
</tr>
<tr>
<td><br><br>
<!-- ######################### -->
<!-- Begin der Tabelle mit neuen Usern -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5">
<b>Liste der neuen User</b>
</td>
<td></td>
</tr>
<tr>
<td colspan="5">
<hr width="100%" size="1">
</td>
</tr>
<tr class="TabMittelgrau">
<td width="3px" bgcolor="white"></td>
<td>
<h2>User-ID</h2>
</td>
<td width="3px" bgcolor="white"></td>
<td>
<h2>Username (Name, Vorname)</h2>
</td>
</tr>
<tr></tr>
<form id="form1" name="userForm" action="<?php $PHP_SELF ?>" method="POST"><?php
if($pnummer)
{
$smbUsersClass->addNewSmbUser($pnummer, $name);}
?>
<tr>
<td width="3px"></td>
<td class="TabHellgrau" width="50%"><p style="background-color:"><b style="color:red"> <?= $pnummer ?></b></p></td><td width="3px"></td><td class="TabHellgrau"><p><b style="color:red"> <?= $name ?></b></p>
</td>
<td width="3px"></td>
</tr></form>
<tr>
<td colspan="5">
<hr width="100%" size="1">
</td>
</tr>
<tr>
<td align="right" colspan="5">
<button name="b_bestaetigen" type="button" onclick="submit()" style="cursor:hand; padding:0px; border-style:none; background-color:#FFFFFF;"><img src="/public/icons/application_buttons/b_bestaetigen.gif" border="0" alt="bestätigen"></button></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>-
Hallo,
Auf der ersten Seite, die die das JS enthält, soll die möglichkeit bestehen 5 User nebst Userkennung einzugeben (maximal 5 User). Diese sollen auf der gleichen Seite in einer Tabelle nach jeder Eingabe eines neuen User aufgelistet werden - summiert sozusagen - daher das Array das ich dann ausgeben lassen wollte.
Du weißt doch mittlerweile, wie du Inhalte in das bestehende Dokument einfügst, indem du neue Elemente erzeugst und in den Elementbaum einhängst. Dasselbe wie bei den input-Elementen machst du mit tr- und td-Elementen sowie Textknoten (createTextNode()) (zwei Textknoten jeweils mit dem Namen bzw. der Nummer erzeugen, zwei td-Elemente erzeugen und die Textknoten daranhängen, ein tr-Element erzeugen und beide td-Elemente daran anhängen, dann das tr-Element an das tbody-Element anhängen).
Einfacher kannst du den HTML-Code über innerHTML in das tbody-Element schreiben, also etwa:
document.getElementById('tbody').innerHTML += "<tr><td>" + userNumber + "</td><td>" + userName + "</td></tr>";
Bei folgendem HTML-Code (vereinfacht):
<table>
<thead>
<tr><th>User-ID</th><th>Username (Name, Vorname)</th><tr>
</thead>
<tbody id="tbody">
<!-- Hier kommen die Tabellenzeilen hinein. -->
</tbody>
</table>Wozu du da den Array brauchst, verstehe ich immer noch nicht.
Hinzufügen geschieht über den gleichnamigen Button - allerdings erst einmal nur in der Liste. ein weitere Button - bestätigen - soll die Werte der 1 bis max 5 aufgelisteten User an ein PHP Skript zur Auswertung weitergeben.
Diese Funktionalität hast du ja schon.
Wenn ich es richtig gesehen habe, hängt Dein Beispiel die Userkennung und Namen an den Link.
Weil dort method="post" nicht gesetzt war. Um den Teil ging es im Beispiel ja auch gar nicht.
<tr></tr>
<form id="form1" name="userForm" action="<?php $PHP_SELF ?>" method="POST">Du kannst immer noch keine form-Elemente direkt unterhalb von table unterbringen.
<?php
if($pnummer)
{
$smbUsersClass->addNewSmbUser($pnummer, $name);Ich habe doch schon gesagt, dass $_POST['pnummer'] ein Array mit den fünf Benutzerkennungen ist (genauso pname), wenn die Formularfelder pnummer[] und pname[] heißen. Du musst diese Arrays durchlaufen, z.B. mit einer for-Schleife, und für jeden Eintrag einen Benutzer anlegen.
Mathias
-
-
-
-
-
-
Hi,
In table dürfen nur tr-Elemente (und thead, tbody und tfoot) vorkommen.
Nur damit es korrekt im Archiv steht:
HTML:
Direkte Kinder von table können sein:
caption, col, colgroup, thead, tfoot, tbodyXHTML:
Direkte Kinder von table können sein:
caption, col, colgroup, thead, tbody, tfoot, trBei HTML ist tr nicht direkt in table erlaubt - da aber die tags des tbody-Elements bei HTML optional sind, gibt es viele Tabellen, die tr als direkte Kinder zu haben scheinen.
(Vermutlich um die Umstellung auf XHTML zu erleichtern, wurde dann in XHTML tr als direktes Kind von table erlaubt.)cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo,
In table dürfen nur tr-Elemente (und thead, tbody und tfoot) vorkommen.
Nur damit es korrekt im Archiv steht:
Du hast ja recht, dass die Aussage als solche unzutreffend ist. Ich hatte aber nicht umsonst die im hiesigen Zusammenhang unwesentlichen Details verschwiegen. Ich werde auch beim nächsten solchen Posting das zu vermittelnde Wissen auf das nötigste reduzieren, vor allem wenn wie hier einfachste Sachverhalte nicht verstanden wurden. Du darfst mich dann gerne wieder ergänzen.
Gemeint war also: »In table dürfen nur tr-Elemente vorkommen (und einige andere, von denen keines etwas hier zur Sache tut und lediglich thead, tbody und tfoot erwähnenswert wären).« Solche Zusätze erspare ich mir bzw. den Fragenden einfach. Dass da implizit ein tbody-Element existiert und die Aussage somit strenggenommen immer noch falsch ist, halte ich solange für irrelevant, bis man tr-Elemente über DOM oder CSS als direkte Kinder von table ansprechen will. An jedem Sachverhalt hängt ein Haufen von anderen Sachverhalten, die ich nicht alle nur der Vollständigkeit halber erwähne.Mathias
-
-