[GELÖST] Werte aus Eingabefeldern weiterverarbeiten/anpassen

M.M. · 07. Juni 2016

Hallo,

es würde mich sehr freuen, wenn ihr mir bei folgendem Anliegen behilflich sein könntet:

Ich möchte Texte, die in Eingabefeldern eingetragen werden, verarbeiten und optisch aufhübschen (Schriftgröße, Positionierung, ...), um die Eingaben anschließend auf Papier ausdrucken zu können.

Habe folgenden Code-Schnippsel bereits gebaut, der die Werte der Input Boxes nach Betätigung des Druckknopfes in die vorhandene HTML-Datei schreibt:

HTML:

<script type="text/javascript">
    function wertedrucken() {
        var div = document.getElementById("divId");
        div.innerHTML += "<font size='10'>" + form.inputobj1.value + "</font>";
        div.innerHTML += form.inputobj2.value + "<br>" ;
    }
</script>

<form name="form">
    <input name="inputobj1" value="123" />
    <input name="inputobj2" value="abc"/>
	<br>
	<br>
    <input name="Druck" type="button" onclick ="wertedrucken();" value="Drucken"> 
</form>

<div id="divId">
</div>

Mit dem aktuellen Code erhalte ich dieses Ergebnis:

Im Endeffekt möchte ich jedoch erreichen, dass nach Betätigung des Druckknopfes die Werte der Felder in eine separate Datei geschrieben werden.
Zudem möchte ich anhand der JS-Funktion festlegen an welcher Stelle die Werte in der erzeugten HTML-Datei platziert werden.

Dormilich · 07. Juni 2016

Im Endeffekt möchte ich jedoch erreichen, dass nach Betätigung des Druckknopfes die Werte der Felder in eine separate Datei geschrieben werden.

dazu brauchst du was serverseitiges. JS hat aus Sicherheitsgründen keine Schreibrechte auf dem Client. und am besten dann etwas, dass PDFs erzeugt, da HTML nicht für (Papier-)Seitenlayouts gedacht ist.

2. zur Stilbearbeitung nimmt man CSS, keine seit Jahrzehnten als veraltet markierten Elemente.

3. für die Druckausgabe von HTML sind die print media Angaben ausschlaggebend.

M.M. · 07. Juni 2016

Hallo Dormilich,

vielen Dank für deine Antworten.

Dormilich schrieb:
dazu brauchst du was serverseitiges. JS hat aus Sicherheitsgründen keine Schreibrechte auf dem Client. und am besten dann etwas, dass PDFs erzeugt, da HTML nicht für (Papier-)Seitenlayouts gedacht ist.

Werde mal schauen was für Lösungen es dazu gibt.

Dormilich schrieb:
2. zur Stilbearbeitung nimmt man CSS, keine seit Jahrzehnten als veraltet markierten Elemente.

Ich würde die Anpassung der Schrift auch lieber über CSS verwirklichen, aber weiß nicht wie ich dies in der Funktion eintragen soll.
Kannst du mir helfen?

Wie würde ich z.B. diesen CSS-Code in einem Rutsch per JS-Funktion übergeben?

HTML:

<style type="text/css">			
       #Ueberschrift {position:absolute; 
                           top:10px; 
                           left:320px; 
                          font-size:24px;
                     }
	</STYLE>

kkapsner · 07. Juni 2016

M.M. schrieb:
Wie würde ich z.B. diesen CSS-Code in einem Rutsch per JS-Funktion übergeben?

Du musst da doch gar nichts übergeben. Du musst nur im HTML, das du in dein <div> einfügst, die entsprechenden CSS-Klassen hinterlegen.

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.heading {
	font-size: large;
	font-weight: bold;
}</style>
</head>
<body>
inhalt
<script type="text/javascript">
    function wertedrucken() {
        var div = document.getElementById("divId");
        div.innerHTML += "<div><span class=\"heading\">" + form.inputobj1.value + "</span> " +
        	form.inputobj2.value + "</div>" ;
    }
</script>

<form name="form">
    <input name="inputobj1" value="123" />
    <input name="inputobj2" value="abc"/>
	<br>
	<br>
    <button type="button" onclick="wertedrucken();">Drucken</button> 
</form>

<div id="divId">
</div>
</body>
</html>

M.M. · 09. Juni 2016

kkapsner schrieb:
Du musst da doch gar nichts übergeben. Du musst nur im HTML, das du in dein <div> einfügst, die entsprechenden CSS-Klassen hinterlegen

Stimmt. Darauf bin ich erst später gekommen. Dann lag ich mit meinem zweiten Gedanken also richtig. Danke.

Nochmal zurück zum Ausdruck der eingegebenen Werte:
Die Ausgabe über PDF lässt sich nicht realisieren, da das Formular innerhalb einer Software läuft, welche nicht zulässt, dass aus dem HTML heraus herunterladbare Dateien erstellt werden.

Habe mir das bereits erwähnte "@media print {}" angesehen.
Das tut genau das, was ich erreichen möchte.

Bei meinen Tests habe ich es jedoch nur geschafft, Textbereiche auszudrucken, die bereits im HTML-Code hinterlegt sind. Die Werte aus den Eingabefeldern, die erst auf Knopfdruck in das Formular geschrieben werden, bekam ich damit bisher nicht ausgedruckt.

Ist das überhaupt möglich?
Wenn ja: Wie?
Wenn nicht: Gibt es eine Alternative, um Werte aus Eingabefeldern direkt und positioniert/formatiert auszudrucken?

Dormilich · 09. Juni 2016

M.M. schrieb:
Ist das überhaupt möglich?

sollte eigentlich. z.B. Google Maps kann man ja auch drucken und dort ist fast alles mit JS generiert.

M.M. · 09. Juni 2016

Danke nochmals für eure Unterstützung.

Die Anforderung konnte nun mit diesem Code erfüllt werden:

Code:

<script type="text/javascript">
    function werteverarbeiten() {
        var div = document.getElementById("divId");
        div.innerHTML += "<div id='Objekt1'>" + form.inputobj1.value + "</div>";
        div.innerHTML += "<div id='Objekt2'>" + form.inputobj2.value + "</div>" ;
    }
	
	function printdiv(printpage) {
            
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
</script>

<style type="text/css">			
       #Objekt1 {position:absolute; top:100px; left:320px; font-size:50px;}
	   #Objekt2 {position:absolute; top:150px; left:320px; font-size:50px;}
</style>

<form name="form">
    <input name="inputobj1" value="123" />
    <input name="inputobj2" value="abc"/>
	<br>
	<br>
    <input name="Text_Erstellen" type="button" onclick ="werteverarbeiten();" value="Text erstellen"> 
	<input name="Druck2" type="button" onclick ="printdiv('divId') ;" value="Text drucken"> 
</form>

<div id="divId">
</div>

mikdoe · 09. Juni 2016

danke für das zeigen der lösung

Dormilich · 10. Juni 2016

solange kein User FireFox benutzt, mag das gehen.

kkapsner · 10. Juni 2016

Mit dieser Lösung kannst du aber eine Menge Probleme bekommen... und inperformant ist sie auch noch. So werden alle Eingaben in irgendwelche Felder und alle Scrollpositionen zurückgesetzt.

Warum arbeitest du nicht mit der media Angabe? Das funktioniert wunderbar und hat keine hässlichen Nebeneffekte:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">			
	#Objekt1 {position:absolute; top:100px; left:320px; font-size:50px;}
	#Objekt2 {position:absolute; top:150px; left:320px; font-size:50px;}
</style>
<style type="text/css" media="print">
	html .printing * {
		display: none;
	}
	html .printing #divId, html .printing #divId * {
		display: initial;
	}
</style>
</head>
<body>
<script type="text/javascript">
	function werteverarbeiten() {
		var div = document.getElementById("divId");
		div.innerHTML +=
			"<div id='Objekt1'>" + form.inputobj1.value + "</div>" +
			"<div id='Objekt2'>" + form.inputobj2.value + "</div>";
	}

	function printdiv() {
		document.body.className += " printing";
		window.print();
		document.body.className = document.body.className.replace(/\s*\bprinting\b(\s*)/g, "$1");
	}
</script>

<form name="form">
    <input name="inputobj1" value="123" />
    <input name="inputobj2" value="abc"/>
	<br>
	<br>
    <input name="Text_Erstellen" type="button" onclick ="werteverarbeiten();" value="Text erstellen"> 
	<input name="Druck2" type="button" onclick ="printdiv();" value="Text drucken"> 
</form>

<div id="divId"></div>
</body>
</html>

@Dormilich: was meinst du genau?

Dormilich · 10. Juni 2016

kkapsner schrieb:
@Dormilich: was meinst du genau?

FF hat meines Wissens noch nie document.all unterstützt.

kkapsner · 12. Juni 2016

Doch - tut er.

Aber du hast rest, dass man das nicht verwenden sollte.

[GELÖST] Werte aus Eingabefeldern weiterverarbeiten/anpassen

M.M.

New member

Dormilich

New member

M.M.

New member

kkapsner

Super Moderator

M.M.

New member

Dormilich

New member

M.M.

New member

mikdoe

Moderator

Dormilich

New member

kkapsner

Super Moderator

Dormilich

New member

kkapsner

Super Moderator