Bei klick auf Button Textfelder anzeigen

bginner · 05.11.11

Hallo zusammen,
also ich habe ein PHP-Skript, in dem ein Textfeld und ein Button existiert.
wenn ich eine Zahl (z.b. 4) in das Textfeld eingebe und anschließend auf den Button klicke, sollen auf der selben seite genau 4 Textfelder erscheinen. Ich habe das bisher nur hinbekommen wenn eine neue Seite angezeigt wird. Das ist eine Test-Aufgabe die ich lösen muss, vielleicht könnt ihr mir dabei helfen. Es darf auch nur PHP und JS verwendet werden.

Mein bisheriger Ansatz sieht wie folgt aus:

Code:

<?PHP
function php_funktion_do()
{
    echo "mach irgendwas";
}
?>
<html>
    <head>
  
    <script type="text/javascript">
    <!-- 
    function exec_php_function()
    {
      document.write("<?PHP php_funktion_do();?>");
    }
    -->
    </script>
  </head>
</html>
<?php
print"<input type='button' value='GO' onclick='exec_php_function();'>"
?>

Leider wird durch document.write eine neue Seite angezeigt, was ja nicht sein soll, gibts da eine entsprechende andere Methode?
Habe auch schon mit .....firstChild.data rumgespielt aber da kann ich nur Text auf der selben seite anzeigen mehr nicht.
Kann mir da jemand einen Tipp geben?
Wäre euch sehr dankbar.

gKar · 05.11.11

Ich benutze ein PHP, aber meines Wissens wird PHP doch nur serverseitig ausgeführt. D.h. Du musst Dir bei jedem Code Gedanken machen, ob ihn der Server ausführen soll (User submittet Daten, Server verarbeitet diese und sendet eine neue HTML-Seite als Response zurück) oder der Client (Browser führt Scriptcode aus und manipuliert ggf. den Seitenaufbau per DOM-Zugriff).
Serverseitig => PHP
Clientseitig => JavaScript

So, nun zu Deinem Problem:
Was meist Du mit „auf derselben Seite“?

Darf eine neue Seite geladen werden, die genauso aussieht, nur eben zusätzliche Felder enthält? D.h. soll der Button submitten und der Server die neue Seite berechnen und ausliefern? => PHP

Oder soll die bereits im Browser geladene HTML-Seite modifiziert werden? Das würde bedeuten, dass der entsprechende Code nur im Browser ausgeführt werden darf und das DOM manipulieren müsste => JavaScript

bginner · 05.11.11

Danke für deine ausführliche Antwort.
Gemeint ist hier der zweite Fall, also die bereits geladene Seite soll modifiziert werden. Würde also den Einsatz von Javascript erfordern.
Habe nun gelesen, das es in Javascript die function "createElement" gibt. Vielleicht könnte ich auf diese Weise Textfelder erzeugen. Vielleicht bringt mich das etwas weiter, oder hat jemand noch eine andere Idee?

torben1 · 05.11.11

Du musst in Deinem Fall auf jeden Fall JS nehmen. Mit cerateElement bist Du auch auf dem richtigen Weg. Wenn Du komplexere Dinge als "nur" das Erzeugen von Elementen vor hast schaue Dir dazu mal ein jQuery (JS-Framework) an. Ansonsten suche Dir ein gutes Tutorial zur DOM-Manipulation.

gKar · 06.11.11

In einfachen Fällen kommt man auch ohne Erzeugung neuer DOM-Knoten aus, indem Dinge unsichtbar mit der Seite ausgeliefert und per JS nur eingeblendet werden.
In diesem Fall genügt das aber nicht, da der einzublendende Inhalt von einer Formulareingabe abhängt.
Ich kann mich torben1 anschließen: jQuery, wenn man es erstmal kennen gelernt hat, vereinfacht viele komplexere JS-Programmierung enorm. In diesem Fall müsste man aber auch noch recht gut ohne auskommen.

Es gibt übrigens noch eine Zwittermöglichkeit, die aber nur sinnvoll ist, wenn der der Seite hinzuzufügende Inhalt sehr komplexer Natur ist oder Informationen vom Server zu dessen Berechnung benötigt werden (was hier wohl kaum der Fall sein dürfte, aber der Vollständigkeit halber): Man kann einen Ajax-Request an den Server senden, welcher daraufhin den einzufügenden HTML-Inhalt zurückliefert, der dann per JavaScript in die Seite eingefügt wird. Das geht auch mit jQuery besonders einfach.

bginner · 06.11.11

Vielen Dank für eure Antworten.
Ich muss dazusagen das ich diese Aufabe spontan bei einem Vorstellungsgespräch lösen sollte.
Deswegen kann ich mir auch nicht vorstellen das man dort so heftige Geschütze wie DOM-Manipulation oder
Ajax einzusetzen hat. Oder ich hab die Aufgabenstellung missverstanden. Denn euere Ratschläge ist schon die
zweite Meinung die ich mir innerhalb von Foren einhole und alle empfehlen mir dasselbe. Ich glaub euch das auch,
aber irgendwas ist da faul, denn wenn es so ein riesiger Aufwand ist das hinzubekommen würde die Lösung nicht
mal eben bei einem Vorstellungsgespräch verlangt werden. Ich habe jetzt in PHP einen Ansatz hinbekommen.
Ich glaub an dieser Stelle kann mir jetzt auch keiner mehr wirklich helfen. Ich werd mal schauen wie ich mit meinem
Ansatz weiterkommen und vielen Dank nochmal für eure Tipps.

torben1 · 06.11.11

Leider ist Dein Ansatz, es mit PHP zu versuchen - nicht Richtig! Der einfachste Weg ist, wie schon geschrieben, JavaScript. Entweder über ein Schleife eine einfache DOM-Manipulation, oder einfach die versteckten Elemente (siehe gKar) anzeigen lassen.

gKar · 06.11.11

Naja, es gäbe schon den „old school way“, die Seite in der modifizierten Form komplett neu zu laden, statt sie zu modifizieren. Das ginge dann per PHP. Deshalb hatte ich ja am Anfang gefragt, was genau eigentlich gewünscht ist.

wdominik · 06.11.11

Grundsätzlich kannst Du die Aufgabe mit einer der beiden Sprachen allein Lösen:
- PHP: Seite mit einem Feld für Anzahl, abschicken mit Parameter, neue Seite mit gewünschter Anzahl von Feldern generieren (ob die Lösung zulässig wäre hängt von der Definition von „auf der selben Seite“ ab.)
- JS: Submit Button ruft Funktion auf, Funktion liest Input-Feld für Anzahl, fügt eine bestimmte Anzahl von Felder ein

Beides ist für jemanden der die Sprache beherrscht recht einfach zu realisieren. In modernen Webapplikationen übernimmt JavaScript eigentlich sämtliche Funktionen, die direkt mit der Benutzer-Interaktion und Darstellung zu tun haben. Also, wenn in Deinem Beispiel die Felder meinet wegen aus einer Datenbank gelesen werden müssten, würde das die server-seitige Logik übernehmen. Der Client würde es bei JS/HttpXMLRequest anfragen, ein JSON-Objekt zurückliefern, JS würde das Objekt auslesen und einen Element-Baum generieren der dann an ein Element im DOM angehängt wird. Aber da bei Deiner Aufgabe ja nur die Anforderung war, eine Anzahl x an Feldern auszugeben, ist eigentlich jede server-seitige Programmierung ala PHP überflüssig.

Stellt sich jetzt natürlich die Frage, ob für die Bewerbung JS Kenntnisse gefordert waren. Falls ja, hättest Du natürlich die Aufgabe lösen müssen, da dass, wie gesagt für jemanden der JS einigermaßen kann, kein Problem sein sollte. Oder möglicherweise hast Du nur das „auf der selben Seite“ falsch verstanden, und die PHP Lösung wäre akzeptabel gewesen. Allgemein finde ich solche Aufgaben für ein Vorstellungsgespräch sehr ungewöhnlich. Da geht es ja eigentlich eher um die persönliche Eignung, weniger um die Fähigkeiten. Zumal einem die Atmosphäre eines solchen Gesprächs schon leicht aus dem Konzept bringen kann.

Mögliche Lösung:

Callback-Funktion für ein click-Event auf den „submit“ button. Submit-Button hat die ID „submit“, Eingabefeld für Anzahl hat die ID „count“ und das Element in welches die neuen Eingabefelder sollen muss die ID „fieldset“ haben.

Code:

var count, fieldset, i;
            
                // suppress default behavior of submit button
                event.preventDefault();
            
                // read input value
                count = + document.getElementById("count").value;
                
                // reference fieldset element
                fieldset = document.getElementById("fields");
                
                // remove all children (input fields) from fieldset
                while (fieldset.hasChildNodes()) {
                    fieldset.removeChild(fieldset.firstChild)
                }
                
                // append 'count' new input elements
                for (i = 0; i < count; i++) {
                    var field = document.createElement("input");
                    field.placeholder = "Feld " + (i + 1);
                    fieldset.appendChild(field);
                }

Wenn mans ganz einfach will gibt es auch die Eigenschaft innerHTML von einem jedem Element, welcher direkt HTML-Code zugewiesen werden kann.

Code:

fieldset.innerHTML = "<input placeholder="Feld 1">…<input placeholder="Feld n">";

Der bestehende HTML-Code innerhalb des Elements wird dabei mit dem neuen Überschrieben. Das ganze ist rein von der Performance her nicht einmal schlecht, da Browser im HTML Parsing echt flott sind. Wenn man natürlich komplexere Strukturen einbindet, leidet darunter nur meist die Qualität des Quelltextes.

Suche

Suche

Bei klick auf Button Textfelder anzeigen

bginner

Ingrid Marie

gKar

Maunzenapfel

bginner

Ingrid Marie

torben1

Celler Dickstiel

gKar

Maunzenapfel

bginner

Ingrid Marie

torben1

Celler Dickstiel

gKar

Maunzenapfel

wdominik

Weißer Winterglockenapfel

Anhänge

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)