HTML Formular als Texausgabe anzeigen

system · 5. Oktober 2013 um 19:13

Hallo Zusammen

Seit Stunden versuche ich ein HTML Formular so zu gestallten, dass beim |submit| drücken auf der gleichen HTML Seite eine Zusammenfassung in einem Textfeld „zusammen-generiert“.

Kann mir jemand einen Tipp / Hilfestellung geben, wie ausgewählte Drop-Down Menüs, Text/Nummer-Felder inkl. Ausgewählte Zeit/Datum > in ein weiteres Textfeld zusammen anzeigen kann?

Es muss keine fertige Vorlage sein, das ich einfach weiter komme

Hier der Code:

[HTML]

Mobile Fault Report

<img id="top" src="top.png" alt="">
<div id="form_container">

    <h1><a>Mobile Fault Report</a></h1>
    <form id="form_718109" class="appnitro"  method="post" action="">
                <div class="form_description">
        <h2>Mobile Fault Report</h2>
        <p>Enter all necessary information about the fault.</p>
    </div>                      
        <ul >
      
                <li id="li_4" >
    <label class="description" for="element_4">Acc </label>
    <div>
        <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/>
    </div><p class="guidelines" id="guide_4"><small>Guideline Acc</small></p>
    </li>        <li id="li_7" >
    <label class="description" for="element_7">Nr </label>
    <div>
        <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
    </div><p class="guidelines" id="guide_7"><small>Guideline Nr</small></p>
    </li>        <li id="li_9" >
    <label class="description" for="element_9">DE </label>
    <div>
        <input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value=""/>
    </div><p class="guidelines" id="guide_9"><small>Guideline DE</small></p>
    </li>        <li class="section_break">
        <h3>Section Break</h3>
        <p></p>
    </li>        <li id="li_6" >
    <label class="description" for="element_6">Option </label>
    <div>
    <select class="element select small" id="element_6" name="element_6">
        <option value="" selected="selected"></option>

1 2 3 4

    </select>
    </div><p class="guidelines" id="guide_6"><small>Select Option</small></p>
    </li>        <li id="li_12" >
    <label class="description" for="element_12">Nummer 1 </label>
    <div>
        <input id="element_12" name="element_12" class="element text medium" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_13" >
    <label class="description" for="element_13">Nummer 2 </label>
    <div>
        <input id="element_13" name="element_13" class="element text medium" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_1" >
    <label class="description" for="element_1">Time </label>
    <span>
        <input id="element_1_1" name="element_1_1" class="element text " size="2" type="text" maxlength="2" value=""/> :
        <label>HH</label>
    </span>
    <span>
        <input id="element_1_2" name="element_1_2" class="element text " size="2" type="text" maxlength="2" value=""/> :
        <label>MM</label>
    </span>
    <span>
        <input id="element_1_3" name="element_1_3" class="element text " size="2" type="text" maxlength="2" value=""/>
        <label>SS</label>
    </span>
    <span>
        <select class="element select" style="width:4em" id="element_1_4" name="element_1_4">
            <option value="AM" >AM</option>
            <option value="PM" >PM</option>
        </select>
        <label>AM/PM</label>
    </span><p class="guidelines" id="guide_1"><small>Please specify a precise time</small></p>
    </li>        <li id="li_2" >
    <label class="description" for="element_2">Date </label>
    <span>
        <input id="element_2_1" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text"> /
        <label for="element_2_1">MM</label>
    </span>
    <span>
        <input id="element_2_2" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text"> /
        <label for="element_2_2">DD</label>
    </span>
    <span>
        <input id="element_2_3" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text">
        <label for="element_2_3">YYYY</label>
    </span>

    <span id="calendar_2">
        <img id="cal_img_2" class="datepicker" src="calendar.gif" alt="Pick a date.">  
    </span>
    <script type="text/javascript">
        Calendar.setup({
        inputField    : "element_2_3",
        baseField    : "element_2",
        displayArea  : "calendar_2",
        button        : "cal_img_2",
        ifFormat    : "%B %e, %Y",
        onSelect    : selectDate
        });
    </script>
    <p class="guidelines" id="guide_2"><small>Please enter the Issue Date</small></p>
    </li>        <li class="section_break">
        <h3>Section Break</h3>
        <p></p>
    </li>        <li id="li_14" >
    <label class="description" for="element_14">Beschreibung 1 </label>
    <div>
        <input id="element_14" name="element_14" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_15" >
    <label class="description" for="element_15">Beschreibung 2 </label>
    <div>
        <input id="element_15" name="element_15" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_16" >
    <label class="description" for="element_16">Beschreibung 3 </label>
    <div>
        <input id="element_16" name="element_16" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_17" >
    <label class="description" for="element_17">Beschreibung 4 </label>
    <div>
        <input id="element_17" name="element_17" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_18" >
    <label class="description" for="element_18">Beschreibung 5 </label>
    <div>
        <input id="element_18" name="element_18" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_19" >
    <label class="description" for="element_19">Beschreibung 6 </label>
    <div>
        <input id="element_19" name="element_19" class="element text large" type="text" maxlength="255" value=""/>
    </div>
    </li>        <li id="li_10" >
    <label class="description" for="element_10">Grosse Beschreibung  </label>
    <div>
        <textarea id="element_10" name="element_10" class="element textarea medium"></textarea>
    </div>
    </li>        <li id="li_20" >
    <label class="description" for="element_20">Zusammenfassung </label>
    <div>
        <textarea id="element_20" name="element_20" class="element textarea large"></textarea>
    </div>
    </li>
      
                <li class="buttons">
            <input type="hidden" name="form_id" value="718109" />
          
            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
    </li>
        </ul>
    </form>  
    <div id="footer">
        Generated by <a href="http://www.phpform.org">pForm</a>
    </div>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>

[/HTML]

Cheffchen · 5. Oktober 2013 um 21:05

hallö,
wie zusammenfassen?
na du verarbeitest doch die Daten nach dem senden, wo ist das Problem dann alles in einer variable zu packen und dann wo auszugeben.
verstehe die frage deswegen nicht so ganz.

cheffchen

Tronjer · 5. Oktober 2013 um 23:10

Das ist vom Ansatz her falsch.

Ein Formular dient dazu, Daten per POST oder GET weiterzureichen, und der Submit-Button ruft die im Action-Attribut angegebene URL auf. Dazu wird immer ein Seiterefresh durchgeführt, bei dem die Daten aus den Textfeldern verschwinden.

Die erste Frage wäre also, welchen Zweck die Zusammenfassung der Eingaben erfüllen soll: Damit der User vor dem Versenden des Formulars noch einmal alles auf einen Blick hat, oder nach dem Versand eine Zusammenfassung erhält? Im ersten Fall wäre eine JS-Lösung denkbar, welche die Daten beim Wechsel des Input-Feldes in die Textarea überträgt, im zweiten würde eine neue Seite aufgerufen, auf der die in POST abgelegten Daten ausgegeben werden.

Dazu sind dann allerdings Kenntnisse in JavaScript und PHP/MySQL notwendig. Nur mit HTML lässt sich das nicht erreichen.

system · 6. Oktober 2013 um 08:25

Danke für dein Feedback.

Ich möchte gerne das spätestens beim |submit| drücken eine Zusammenfassung generiert wird. So ne Art „Ticketing“-Meldung erstellt und ich nur noch mit Copy/Paste in ein IT Ticket System absenden kann.

Habt ihr irgendwelche kleine Vorlagen?

Tronjer · 6. Oktober 2013 um 11:45

Du hast es aber nicht verstanden.

Beim Klick auf dem submit Button liegen alle Daten aus den Input-Feldern in POST und können beliebig verarbeitet werden. Für ein vereinfachtes Ticket-System wäre folgender Flow denkbar:

Die Daten werden in einer Datenbank abgelegt.
Die im Action-Attribut angegebene URL zeigt dem User ein Feedback-Formular (Vielen Dank für Ihre Meldung …), welches Einträge aus der Datenbank ausliest. Dazu gehören eine Ticket-ID, die z.B. aus der ID des Datenbankeintrages und dessen Timestamp generiert werden könnte, sowie eine Statusmeldung (unbearbeitet/erledigt).
Der User erhält eine Email mit der Ticket-ID, welche auf eine Seite verlinkt, auf der er sich über Status seiner Anfrage informieren kann.
Der Customer Service (du) erhältst eine Email mit Ticket-ID und einer Zusammenfassung des User-Requests.
Du bearbeitest den Request in Form einer Antwort, welche dem entsprechenden Datenbankeintrag zugeordnet wird.
Der User erhält eine Email, welche ihn über die Bearbeitung seiner Anfrage informiert. Die in der Mail verlinkte Seite zeigt ihm nun deine Antwort.

Dafür gibt es keine fertigen Vorlagen, und auch wenn du ein solches Ticket-Modul im Netz finden solltest, müsstest du es immer noch mit der eigenen Datenbank verbinden können. Also nimm das entweder als Anlass, dich etwas mit Webprogrammierung zu beschäftigen, oder falls die Aufgabe wichtig/kommerziell sein sollte, leite sie an die Jobbörse weiter.