Mit Javascript auf erzeugtes hidden Feld zugreifen

KeksLord · 11. November 2019 um 14:18

Hi,

ich bin gerade dabei eine Homepage für mich zuu erstellen und wollte im Adminbereich die Möglichkeit integrieren, das Navigationsmenü zu ändern und deren Reihenfolge per Listbox zu verändern. Da ich keine Lösung gefunden habe, alle Listboxeinträge per POST-Action zum PHP-Script zu befördern, habe ich versucht per Javascript die einzelnen Listbox-Options in ein entsprechendes Hidden-Feld zu schreiben und dieses per POST-Action zum Script zu bringen. Jedoch gibt mir der IE immer Fehler im JS raus… Einer der hauptfehler ist, dass ich mit Javascript die hidden-Felder nicht in einer While-Schleife abfragen kann, da deren ID´s nicht abgerufen werden können…

hier mal meine Scripts:

PHP (Erzeugung der Hidden-Felder):

<?php $DB->connect(); $abfrage = $DB-\>query("SELECT \* FROM navi\_content ORDER BY ID ASC"); $navi\_elemente = 0; while ($row = $DB-\>fetch\_array($abfrage)) { $ID = $row["0"]; if ($navi\_elemente == 0) $select = 'selected'; else $select = ''; echo '' . $row["2"] . ''; $navi\_elemente++; } while ($navi\_elemente \> 0) { echo ''; $navi\_elemente--; } ?\> Javascript: function moveall(listid) { var listbox = document.getElementById(listid); var length, elementname; length = listbox.options.length; alert('Länge: ' + length); while (length \>= 1) { elementname = document.getElementByName('element' + length); elementname.value = document.formular.listbox.options[i].value; alert('Wert: ' + document.formular.listbox.options[i].text); alert(elementname); length--; } } Vielleicht hat ja jemand eine Idee wie ich das realisieren könnte. Zu dem PHP-Script: $row["0"] ist die ID in der Datenbank $row["1"] ist die Abkürzung der Seite (z.B. "main" statt "Startseite") $row["2"] ist der Seitenname (z.B. "Startseite") $row["3"] (Bool) gibt an ob der eintrag in der Navigation angezeigt wird oder nicht Danke schonmal im vorraus :wink: MfG KeksLord

KKO_ae7027 · 11. November 2019 um 14:19

Hallo KeksLord,

Du vergibst den Hidden-Felder einen Namen und keine ID.
Danach willst Du aber eine Liste der Hidden-Felder mittels der ID erstellen

Gruß
Klaus

RakonDark_2d341e · 11. November 2019 um 14:19

Hi,

ich bin gerade dabei eine Homepage für mich zuu erstellen und
wollte im Adminbereich die Möglichkeit integrieren, das
Navigationsmenü zu ändern und deren Reihenfolge per Listbox zu
verändern. Da ich keine Lösung gefunden habe, alle
Listboxeinträge per POST-Action zum PHP-Script zu befördern,
habe ich versucht per Javascript die einzelnen Listbox-Options
in ein entsprechendes Hidden-Feld zu schreiben und dieses per
POST-Action zum Script zu bringen. Jedoch gibt mir der IE
immer Fehler im JS raus… Einer der hauptfehler ist, dass ich
mit Javascript die hidden-Felder nicht in einer While-Schleife
abfragen kann, da deren ID´s nicht abgerufen werden können…

du kannst mit javascript sowohl auf id zugreifen (1 item) oder auf namen zugreifen (mehrere items).
Das wäre also getElementByName() und das erzeugt ein array mit allen elementen des gleichen namens .

Eine andere sache ist deine aussage, wenn du nicht auf die ID’s zugreifen kannst, dann machst du ein fehler, ein logik fehler.
Versuch am Anfang nie mit minimum an daten auszukommen, mach immer das maximum , heisst, gibt dem element ruhig namen und id schaden kann es nicht. Hast du eine aufzählung die sich erweitert, speichert man die erweitung (anzahl) irgentwo ab, somit kann man aufjedenfalll auch id’s durchlaufen, und das geht auch für assoziative arrays

KeksLord · 11. November 2019 um 14:19

Hi,

wenn ich mit getElementByName() oder getElementByID() den Namen bzw die ID des Hidden Feldes ansteuere, bekomme ich jedes Mal den Fehler „Das Objekt unterstützt diese Eigenschaft oder Methode nicht.“ vom IE geliefert. Wenn ich als Parameter der Funktion den Namen bzw die ID des Hidden Feldes mitliefere klappt alles wunderbar, jedoch hab ich keinen Plan wie ich die Methode jedes Mal mit unterschiedlichen Parametern aufrufen soll… Sobald ich den Befehl document.getElementByName(‚element‘ + length);
verwende, bekomme ich besagte Fehlermeldung.

Wird daraus jemand schlau?

MfG KeksLord

KKO_ae7027 · 11. November 2019 um 14:19

Hallo,
es gibt:

getElementById()
getElementsByName()
getElementsByTagName()

und die Namen dieser Methoden sind casesensitiv = Groß/Kleinschreibung beachten.

Gruß
Klaus

KeksLord · 11. November 2019 um 14:19

Ok dein Tipp mit dem „s“ (case-sensitiv xD) hat mir weiter geholfen… Aber jetzt muss ich irgendwie auf die Options der Listbox zugreifen können, aber das endet bei mir in dem Fehler
‚document.formular.listbox.options[…].text‘ ist Null oder kein Objekt

das gleiche passiert, wenn ich die „value“-Eigenschaft ansteuern will… als arrayvariable in den eckigen Klammern der Option benutze ich die Variable „length“ mit der momentanen Größe von 8 bis 1 (countdown in while-Schleife).

Wie spreche ich den in der Listbox-Option angezeigten Text denn an?

MfG

KeksLord

KKO_ae7027 · 11. November 2019 um 14:19

Wie spreche ich den in der Listbox-Option angezeigten Text
denn an?

document.formularname.selectname.options[#].text
ist der Text, der angezeigt wird.

document.formularname.selectname.options[#].value
ist der Wert, dieser Option.

Aber um das so ansprechen zu können, muss natürlich das Formular und Auswahlliste mit „name“ vorhanden sein , und das sehe ich im PHP-Fragment nicht.
Es wäre auch besser, wenn Du das Formular mal in HTML posten würdest, dann hätten wir das schnell geklärt.

Und nochmal, wie der funktionelle Ablauf sein soll.
Wie z.b.
Benutzer wählt eine Option aus und dann …

Gruß
Klaus

KKO_ae7027 · 11. November 2019 um 14:19

aber vielleicht reicht Dir ja auch schon so etwas:




function show(){
alert(document.liste.nav.value)
}

Nav1Nav2Nav3Nav4

die function show gibt nur die Auswahl aus.
Aber von hier kann natürlich auch eine Aktion wie der Aufruf eines PHP-Scripts mit Query-String erfolgen.

Gruß
Klaus

KeksLord · 11. November 2019 um 14:19

Ist erst ganz am Anfang die komplette Seite, aber mir geht es erstmal um die Hauptfunktionen…

meine Header-html-Datei:

Homepage von \*\*\*\*\*\* | <?php echo $sitetitle; ?>
\<!--
function moveItem(listboxid,i)
{
var b,o=document.getElementById(listboxid),p,q;
if(i==0 && o.selectedIndex \> 0)
{
p = o.options[o.selectedIndex];
q = o.options[o.selectedIndex - 1]
o.removeChild(p);
o.insertBefore(p,q);
}
if(i==1 && o.selectedIndex \< o.options.length-1)
{
b = o.selectedIndex \< o.options.length - 2;
p = o.options[o.selectedIndex];
if(b) q = o.options[o.selectedIndex + 2]
o.removeChild(p);
if(b) o.insertBefore(p,q); else o.appendChild(p);
}
}

function moveall(listid)
{
var listbox = document.getElementById(listid);
var length, elementname;
length = listbox.options.length;
alert('Länge: ' + length);

while (length \>= 1)
{
elementname = document.getElementsByName('element' + length);
elementname.value = document.formular.listbox.options[length];
alert('Wert: ' + document.formular.listbox.options[length]);
length--;
}
}
//--\>





<?php echo $tickertext; ?>






<?php $DB->connect();

$abfrage = $DB-\>query("SELECT \* FROM navi\_content ORDER BY ID ASC");

while ($row = mysql\_fetch\_array($abfrage, MYSQL\_NUM))
{
$title = $row["1"];
$name = $row["2"];
$activated = $row["3"];

if ($activated == "1" && $adminmode == false)
{
if ($title == '')
{
echo ' ';
}
else
{
echo ' ';
if ($site != $title)
echo '[' . $name . '](index.php?site='%2520.%2520%2524title%2520.%2520')';
/\*else if ($site == '')
echo 'Startseite';\*/
else
echo '--\> ' . $name . '';
echo ' ';
}
}
}

$DB-\>close();

if ($navi\_content\_cont == '')
{
echo $navi\_content\_cont;
}

?\>








=====================================


Ausschnitt aus index.php




    if ($\_POST['button\_navi'] == 'Absenden')
    {
    echo 'Länge Array: ' . count($\_POST['listbox']) . '
    ';
    $array = $\_POST['element6'];
    echo 'Array: ' . $array;
    }
    
    if ($\_GET["site"] != '')
    {
    $DB-\>connect();
    
    $sitename\_database = $\_GET["site"];
    
    $abfrage = $DB-\>query("SELECT \* FROM navi\_content WHERE Title = '$sitename\_database'");
    
    $row = mysql\_fetch\_array($abfrage, MYSQL\_NUM);
    
    $site = $row["1"];
    $sitetitle = $row["2"];
    $activated = $row["3"];
    
    include('layout.htm');
    
    if ($site == 'test')
    {
    include('html/admin/edit\_navi.htm');
    }
    else
    {
    include('html/' . $site . '.htm');
    }
    }
    else
    {
    $sitetitle = 'Startseite';
    $site = 'main';
    include('layout.htm');
    include('html/main.htm');
    }




=========================


edit\_navi.htm:



     
    
     Navigation bearbeiten 
    
    
    
    
    
    <?php $DB->connect();
    
    $abfrage = $DB-\>query("SELECT \* FROM navi\_content ORDER BY ID ASC");
    
    $navi\_elemente = 0;
    
    while ($row = $DB-\>fetch\_array($abfrage))
    {
    $ID = $row["0"];
    
    if ($navi\_elemente == 0)
    $select = 'selected';
    else
    $select = '';
    
    echo '' . $row["2"] . '';
    
    $navi\_elemente++;
    }
    
    ?\>
    
    
    
    
    
    
    <?php while ($navi_elemente > 0)
    {
    echo '';
    echo $navi\_elemente . '
    ';
    $navi\_elemente--;
    }
    ?\>
    
    
    
    
    





=================================


Erklärung:

Die edit\_navi.htm erzeugt eine Listbox, die alle Navigationselemente beinhaltet (Navi-Menü). Die einzelnen Options kann man per Button nach oben bzw. unten verschieben (dazu dient die Javascript-Funktion moveItem() ). Beim Absenden des Formulars soll die komplette Listbox der Reihenfolge nach ins PHP-Script eingelesen werden und anschließend in die Datenbank geschrieben werden, wobei die ID´s in der Datenbank geändert werden sollen, da nach diesen das Navigationsmenü geordnet wird (also vorher: Startseite -\> ID = 1; Startseite an 1. Stelle; nachher z.B. Startseite -\> ID = 3; Startseite an 3. Stelle).

Soweit meine Idee... Was haltet Ihr davon?

//hab den Artikel gelöscht und neu eingetragen, um den Quelltext besser darstellen zu können.


MfG KeksLord

KeksLord · 11. November 2019 um 14:20

Geht es denn nicht auch einfacher alle Options, egal ob selektiert oder nicht, ans PHP-Script zu senden? Die Listbox sollte aber bei der Einzelauswahl verbleiben, da sonst das Ändern der Reihenfolge nicht mehr klappt… Aber wie schafft man es mit JS alle Options zu senden anstatt nur die selektierte?

Danke schonmal für Antworten

MfG KeksLord

KKO_ae7027 · 11. November 2019 um 14:20

Geht es denn nicht auch einfacher alle Options, egal ob
selektiert oder nicht, ans PHP-Script zu senden? Die Listbox
sollte aber bei der Einzelauswahl verbleiben, da sonst das
Ändern der Reihenfolge nicht mehr klappt… Aber wie schafft
man es mit JS alle Options zu senden anstatt nur die
selektierte?

Da liegt ja der Haken
Eigentlich wäre es angebracht für jede Naviposition die verschiedenen Links in einer Auswahliste anzubieten.

Wie man den Text der Optionen auslesen kann :




function show(){
 var sel=document.liste.nav
 var opts=sel.options
 var out=""
	for (var i=0; i < opts.length;i++){
 out += opts[i].text + " "
 }
 alert (out)
}

Nav1Nav2Nav3Nav4
Optionen anzeigen

Geht natürlich auch mit value.
Wie Du das jetzt an das script schickst?
Als Query-String oder als Value im Hidden-Feld ?

Gruß
Klaus

KKO_ae7027 · 11. November 2019 um 14:20

sorry … funktioniert zwar, aber so ist die Schleife korrekt:

for (var i=0; i

KeksLord · 11. November 2019 um 14:20

Hi,

Eigentlich wäre es angebracht für jede Naviposition die verschiedenen Links in einer Auswahliste anzubieten.

was meinst du damit genau?

Wenn es mit einer Listbox nicht funktioniert, hättest du vielleicht eine Alternative Sinnvoll und vor allem übersichtlich die einzelnen Navigationsbuttons zu verändern? Also ich hatte die Idee es so zu gestaltet, dass man auf jeden Fall die Möglichkeit hat einen neuen Navigationseintrag zu machen, bereits existierende zu löschen und die Position der einzelnen Einträge zu verändern. Die einträge werden nach der ID in der Datenbank geordnet, d.h. der Eintrag mit der ID 1 ist ganz oben und z.b. der Eintrag mit der ID 99 ganz unten.

MfG

KeksLord

KKO_ae7027 · 11. November 2019 um 14:21

Hallo,

Eigentlich wäre es angebracht für jede Naviposition die verschiedenen Links in einer Auswahliste anzubieten.

was meinst du damit genau?

weil dann die jeweilige Auswahl per Formular an das Script geschickt wird.

Wenn es mit einer Listbox nicht funktioniert, hättest du
vielleicht eine Alternative Sinnvoll und vor allem
übersichtlich die einzelnen Navigationsbuttons zu verändern?

Wie Navigationsbuttons … was das jetzt?

Das Beispiel, wie die Optionen einer Auswahlliste ausgelesen werden, funktioniert doch. Wo hakelt es?

Also ich hatte die Idee es so zu gestaltet, dass man auf jeden
Fall die Möglichkeit hat einen neuen Navigationseintrag zu
machen, bereits existierende zu löschen und die Position der
einzelnen Einträge zu verändern. Die einträge werden nach der
ID in der Datenbank geordnet, d.h. der Eintrag mit der ID 1
ist ganz oben und z.b. der Eintrag mit der ID 99 ganz unten.

Im Prinzip ist jedes HTML-Element, das inline-elemente aufnehmen kann, dazu geeignet.
Z.B. ein div und darin p-tags mit den Links.

Die PHP-Ausgabe kann das ja auch alles schön sortiert ausgeben und mit den notwendigen Attributen (für die Bearbeitung mit JS) auszeichnen.

Mit Javascript kannst Du die p-tags dann ändern, löschen, sortieren und neue hinzufügen.
Und zum guten Schluss aufbereitet an das PHP-script schicken.

Wenn es Dich interessiert, kann ich Dir per PM einen Link schicken, wo die Methoden und Funktionen verwendet werden, die Du dafür brauchst.

Gruß
Klaus

KeksLord · 11. November 2019 um 14:21

Hi,

Wie Navigationsbuttons … was das jetzt?

Ok Buttons ist jetzt etwas falsch ausgedrückt…
Ich verwende DIVS mit Hintergrund und Links als Navigation, wo z.B. Startseite, Gästebuch, Impressum usw. steht. Diese werden mit dem PHP-Script erzeugt, indem die benötigten Daten aus der Datenbank geholt werden und per while-Schleife auf die nötigen Inhalte durchlaufen werden. Dadurch erhalte ich auch den angezeigten Namen (also z.B. Startseite als Link).

In der Listbox im Adminbereich soll man nun die verschiedenen Einträge des Navi-Menüs nach oben bzw. nach unten verschieben können, sodass der Eintrag „Startseite“ nicht mehr oben sondern ganz unten im Navi-Menü steht. Dann soll die Listbox komplett von oben nach unten ausgelesen werden, wobei die verschobenen Options berücksichtigt werden sollen. Anhand der sichtbaren Anordnung in der Listbox soll nun der Text-Eigenschaft der oben stehenden Listbox-Option die ID 1 zugeordnet werden, der sichtbaren 2. Option die ID 2 usw. und diese neu festgelegten IDs sollen dann in die Datenbank geschrieben werden.

Ich hoffe man kann meine Gedankengänge nun etwas nachvollziehen

Wenn es Dich interessiert, kann ich Dir per PM einen Link
schicken, wo die Methoden und Funktionen verwendet werden, die
Du dafür brauchst.

Ja, bitte gerne
Danke schonmal

MfG KeksLord