Dynamisch per Javascript HTML-Code im DFML-Abschnitt erzeugen

Santoselhelper · 24. März 2010

Hallo ...

ich stehe vor folgendem Problem und hoffe Sie/Ihr könnt mir helfen.

Ich habe ein Formular "Besuchstermine" geschrieben in dem der Mitarbeiter seine anstehenden Besuchstermine den Kollegen mitteilen kann. Mit einem "+"-Button kann dann ein weiterer Termin hinzugefügt werden. Dieser weitere Termin wird per Javascript erzeugt. Um nun die Ausgabe-Seite zu erstellen benutze ich ebenfalls Javascript und füge den erstellten Termin ebenfalls in der DFML-Sektion hinzu. Wenn ich das ganze im Browser ausprobiere funktioniert das alles auch prima nur wenn ich das in David als Formular starte, geht es nicht. Grund ist, der per Javascript erzeugte HTML-Code kann nicht in den DFML-Abschnitt geschrieben werden, da die Tabelle im DFML-Abschnitt nicht bekannt ist und scheinbar es erst beim "Abschicken" erstellt wird.
Welche Möglichkeiten gibt es mein Vorhaben umzusetzen? Ich habe auch schon an "Application Forms" gedacht bzw. von den FileScanServices gelesen... aber keine Ahnung wie ich das umsetzen soll.

Ich paste hier mal den Quellcode und dann kann man es vielleicht besser verstehen.

Code

<title>Besuchstermine</title>
##HEAD##
##WINDOWSIZE=600,790 fixed nobuttons##


##CONTENT##


##FORM##


##LARGE##Besuchstermine##/LARGE## ##I-CON##


<script language=javascript>


var counter = 0;


function addNewSection()
{
  counter++;


  var tbody = document.getElementById('tblInput').getElementsByTagName('tbody')[0];


  var row1 = document.createElement('tr');
  var row2 = document.createElement('tr');
  var row3 = document.createElement('tr');
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var td3 = document.createElement('td');
  var myText1 = document.createTextNode("Datum");
  var myText2 = document.createTextNode("Firma");
  var myText3 = document.createTextNode("Uhrzeit");
  var b1 = document.createElement('b');
  var b2 = document.createElement('b');
  var b3 = document.createElement('b');
  var br1 = document.createElement('br');
  var br2 = document.createElement('br');
  var br3 = document.createElement('br');
  var myPTag1 = document.createElement('p');
  var myPTag2 = document.createElement('p');
  var myPTag3 = document.createElement('p');

  myPTag1.style.marginTop = "20px";
  myPTag2.style.marginTop = "20px";
  myPTag3.style.marginTop = "20px";

  td1.appendChild(myPTag1);
  b1.appendChild(myText1);
  myPTag1.appendChild(b1);
  myPTag1.appendChild(br1);


  var inputFieldDate =  document.createElement('input');
  inputFieldDate.id = "input";
  inputFieldDate.type = "text";
  inputFieldDate.size = "55";
  inputFieldDate.name = ("date"+counter);
  myPTag1.appendChild(inputFieldDate);


  //--------------------------------

  td2.appendChild(myPTag2);
  b2.appendChild(myText2);
  myPTag2.appendChild(b2);
  myPTag2.appendChild(br2);


  var inputFieldCompany =  document.createElement('textarea');
  inputFieldCompany.id = "inputarea";
  inputFieldCompany.rows = "5";
  inputFieldCompany.cols = "56";
  inputFieldCompany.name = ("company"+counter);
  myPTag2.appendChild(inputFieldCompany);
 
  //--------------------------------

  td3.appendChild(myPTag3);
  b3.appendChild(myText3);
  myPTag3.appendChild(b3);
  myPTag3.appendChild(br3);


  var inputFieldTime =  document.createElement('input');
  inputFieldTime.id = "input";
  inputFieldTime.type = "text";
  inputFieldTime.size = "55";
  inputFieldTime.name = ("time"+counter);
  myPTag3.appendChild(inputFieldTime);
 
  //--------------------------------

  row1.appendChild(td1);
  tbody.appendChild(row1);
  row2.appendChild(td2);
  tbody.appendChild(row2);
  row3.appendChild(td3);
  tbody.appendChild(row3);

  //------------------------------------------------------
  //------------------------------------------------------
  var tbodyResult = document.getElementById('tblResult').getElementsByTagName('tbody')[0];


  var rowResult1 = document.createElement('tr');
  var rowResult2 = document.createElement('tr');
  var rowResult3 = document.createElement('tr');
  var tdResult1 = document.createElement('td');
  var tdResult2 = document.createElement('td');
  var tdResult3 = document.createElement('td');
  var myTextResult1 = document.createTextNode("Datum");
  var myTextResult2 = document.createTextNode("Firma");
  var myTextResult3 = document.createTextNode("Uhrzeit");
  var bResult1 = document.createElement('b');
  var bResult2 = document.createElement('b');
  var bResult3 = document.createElement('b');
  var brResult1 = document.createElement('br');
  var brResult2 = document.createElement('br');
  var brResult3 = document.createElement('br');
  var myPTagResult1 = document.createElement('p');
  var myPTagResult2 = document.createElement('p');
  var myPTagResult3 = document.createElement('p');

  myPTagResult1.style.marginTop = "20px";
  myPTagResult2.style.marginTop = "20px";
  myPTagResult3.style.marginTop = "20px";

  tdResult1.appendChild(myPTagResult1);
  bResult1.appendChild(myTextResult1);
  myPTagResult1.appendChild(bResult1);
  myPTagResult1.appendChild(brResult1);


  var dateResult = document.createTextNode("##date"+counter+"##");
  myPTagResult1.appendChild(dateResult);


  //--------------------------------

  tdResult2.appendChild(myPTagResult2);
  bResult2.appendChild(myTextResult2);
  myPTagResult2.appendChild(bResult2);
  myPTagResult2.appendChild(brResult2);


  var inputFieldCompanyResult =  document.createElement('textarea');
  inputFieldCompanyResult.id = "inputarea1";
  inputFieldCompanyResult.rows = "5";
  inputFieldCompanyResult.cols = "56";
  inputFieldCompanyResult.name = ("company"+counter);
  inputFieldCompanyResultText = document.createTextNode("##company"+counter+"##");
  myPTagResult2.appendChild(inputFieldCompanyResult);
  inputFieldCompanyResult.appendChild(inputFieldCompanyResultText);
 
  //--------------------------------

  tdResult3.appendChild(myPTagResult3);
  bResult3.appendChild(myTextResult3);
  myPTagResult3.appendChild(bResult3);
  myPTagResult3.appendChild(brResult3);


  var timeResult = document.createTextNode("##time"+counter+"##");
  myPTagResult3.appendChild(timeResult);
 
  //--------------------------------

  rowResult1.appendChild(tdResult1);
  tbodyResult.appendChild(rowResult1);
  rowResult2.appendChild(tdResult2);
  tbodyResult.appendChild(rowResult2);
  rowResult3.appendChild(tdResult3);
  tbodyResult.appendChild(rowResult3);
  }


function removeSection()
{
counter--;
for (f=0;f<=4;f++)
  {
	var tbl1 = document.getElementById('tblInput');
	var lastRow = tbl1.rows.length;
	if (lastRow > 3) tbl1.deleteRow(lastRow - 1);

	//-------------------------------------------------

	var tbl2 = document.getElementById('tblResult');
	var lastRow = tbl2.rows.length;
	if (lastRow > 3) tbl2.deleteRow(lastRow - 1);
  }
}


</script>


<p>Schreiben Sie mit Hilfe dieses Formulars eine interne Nachricht an die Kollegen und informieren Sie somit über Ihre anstehende Besuchstermine.</p>
<br><hr><br>
<table id="tblInput">
<tbody>
<tr><td>
<p style="margin-top: 20px;"><B>Datum</B><BR>
<input type="text" name="date0" size="55" id=input></p></td></tr>
<tr><td>
<p><B>Firma</B><BR>
<textarea name="company0" cols=56 rows=5 id=inputarea></textarea></p></td></tr>
<tr><td>
<p><B>Uhrzeit</B><BR>
<input type="text" name="time0" size="55" id=input></p></td></tr>
</tbody>
</table>


<p style="margin-top: 40px">
<input type=submit value="Abschicken" id=button name="send">
<input type=button value="Abbrechen" id=button name="exit">
<input type=button value=" + " id=buttonbold onclick="addNewSection();">
<input type=button value=" - " id=buttonbold onclick="removeSection();">
</p>


##/FORM##


##/CONTENT##


##TAIL##


<DFML name=exit option=nosend option=close>


</DFML>


<DFML name=SEND>
@@EMAIL foo@bar.com
@@SUBJECT Besuchsbericht: ##date0## 
@@HTML


<HTML>
<HEAD>
  <TITLE>Your Company</TITLE>


<style type="text/css">
<!--
BODY { font-family: VERDANA, ARIAL, HELVETICA, SANS-SERIF; font-size: 10pt; }


A:link { color: #000000; text-decoration: none }
A:visited { color: #000000; text-decoration: none }
A:active { color: #000000; text-decoration: none }
A:hover { color: #000000; text-decoration: none }


#input { border-style: solid; border-color:#C0C0C0; border-width:1px; }
#input-noborder { border-style: solid; border-color:#C0C0C0; border-width:0px; }
#inputarea1 { overflow: auto; font-family: Tahoma; border-style: none; }
#button { background-color: "#FFFFFF"; border-style: solid; border-color:#000000; border-width:1px; }
#buttonbold { font: bold; background-color: "#FFFFFF"; border-style: solid; border-color:#000000; border-width:1px; }






td { font-family: VERDANA, ARIAL, HELVETICA, SANS-SERIF; font-size: 10pt; }
p { margin-top:10px; margin-bottom:0px; } 	
-->
</style>
</HEAD>


<BODY  TEXT="#000000" 
   	BGCOLOR="#C0C0C0"
   	LINK="#000000" 
   	ALINK="#000000" 
   	VLINK="#000000"
   	scroll="auto"


   	LEFTMARGIN="10" 
   	TOPMARGIN="10" 
   	MARGINWIDTH="10" 
   	MARGINHEIGHT="10">


<table width=100% height=100% border=0 cellpadding=20 cellspacing=0 bgcolor="#FFFFFF">
<tr><td valign=top>


<FORM>


<FONT SIZE="4"><B>Besuchstermine</B></FONT>


<p>Hallo Kollegen, folgende Termine stehen an:</p>
<br><hr><br>
<table id="tblResult">
<tbody>
<tr><td>
<p style="margin-top: 20px;"><B>Datum</B><BR>
##date0##</p></td></tr>
<tr><td>
<p><B>Firma</B><BR>
<textarea name="company" cols=56 rows=5 id=inputarea1>##company0##</textarea></p></td></tr>
<tr><td>
<p><B>Uhrzeit</B><BR>
##time0##</p></td></tr>
</tbody>
</table>
</FORM>


</tr></td></table>


</BODY>
</HTML>
</DFML>

Alles anzeigen

Ich hänge auch nochmal den Quellcode als .txt File an, dann kann man es nach umbenennen in .html direkt im Browser testen!

Vielleicht kann man das ein oder andere an dem Quelltext einfacher oder besser gestalten, aber ich bin noch ziemlich neu in der Materie.

Vielen Dank schon mal für die Hilfe und Anregungen zu einer Lösung. MfG

Teardrop · 24. März 2010

Hallo,

was genau soll denn mit den Besuchsterminen passieren? Einfach per E-Mail versenden?

Generell musst Du bei Javascript daran denken, dass es Clientseitig läuft. Nimm z.B. PHP und JavaScript. Du kannst in Javascript erzeugte Daten nicht direkt an PHP übergeben, da PHP auf dem Server ausgeführt wird, und JS nur auf Deinem Client.
Vereinfacht ausgedrückt musst Du also mit JS Daten ins Dokument schreiben und diese Daten von PHP auslesen. Ähnlich ist es hier auch.

Die HTML Daten die Du im DFML Teil angibst sind die, die Du versendest. Hier besteht auch gar kein Bezug zum JS Teil. Du änderst mit dem JS (was ich mir im Detal nicht angeschaut habe) Teil nur die Ansicht im Browser, Deinem Client. Ein anderer Nutzer würde von diesen Änderungen nichts mitbekommen. Du musst aber Einfluss auf den Inhalt nehmen.
Daher musst Du dieses Daten in eine Variable speichern und dann im DFML Teil auf diese zugreifen. Normalerweise macht man das über ein Hidden Input Field. Ob man da aber soviele Daten reinschreiben kann, wage ich zu bezweifeln. Ist aber einen Versuch wert.

Gruß Jens

Santoselhelper · 24. März 2010

Hallo Jens,

vielen Dank für die schnelle und kompetente Antwort.
Ja, ich hatte vor die Besuchstermine per E-Mail zu versenden. Deine Erklärung mit server- und clientseitiger Ausführung von Code leuchten mir absolut ein und daran habe ich gar nicht gedacht. Der Ansatz mit dem hidden-input-field hört sich doch ganz gut an und ich werde das mal testen. Heißt das, das ich den dynamisch erzeugten HTML-Code in dieses hidden-input-field (Variable) schreibe und dann im DFML-Teil auf diese Variable dann zurückgreife?

Vielen Dank und einen schönen Tag

Gruß

Fabian

Teardrop · 24. März 2010

Hallo Fabian,

Zitat von Santoselhelper

Heißt das, das ich den dynamisch erzeugten HTML-Code in dieses hidden-input-field (Variable) schreibe und dann im DFML-Teil auf diese Variable dann zurückgreife?

ja, genau. Beim Klick auf Senden z.B. schreibst Du die Daten in das Input Field und im DFML Teil greifst Du mit ##inputfieldname## auf diese Variable zu.

Wobei ich wie gesagt bezweifle, dass das Input Field beliebig viele Zeichen aufnimmt. Vielleicht geht es aber mit einer TextArea wenn man diese mittels JS versteckt oder sowas. Im Zeifelsfall letztere noch in ein DIV packen und das ausblenden, dass sollte auf jeden Fall klappen, darauf basieren ja auch viele Ajax Anwendungen.

Gruß Jens

DonManfred · 27. März 2010

Die Beschränkung der "Menge" wird eigentlich nur durch den Webserver oder php limitiert. Das liegt üblicherweise bei mehreren Megabytes und sollte für ´ne eMail locker ausreichen.

Also: Ja, mit einem hiddenfeld sollte das normal funktionieren von der Menge her.

Edith: Habs nochmal nachgeschaut, hier:
"Wenn Sie die GET-Methode verwenden, beträgt das maximale Limit 2.048 Zeichen minus die Anzahl der Zeichen im eigentlichen Pfad.

Bei der POST-Methode besteht jedoch kein Limit bezüglich der URL-Länge für die Übermittlung von Name/Wert-Paaren, da diese Paare nicht im URL, sondern im Header übermittelt werden."

Dynamisch per Javascript HTML-Code im DFML-Abschnitt erzeugen

Jetzt mitmachen!

Teilen