HTML-Code Generieren

Ay Chiquita · 2 April 2007

Hallo Jungs,

Nach langer html.de-Abstinenz habe ich mich wieder zurück-verirrt und möchte nun wieder richtig loslegen.

Doch schon stellt sich mein erstes Problem:

Ich habe vor, ein Formular zu entwerfen, in dem in verschiedenen <form>'s und <input>'s bestimmte Daten vom User eingetragen werden können und durch einen "Generieren"-Button ein HTML-Code (optional auf die Angaben des Users angepasst) dem User angezeigt wird.

Beispiel:

Jeder User soll einen "Steckbrief" seines Autos auf seiner Seite unterbringen können. Hierfür ist bspw. interessant "PS, max. Geschw., von 0 auf 100 in ... usw." - Der User braucht hierzu lediglich ausüllen:

PS? [ FORMULARFELD ]
max. Geschw.? [ FORMULARFELD ]
von 0 auf 100 in? [ FORMULARFELD ]

Durch auf "Generiereren" klicken wird ihm ein Code herausgegeben wie bspw ...

Code:

<table><tr><td>PS</td><td>180</td></tr><tr><td>max. Geschw.</td><td>240</td></tr><tr><td>von 0 auf 100 in</td><td>8 Sek.</td></tr></table>

Zugegeben - Das ist natürlich ein sehr einfaches Beispiel. Doch die Komplexität einer Tabelle lässt sich ja ins Unendliche vergrößern.

Könntet Ihr mir hierbei helfen? Ich weiß ehrlich gesagt nicht einmal mehr, wo ich anfangen soll - Geschweige denn ob dies überhaupt das richtige Forum ist für meine Frage

Euer Fabi

matibaski · 3 April 2007

Ich weiss, das du nach einer JS Lösung suchst, aber mit PHP wäre es auch möglich:

PHP:

<form name="generieren" action="dieaktuelleseite.php?generator=true">
 <input type="text" name="ps" />
 <input type="text" name="max" />
 <input type="text" name="0100" />
</form>

<p>Hier ist der Code für die Tabelle</p>
<quote>
<?php
if(isset($_GET['generator']))
{
if($_GET['generator'] == 'true')
{
 echo'<table>
      <tr>
       <td>PS:</td>
       <td>'.$_REQUEST['ps'].'</td>
      </tr>
      <tr>
       <td>max.Geschwindigkeit</td>
       <td>'.$_REQUEST['max'].'</td>
      </tr>
      <tr>
       <td>0-100:</td>
       <td>'.$_REQUEST['0100'].'</td>
      </tr>
     </table>';
}
}
?>
</quote>

MfG, matibaski

Ay Chiquita · 3 April 2007

Das sieht doch schon sehr viel einfacher aus, als ich es mir mit JavaScript vorgestellt hatte. Eine Sache aber: Wie binde ich im obigen Quelltext nun meinen "Button" ein? Denn: So wie es momentan ausschaut, kann sich der User gar nicht den QT generieren lassen :/

Schnuff · 3 April 2007

HTML:

<html>
<head>

<script type="text/javascript">
function generate(){
	document.getElementById('ausgabe').innerHTML ="<table><tr><td>PS:</td><td>"+document.Auto.PS.value+"</td></tr>"
	+"<tr><td>Maximal Geschwindigkeit:</td><td>"+document.Auto.mkmh.value+" Km/h</td></tr>"
	+"<tr><td>Von 0 auf 100 in:</td><td>"+document.Auto.beschl.value+"</td></tr></table>";
	return false;
}
</script>

</head>
<body>
<form name="Auto">

PS:<input name="PS"><br>
Max-KmH:<input name="mkmh"><br>
Von 0 auf 100 in:<input name="beschl"><br>

<a onclick="generate()" style="cursor:pointer;">Generiere Code.</a><br><br>
</form>
<div id="ausgabe" style="width:100% max-height:200px; overflow:auto;">&nbsp;</div>
</body>
</html>

Das wäre, das was du suchtest ;)
zwar nicht schön, aber selten

matibaski · 3 April 2007

So etwa:

PHP:

<form name="generieren" action="?generator=true" method="post">
PS: <input type="text" name="ps" /><br />
Max. Geschwindigkeit: <input type="text" name="max" /><br />
Zeit von 0-100: <input type="text" name="0100" /><br />
<input type="submit" name="submit" value="GENERIEREN" />
</form>
<p>Hier ist der Code für die Tabelle</p>
<?php
if(!isset($_GET['generator']))
{
echo'<pre>Sie haben noch keinen Code generieren lassen</pre>';
}
else
{
if($_GET['generator'] == 'true')
{
echo'<pre style="border:1px dashed black">
     &lt;table&gt;
      &lt;tr&gt;
       &lt;td>PS:&lt;/td&gt;
       &lt;td&gt;'.$_REQUEST['ps'].'&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;max.Geschwindigkeit&lt;/td&gt;
       &lt;td&gt;'.$_REQUEST['max'].'&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;0-100:&lt;/td&gt;
       &lt;td&gt;'.$_REQUEST['0100'].'&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
     </pre>';
}
}
?>

Hab nen Fehler gemacht.
Habe <pre> vergessen. Denn sonst hätte es die Tabelle umgesetzt.
Habe dir noch etwas dazugeschrieben, dass wenn noch nichts generiert wurde, dass eine Meldung erscheint.

MfG, matibaski

gollum1990 · 3 April 2007

In Javascript gibst eine Funktion namens createElement, die dazugehörigen funktionen wie createTextNode und appendChild kannst du wunderbar nutzen um dir HTML Code zu generieren lassen.

Ay Chiquita · 3 April 2007

Ich denke, dass die PHP-Lösung soweit die beste ist. Vielen, vielen Dank! Ich konnte soweit alles auf meine Anwendungen anpassen, allerdings ergab sich noch ein Problem: Wie erreiche ich, dass nachdam man auf "Generieren" klickt, die Eingaben des Users nicht aus den Formularfeldern verschwinden? So könnte man ggf. die eigenen Einträge editieren und muss nicht gleich alles noch einmal eintragen -

matibaski · 3 April 2007

Klar geht das.
Ich habe es für die Übersicht per GET abschicken lassen, dass man die Übersicht hat.
Es sieht nun so aus:

PHP:

<form name="generieren" action="?generator=true" method="get">
<?php
if(!isset($_GET['submit']))
{
echo'PS: <input type="text" name="ps" /><br />
Max. Geschwindigkeit: <input type="text" name="max" /><br />
Zeit von 0-100: <input type="text" name="0100" /><br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
elseif($_GET['submit'] == 'GENERIEREN')
{
echo'PS: <input type="text" name="ps" value="'.$_GET['ps'].'" /><br />
Max Geschwindigkeit: <input type="text" name="max" value="'.$_GET['max'].'" /><br />
Zeit von 0-100: <input type="text" name="0100" value="'.$_GET['0100'].'" /><br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
else
{
echo'PS: <input type="text" name="ps" /><br />
Max. Geschwindigkeit: <input type="text" name="max" /><br />
Zeit von 0-100: <input type="text" name="0100" /><br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
?>
</form>

<p>Hier ist der Code für die Tabelle</p>
<?php
if(!isset($_GET['submit']))
{
echo'<pre style="border:1px dashed black">Sie haben noch keinen Code generieren lassen</pre>';
}
else
{
if($_GET['submit'] == 'GENERIEREN')
{
echo'<pre style="border:1px dashed black">
     &lt;table&gt;
      &lt;tr&gt;
       &lt;td>PS:&lt;/td&gt;
       &lt;td&gt;'.$_GET['ps'].'&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;max.Geschwindigkeit&lt;/td&gt;
       &lt;td&gt;'.$_GET['max'].'&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;0-100:&lt;/td&gt;
       &lt;td&gt;'.$_GET['0100'].'&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
     </pre>';
}
}
?>

Nun prüft es oben, ob es schon generiert wurde. Wenn nicht, dann setzt es den Normalmodus ein. Wenn doch, dann ruft es bei value="" die $_GET Variablen runter.

Und dann habe ich unten einfach statt $_POST['generator'] einfach $_GET['submit'].

Aber am Script sieht man das alles schon.

MfG, matibaski

edit:
Hier für Kostprobe:
http://matibaski.paradoxe.de/MyB/_private/mybcounter/test.php

Ay Chiquita · 4 April 2007

Obwohl es wohl mittlerweile eher in die Kategorie "PHP" gehört, hier noch einmal mein editierter (und erweiterter) Quelltext. Das Beispiel mit den "Auto-Steckbriefen" war natürlich nur eine Anwendung, deswegen habe ich so stehen lassen. Die eigentlich "Anwendung" werden Sport-Spiel-Sheets sein. Deswegen die neuen Eingabefelder "Score1" und "Score2" (in WYSIWYG-Schreibweise, nicht wundern - dort möchte ich es später anwenden). Hinzu kommen viele "wenn ... dann"-Zeilen, so wird bspw. nun - sofern man nichts einträgt - im ausgegebenen Code eine Eingabe erscheinen wie etwa "Keine Angaben". Dies alles kombiniert mit der vorherigen Antwort, wie man den eigenen Eintrag zum Editieren speichern kann, ergab jenen Quelltext:

PHP:

<form name="generieren" action="?generator=true" method="get">
<?php
if(!isset($_GET['submit']))
{
echo 'PS: <input type="text" name="ps" /><br />
Max. Geschwindigkeit: <input type="text" name="max" /><br />
Zeit von 0-100: <input type="text" name="0100" /><br />
Score T1 <input type="text" size="2" name="team1" />:
<input type="text" size="2" name="team2" />Score T2<br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
elseif($_GET['submit'] == 'GENERIEREN')
{
echo'PS: <input type="text" name="ps" value="'.$_GET['ps'].'" /><br />
Max Geschwindigkeit: <input type="text" name="max" value="'.$_GET['max'].'" /><br />
Zeit von 0-100: <input type="text" name="0100" value="'.$_GET['0100'].'" /><br />
Score T1 <input type="text" size="2" name="team1" value="'.$_GET['team1'].'" />:
<input type="text" size="2" name="team2" value="'.$_GET['team2'].'" />Score T2<br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
else
{
echo'PS: <input type="text" name="ps" /><br />
Max. Geschwindigkeit: <input type="text" name="max" /><br />
Zeit von 0-100: <input type="text" name="0100" /><br />
Score T1 <input type="text" size="2" name="team1" />:
<input type="text" size="2" name="team2" />Score T2<br />
<input type="submit" name="submit" value="GENERIEREN" />';
}
?>
</form>

<p>Hier ist der Code für die Tabelle</p>

<?php
$pfaerdest = $_REQUEST['ps'];
$maxgesch  = $_REQUEST['max'];
$zeit	   = $_REQUEST['0100'];
$team1	   = $_REQUEST['team1'];
$team2	   = $_REQUEST['team2'];

if(!isset($_GET['submit']))
{
echo'<pre style="border:1px dashed black">Sie haben noch keinen Code generieren lassen</pre>';
}
else
{
if($_GET['submit'] == 'GENERIEREN')
{
echo
'<pre style="border:1px dashed black">
	&lt;table&gt;
'; 
if($pfaerdest == '') {
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;Keine Pfaerdestaerken verfuegbar.&lt;/td&gt;
&lt;/tr&gt;
';
}else{
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;'.$pfaerdest.'&lt;/td&gt;
&lt;/tr&gt;
';
}
if($maxgesch == '') {
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;Keine Max. Geschwindigkeit verfuegbar.&lt;/td&gt;
&lt;/tr&gt;
';
}else {
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;'.$maxgesch.'&lt;/td&gt;
&lt;/tr&gt;
';
}
if($zeit == '') {
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;Keine Zeit verfuegbar.&lt;/td&gt;
&lt;/tr&gt;
';
}else {
echo
'&lt;tr&gt;
	&lt;td&gt;PS:&lt;/td&gt;
	&lt;td&gt;'.$zeit.'&lt;/td&gt;
&lt;/tr&gt;
';
}
if($team1 == '') {
echo
'&lt;tr&gt;
	&lt;td&gt;Team1&lt;/td&gt;
	&lt;td&gt;[c=orange]xx[/c]:
';
}
if($team2 == '') {
echo'[c=orange]xx[/c]&lt;/td&gt;
&lt;/tr&gt;
';
}elseif($team1 == $team2) {
echo
'&lt;tr&gt;
	&lt;td&gt;Team1&lt;/td&gt;
	&lt;td&gt;[c=orange]'.$team1.'[/c]:[c=orange]'.$team2.'[/c]&lt;/td&gt;
	&lt;/tr&gt;
';
}elseif($team1 < $team2){
echo
'&lt;tr&gt;
	&lt;td&gt;Team1&lt;/td&gt;
	&lt;td&gt;[c=red]'.$team1.'[/c]:[c=green]'.$team2.'[/c]&lt;/td&gt;
	&lt;/tr&gt;
';
}elseif($team1 > $team2) {
echo
'&lt;tr&gt;
	&lt;td&gt;Team1&lt;/td&gt;
	&lt;td&gt;[c=green]'.$team1.'[/c]:[c=red]'.$team2.'[/c]&lt;/td&gt;
	&lt;/tr&gt;
';
}
echo
'	&lt;/table&gt;
</pre>';
}
?>

Doch: "Parse error: parse error, unexpected $ in index.php on line 136"
Ein unerwartetes Ende? Was habe ich falsch gemacht?

matibaski · 4 April 2007

Wenn auf ?> ein Error landet, dann ist eine Variable ungültig/nicht beendet/undefiniert.
Ich glaube, es liegt daran dass du mehrere elseif's benutzt..

Ich bin mir nicht sicher, ob man mehrere verwenden darf..

Ein anderer kann mir diese Frage sicher auch beantworten.

MfG, matibaski

Ay Chiquita · 5 April 2007

Ahh schrecklich es scheitert immer an den letzten Schritten

da_loki · 5 April 2007

Also an mehreren "else if" kann es nicht liegen.
Er nimmt halt die erste die passt, und ignoriert dann alle anderen.

Um das ganze zu debuggen würde ich dir empfehlen den Code einzurücken, und Zeile für Zeile zu kontrollieren.
Sind alle aufgemachten Klammern auch wirklich geschlossen?
Da hilft nur Zählen ;)
Der Fehler den du da hast, ist meines erachtens einer der "schlimmsten" in Fehler für den Entwickler -.-

Ay Chiquita · 5 April 2007

Woohoo

Fehler gefunden

Es fehlte lediglich ein "}" vor dem "?>". Alles funktioniert so, wie ich es mir vorgestellt habe. Ich danke Euch vielmals, Jungs!

HTML-Code Generieren

Ay Chiquita

Neues Mitglied

matibaski

Guest

Ay Chiquita

Neues Mitglied

Schnuff

Neues Mitglied

matibaski

Guest

gollum1990

Neues Mitglied

Ay Chiquita

Neues Mitglied

matibaski

Guest

Ay Chiquita

Neues Mitglied

matibaski

Guest

Ay Chiquita

Neues Mitglied

da_loki

Guest

Ay Chiquita

Neues Mitglied

Neueste Beiträge