• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Formular mit Live Ausgabe + Funktion Copy und Reset

V

vpdberlin

New member
Hallo zusammen,

ich benötige bitte Eure Hilfe, denn ich verzweifle schon. Ich habe nicht wirklich Erfahrungen mit html und JavaScript. Mir wurde mitgeteilt, dass mein Vorhaben mit JS realisierbar wäre.

Ich benötige ein kleines Formular mit sofortiger Ausgabe von den Daten, die in einem HTML Code eingebunden wurden. Dieses kleine Tool soll meine Arbeit etwas erleichtern und Fehler vermeiden.

Hintergrund: Wir arbeiten mit diverseren html Codes die je nach Situation angepasst werden müssen. Da bei einer manuellen Anpassung auch gerne mal eine Dreiecksklammer oder sonstiges mit entfernt wird, zerschießt es auch mal das Format. Wir speichern dann diese HTML Codes in einem Arbeitstool ab und dann sieht es gerne mal nicht mehr so aus wie es soll.

Mein Plan: Für jeden html Code gibt es ein Formular welches die Felder besitzt, die der Mitarbeiter (ich) auszufüllen hat. Unter dem Formular spuckt er in einer Live Ansicht gleich den html Code aus mit meinen zuvor eingegebenen Daten.


Ich habe meine Vorstellung des Formulars mal via Photoshop dargestellt um es euch vllt. etwas leichter zu erläutern. Ich hoffe, es hilft...

tttoooll1.png


Ich benötige nur irgendwie einen Anfang wie ich die input Felder setze und gleich darunter einen Kasten der die Liveausgabe übernimmt. Der Button "Copy" soll dann den Inhalt aus diesem Kasten (HTML Code) in den Zischenspeicher setzen, damit man ihn gleich via Past in das entsprechende Feld im anderen Arbeitsprogramm einfügen kann.

Ich hoffe, es findet sich Jemand der mir hier helfen kann. Bitte!

Vielen Dank im Voraus und einen freundlichen Gruß
Ben
 
Zuletzt bearbeitet von einem Moderator:
Hallo zusammen,

ich habe nun schon ein wenig selbst gesucht und gebastelt.

Die Ausgabe der Felder funktioniert nun und wird auch zusammengesetzt. Nun hänge ich noch daran, dass es nicht wirklich zusammengesetzt werden soll, sondern dazwischen etwas hinzugefügt wird.


Script:

HTML: 
<form oninput="document.getElementById('output').innerHTML = (a.value) + (b.value) + (c.value)">

<br>
<label>Bezeichnug des Textfeldes:<br/>   
<input id="a" type="text" step="any"></label><br><br>
<input id="b" type="text" step="any"><br><br>
<input id="c" type="text" step="any"><br><br>

<output id=output for="a b c"></output>

</form>


Ausgabe (aktuell):
Feld(a)Feld(b)Feld(c)

Mein Wunsch (Ausgabe):
(Stück von einem HTML Code)Feld(a)(Stück von einem HTML Code)Feld(b)(Stück von einem HTML Code)Feld(c)(Stück von einem HTML Code)

Beispiel-Ausgabe:
<b>Feld(a)</b> <a href="url">)Feld(b)</a> <b>Feld(c)</b>


Der Code ist natürlich Käse aber soll nur meine Vorstellung wiedergeben.

Ich hoffe auf Hilfe von Euch :(

Danke und einen lieben gruß
Ben
 
Zuletzt bearbeitet von einem Moderator:
vpdberlin schrieb:
Mein Wunsch (Ausgabe):
(Stück von einem HTML Code)Feld(a)(Stück von einem HTML Code)Feld(b)(Stück von einem HTML Code)Feld(c)(Stück von einem HTML Code)

Beispiel-Ausgabe:
<b>Feld(a)</b> <a href="url">)Feld(b)</a> <b>Feld(c)</b>
Zum Vergrößern anklicken....
var ausgabe = "<b>" + a.value + "</b> <a href="url">" + b.value + ..... usw.
 
OT: Ich würde mich nicht auf den seltsamen Scope von Inline-Eventlistenern von <form>s verlassen. Deswegen solltest du besser this.elements.a.value schreiben. Dadurch wird auch klarer, dass es um ein Element im <form> geht.
 
Hallo,

danke für Eure Hilfe.

Ich habe es hinbekommen. Es funktioniert wie folgt:

HTML: 
<SCRIPT LANGUAGE="JavaScript">
function generateOutput() {
	var a = document.getElementById("a");
	var b = document.getElementById("b");
	var c = document.getElementById("c");
	document.getElementById("output").value = '<br><br><b>TEXT</b> <br><br><b>TEXT: </b> TEXT<br><b>TEXT: </b>' + a.value + '<br><b>TEXT: </b>' + b.value + '<br><b>TEXT: </b>'+ c.value + '<br><b>TEXT</b>TEXT <br><br>';
}
</SCRIPT>

----------------------

HTML: 
<body onload="generateOutput();">

<form id="macreset" name="mac" action="" oninput="generateOutput();"><br>
<label>EINGABEFELD1: <input id="a" type="text" step="any"></label><br><br>
<label>EINGABEFELD2: <input id="b" type="text" step="any"></label><br><br>
<label>EINGABEFELD3: <input id="c" type="text" step="any"></label><br><br>
<br><br>

<div style="background-color:lightgray;
            width:700px;
            height:150px;
            border:1px black solid;
">
<output id=output for="a"></output>
</div>
<br>
</form>

Danke!
 
Zuletzt bearbeitet von einem Moderator:
Sieht gut aus. Ich würde noch das language-Attribut entfernen, da dieses veraltet und unnötig ist, und das HTML einheitlich (Groß- und Kleinschreibung) schreiben.

PS: im for-Attribut des <output>s solltest du alle <input>s, die verwendet werden, angeben.
 
Hallo kkapsner,

danke für Ihre Rückmeldung.

Meinen Sie LANGUAGE="JavaScript" ? Das kann ich komplett entfernen?

for="a" kann man ja eigentlich komplett entfernen, da die Ausgabe ja nun über das // document.getElementById("output").value = // bestimmt wird.

Ganz schön tricky, wenn man von so etwas NULL Ahnung hat :)

----

Ich habe leider noch ein Problem mit der Live-Ausgabe. Die Textfelder funktionieren einwandfrei. doch die Dropdownfelder spucken die Inhalte nicht sofort aus. Waran kann das liegen?

Vielen Dank im Voraus. VG, Ben


HTML: 
<head>
<SCRIPT>

function generateOutput() {
	var a = document.getElementById("a");
	var b = document.getElementById("b");
	var c = document.getElementById("c");
	var d = document.getElementById("d");
	document.getElementById("output").value = '<br><br><b>MAAG</b> <br><br><b>A: </b> MA (B) - ED<br><b>SR: </b>' + a.value + '<br><b>SA: </b>' + b.value + '<br><b>OID: </b>'+ c.value + '<br><b>R: </b>NA / IB <br><br>' + d.value;
}

function ClipBoard() 
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

</head>
<body>

<body onload="generateOutput();">

<form id="macreset" name="mac" action="" oninput="generateOutput();">

<br>
<label>SR: <input id="a" type="text" step="any"></label><br><br>
<label>SA: <input id="b" type="text" step="any"></label><br><br>
<label>UID: <input id="c" type="text" step="any"></label><br><br>


<select id="d" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select><br><br>


<div style="background-color:lightgray;
            width:700px;
            height:150px;
            border:1px black solid;
">

<output id=output ></output>
</div><br>

<button form="macreset" type="reset">Zurücksetzen</button>

</form>
</body>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben