Ergebnis 1 bis 10 von 10
Like Tree2Likes
  • 1 Post By kkapsner
  • 1 Post By kkapsner

Thema: Formular mit Live Ausgabe + Funktion Copy und Reset

  1. #1
    vpdberlin ist offline Grünschnabel
    registriert
    28-10-2015
    Beiträge
    6

    Formular mit Live Ausgabe + Funktion Copy und Reset

    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
    Geändert von mikdoe (31-10-2015 um 18:00 Uhr) Grund: gelöst

  2. #2
    vpdberlin ist offline Grünschnabel
    registriert
    28-10-2015
    Beiträge
    6

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    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-Code:
    <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
    Geändert von mikdoe (30-10-2015 um 13:52 Uhr) Grund: html tags

  3. #3
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.642

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    Zitat Zitat von vpdberlin Beitrag anzeigen
    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>
    var ausgabe = "<b>" + a.value + "</b> <a href="url">" + b.value + ..... usw.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    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.

  5. #5
    vpdberlin ist offline Grünschnabel
    registriert
    28-10-2015
    Beiträge
    6

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    Hallo,

    danke für Eure Hilfe.

    Ich habe es hinbekommen. Es funktioniert wie folgt:

    HTML-Code:
    <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-Code:
    <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!
    Geändert von mikdoe (31-10-2015 um 18:00 Uhr) Grund: Code Tags und gelöst

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    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.
    vpdberlin likes this.

  7. #7
    vpdberlin ist offline Grünschnabel
    registriert
    28-10-2015
    Beiträge
    6

    Arrow AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    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-Code:
    <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>

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    Zitat Zitat von vpdberlin Beitrag anzeigen
    Das kann ich komplett entfernen?
    Ja.
    Zitat Zitat von vpdberlin Beitrag anzeigen
    Waran kann das liegen?
    Die <select>s feuern kein oninput-Event, wenn man etwas anderes auswählt, sondern ein onchange. Das musst du hinzufügen.

  9. #9
    vpdberlin ist offline Grünschnabel
    registriert
    28-10-2015
    Beiträge
    6

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    Dankeschön! Es hat funktioniert.

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Formular mit Live Ausgabe + Funktion Copy und Reset

    Zitat Zitat von vpdberlin Beitrag anzeigen
    Dankeschön!
    Bitte - gern geschehen.
    vpdberlin likes this.

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 31-05-2013, 11:42
  2. Formular nach Senden mit Reset-Button löschen
    Von bluemoon21 im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 25-11-2010, 13:40
  3. Formular reset Problem mit IE
    Von badmanners im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 07-02-2006, 14:35
  4. Formular mit Ausgabe im Popup?
    Von c3po im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 17-03-2003, 20:23
  5. Formular Ausgabe
    Von chess-alf im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-06-2001, 15:58

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •