Frage zur Wertübergabe Auswahlliste -> Textfeld

kulle · 19. April 2016

Schönen Guten Tag liebe User,

ich bin Frischling in der Html-Welt und habe zum Thema "Formulare" eine Frage.
Ich möchte aus einem Auswahlfenster das "value" in ein Textfeld übertragen.

Beispiel:
....
< option value="1234"> Schwarz, Christian</option>
< option value="2345"> Krüger, Hans</option>
.....
das Value jedes einzelnen aus der Auswahlliste soll entsprechend in ein separates Textfeld direkt unter der Auswahlliste übertragen werden.

also, wenn ich "Schwarz, Christian" ausgewählt habe soll im unteren Textfeld "1234" stehen.

Welche Funktion wird hierzu benötigt?
Und ist es möglich ohne JS oder php das zu realisieren?
Die Seite selbst soll offline bleiben.

würde mich sehr über eine Antwort freuen.

mit freundlichen Grüßen
kulle

Basi · 19. April 2016

Ohne Javascript wird das nichts. Javascript ist aber auch offline und in jedem halbwegs modernen Browser verfügbar.

Erst HTML:

HTML

<form>
    <select name="namen" id="formularNamen">
        <option value="">Bitte wählen</option>
        <option value="1234">Schwarz, Christian</option>
        <option value="2345">Krüger, Hans</option>
    </select>
    <input type="text" name="nummer" id="formularNummer">
</form>

Die benötigten Javascript-Techniken sind lediglich: Ereignis am select Feld abfangen, Textfeld anwählen und mit ausgelesenem Wert füllen.

Es gibt grundlegend 3 Wege das umzusetzen, der einfachste wäre inline im onchange-Attribut. Das ist unschön aber tut seinen Zweck:

HTML

<select name="namen" id="formularNamen" onchange="document.getElementById('formularNummer').value = this.value">

HTML und CSS/PHP/Javascript/etc. sollten aber immer getrennt werden. Daher kannst du nun einen Script Tag erstellen und ähnlich vorgehen. Der Script Tag muss in dem Fall unter den beiden betroffenen Elementen stehen.

HTML

<form>
    <select name="namen" id="formularNamen">
        <option value="">Bitte wählen</option>
        <option value="1234">Schwarz, Christian</option>
        <option value="2345">Krüger, Hans</option>
    </select>
    <input type="text" name="nummer" id="formularNummer">
    <script>
        // select Element auswählen und "onchange" Attribut mit EventListener realisieren.
        document.getElementById("formularNamen").addEventListener("change", function(event)
        {
           // text Element aswählen und value ändern. this bezieht sich hier auf das select Feld.
           document.getElementById("formularNummer").value = this.value; 
        });
    </script>
</form>

Alles anzeigen

Und jetzt noch der schöne Weg in einer externen Datei oder im Kopfbereich. Dafür muss noch gewartet werden bis das window Objekt (also alle Dateien die du so benutzt auf der Seite z. B. CSS, Bilder, etc.) geladen ist, wieder per EventListener.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    [...]
    <script>

window.addEventListener("load", function(){
    document.getElementById("formularNamen").addEventListener("change", function(event){
        document.getElementById("formularNummer").value = this.value;
    });
});

    </script>
</head>
<body>
[...]
<form>
    <select name="namen" id="formularNamen">
        <option value="">Bitte wählen</option>
        <option value="1234">Schwarz, Christian</option>
        <option value="2345">Krüger, Hans</option>
    </select>
    <input type="text" name="nummer" id="formularNummer">
</form>
[...]

Alles anzeigen

Im letzten Fall kann der Javascript Quelltext überall stehen. Es bietet sich jedoch der Head Bereich oder eine externe Javascript Datei an.

Falls du noch Fragen hast immer her damit.

kulle · 20. April 2016

Wow, Basi!

Erst einmal riesen Dank , dass du dich damit so Intensiv auseinander gesetzt hast.Du hast mir echt weitergeholfen damit.

Es funktioniert perfekt und du hast alles sehr verständlich beschrieben. Da ich mich mit JavaScript nicht so auskenne , war das echt Gold wert!

Wie Oben schon geschrieben, handelt es sich bei meiner offline Seite um ein Formular.

Dieses hat den zweck, Mitarbeiter Berichte schreiben zu lassen und Sie genau zu identifizieren.

Nachdem die Berichte fertig geschrieben sind, sollen alle relevante Daten (aus den Auswahllisten und Textfeld) in eine .csv-Datei schreibgeschützt abgespeichert werden.

d.h

Dienstart, Mitarbeiter, Personalnummer, Kategorie sowie der geschriebene Bericht.

Ich hatte bereits in einen Forum gelesen, dass solche Methoden am besten mit php gelöst werden sollten (fopen(), fwrite()).

gibt es auch eine Möglichkeit mit JavaScript? Wenn Ja, welche wäre das?

Mit freundlichen Grüßen

kulle

Basi · 20. April 2016

Wenn du mit Javascript in Dateien schreiben möchtest, musst du auf node.js zurückgreifen. Mit node.js kannst du einen Webserver aufsetzen und dann mit einer Erweiterung wie z. B. dieser hier arbeiten.

Vom Aufwand her, besonders wenn du dich nicht auskennst, wäre PHP aber wirklich einfacher. Du musst dann auch nicht zwangsläufig einen ganzen Webserver lokal laufen lassen, sondern kannst über die Kommandozeile arbeiten. Außerdem könntest du das Formular an ein Python Skript senden, dann brauchst du auch keinen Server. Hier gibt es Infos zu CSV Dateien in Python und hier einen Überblick darüber, wie man Formulare auswertet.

Das benötigte Wissen sowohl in Javascript als auch in PHP und Python ist mit etwas Einsatz und bestenfalls einer Woche Urlaub unglaublich schnell angeeignet.

kulle · 25. April 2016

Guten Morgen liebe User,

habe mich jetzt mal ein wenig mit den php Funktionen beschäftigt.

habe aber noch einige Fragen :-).

Hier erst einmal mein HTML Code zu den Formular:

Seite Mit Auswahllisten und Textfeld:

HTML

<html> 
<head> 
<title>Einstellung</title> 
<link rel="stylesheet" type="text/css"href="format.css"> 




<meta charset="utf-8"> 




<script> 
window.addEventListener("load", function(){ 
document.getElementById("formular_disponent").addEventListener("change", function(event){ 
document.getElementById("formular_nummer").value=this.value; 
}); 
}); 
</script> 
</head> 
<body> 







<table class="einstellung_text" border="0" cellspacing="0"> 
<tr class="einstellung_hintergrund_grau"> 
<th col width="500" height="50"> 
Datum: 
</th> 
<th col width="500" height="50"> 
<script type="text/javascript"> 
var Jetzt = new Date(); 
var Tag = Jetzt.getDate(); 
var Monat = Jetzt.getMonth() + 1; 
var Jahr = Jetzt.getYear(); 
var Stunden = Jetzt.getHours(); 
var Minuten = Jetzt.getMinutes(); 
var NachVoll = ((Minuten < 10) ? ":0" : ":"); 
if (Jahr < 2000) 
Jahr = Jahr + 1900; 
document.write(Tag + "." + Monat + "." + Jahr + "<\/b>"); 
<!--; " + Stunden + NachVoll + Minuten + " Uhr<\/b>");--> 
</script> 
</th> 
</tr> 







<tr class="einstellung_hintergrund_blau"> 
<th col width="500" col height="50"> 
Dienstart: 
</th> 
<th col width="500" col height="50"> 
<form action="select.htm"> 
<select class="Auswahl_dienstart" name="dienstart" size="1"> 
<option value="" select>Bitte w&auml;hlen</option> 
<option value="Früh">Fr&uuml;h</option> 
<option value="Mittel">Mittel</option> 
<option value="Spät">Sp&auml;t</option> 
</select> 
</form> 
</th> 
</tr> 










<tr class="einstellung_hintergrund_grau"> 
<th col width="500" col height="50"> 
Disponent: 
</th> 
<th col width="500" col height="50"> 
<form action="select.htm"> 
<select class="Auswahl_disponent" name="disponent" id="formular_disponent" size="1"> 
<option value="" select>Bitte w&auml;hlen</option> 
<option value="1234">Albrecht, Jens</option> 
<option value="2345">Bracht, Michael</option> 
<option value="3456">Coburg, Harry</option> 
</select> 
</form> 
</th> 
</tr> 










<tr class="einstellung_hintergrund_blau"> 
<th col width="500" col height="50"> 
Personalnummer: 
</th> 
<th col width="500" col height="50"> 
<form > 
<input class="autoPerso" name="Personalnummer" id="formular_nummer" readonly="readonly"></p> 
</form> 
</th> 
</tr> 
<tr class="einstellung_hintergrund_grau"> 
<th col width="500" col height="50"> 
Kategorie: 
</th> 
<th col width="500" col height="50"> 
<form action="select.htm"> 
<select class="Auswahl_kategorie" name="kategorie" size="1"> 
<option value="" select>Bitte w&auml;hlen</option> 
<option value="Unfall">Unfall</option> 
<option value="Krankschreibung">Krankschreibung</option> 
<option value="Beschwerde">Beschwerde</option> 
<option value="Allg. Information">Allg. Information</option> 
<option value="Weiterführung">Weiterf&uuml;hrung</option> 
<option value="sonstige Anmerkung">sonstige Anmerkung</option> 
</select> 
</form> 
</th> 
</tr> 










</table> 




</body> 
</html>

Alles anzeigen

und die Seite, in dem der Bericht geschrieben werden soll.

HTML

<html> 
<head> 
<title>Bericht</title> 
<link rel="stylesheet" type="text/css"href="format.css"> 
</head> 




<body class="bericht_hintergrund"> 




<div class="bericht_position"> 
<table border="0" cellspacing="0" > 




<tr> 
<div class="bericht_ueberschrift"> 
Bericht: 
</div> 
</tr> 




<tr> 
<div class="bericht_textarea_position"> 
<form action="textarea.htm"> 
<textarea class="bericht_text" name="user_eingabe" cols="75" rows="15" ></textarea> 
</p> 
</form> 
</div> 
</tr> 




</table> 
</div> 




</body> 
</html>

Alles anzeigen

Und Hier meine php Funktionen dazu:

PHP

<?php 
$dz = fopen("c:\\Users\\User_B\\Desktop\\history.csv", "a"); 
if(!$dz) 
{ 
echo "Datei konnte nicht zum Schreiben geöffnet werden."; 
exit; 
} 
fputs($dz,$_POST["dienstart"].";".$_POST["disponent"].";" 
.$_POST["Personalnummer"].";".$_POST["kategorie"].";" 
.$_POST["user_eingabe"].";\n"); 
echo "Ihre Eingaben wurden gespeichert."; 
fclose($dz); 
?>

Alles anzeigen

Nun zu den Fragen.

1. Wo füge ich jetzt die php Funktion ein?

Es handelt sich ja um zwei unterschiedliche Seiten, aus denen ausgelesen werden muss. Muss ich die Funktion in beide Seiten einfügen? (sicherlich ja.... :-)).

und WO im HTML Code genau?

2. Würde auch gerne Das Datum in der csv-Datei abspeichern wollen. wie kann ich das realisieren?

Würde mich über Antworten sehr freuen.

Mit freundlichen Grüßen

kulle
kann mir keiner weiterhelfen? :-/

Basi · 27. April 2016

Dein Vorgehen ist noch nicht ganz korrekt.

Zuerst etwas zum HTML Code:

HTML

<th col width="500" height="50">

Das ist kein valider Aufbau. Es gibt kein col Attribut für th und ab HTML5 sind width und height Attribute an Tabellenelementen auch nicht mehr zulässig, dafür nutzt man nun ausschließlich CSS.

Der korrekte Aufbau ist also einfach:

HTML

<th>

Gibt es einen bestimmten Grund dafür, dass du 2 Dokumente verwenden möchtest? Das macht die Sache nur unnötig komplizierter und der Mehraufwand macht in meinen Augen hier keinen Sinn.

Du hast jedes einzelne Input Feld mit einem form-Tag versehen. Ein form-Tag entspricht aber einem ganzen Formular und ermöglicht es logische Zusammenhänge zwischen den Eingabefeldern herzustellen. Also nur einen verwenden und unter dem action-Attribut die Datei angeben, die aufgerufen werden soll wenn das Formular abgesendet wird. Absenden kann man mit einem input Element vom Typ submit.

Da du PHP verwenden möchtest, muss der Dateiname vom .html in .php umgewandelt werden. Ich habe die Datei mal formular.php genannt. Die ungültigen Attribute und die überflüssigen Formulare habe ich gelöscht. Außerdem habe ich alles in einer Tabelle untergebracht, diese mit einem form-Tag umschlossen und das action-Attribut gesetzt, außerdem das method-Attribut auf post. Zuletzt habe ich noch einen Absenden Button eingefügt:

HTML

<form action="formular.php" method="post">
<table class="einstellung_text" border="1" cellspacing="0"> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Datum:</th> 
        <th> 
            <script type="text/javascript">// Javascript Datum</script> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_blau"> 
        <th>Dienstart:</th> 
        <th> 
            <select class="Auswahl_dienstart" name="dienstart" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="Früh">Fr&uuml;h</option> 
                <option value="Mittel">Mittel</option> 
                <option value="Spät">Sp&auml;t</option> 
            </select> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Disponent:</th> 
        <th> 
            <select class="Auswahl_disponent" name="disponent" id="formular_disponent" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="1234">Albrecht, Jens</option> 
                <option value="2345">Bracht, Michael</option> 
                <option value="3456">Coburg, Harry</option> 
            </select>  
        </th> 
    </tr> 




    <tr class="einstellung_hintergrund_blau"> 
        <th>Personalnummer:</th> 
        <th> 
            <input class="autoPerso" name="Personalnummer" id="formular_nummer" readonly="readonly"></p> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Kategorie:</th> 
        <th> 
            <select class="Auswahl_kategorie" name="kategorie" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="Unfall">Unfall</option> 
                <option value="Krankschreibung">Krankschreibung</option> 
                <option value="Beschwerde">Beschwerde</option> 
                <option value="Allg. Information">Allg. Information</option> 
                <option value="Weiterführung">Weiterf&uuml;hrung</option> 
                <option value="sonstige Anmerkung">sonstige Anmerkung</option> 
            </select> 
        </th> 
    </tr> 
    <tr> 
        <th class="bericht_ueberschrift">Bericht:</th> 
        <td class="bericht_textarea_position"> 
            <textarea class="bericht_text" name="user_eingabe" cols="75" rows="15" ></textarea>  
        </td> 
    </tr> 
    <tr>
        <td colspan="2">
            <input type="submit" name="gesendet" value="Absenden">
        </td>
    </tr>
</table> 
</form>

Alles anzeigen

Jetzt kann man anfangen mit PHP etwas Logik in die Geschichte zu bringen. Dazu muss ab jetzt ein PHP Interpreter (sprich ein Webserver oder ein CGI Script) aktiv sein um PHP verarbeiten zu können.

Ganz am Anfang der Datei hilft folgender Code nachzuvollziehen was wir verarbeiten müssen:

PHP

<pre>
<?php  




print_r($_POST);




?>
</pre>

Alles anzeigen

$_POST ist ein Array, welches alle über die post-Methode gesendeten Daten enthält. Da noch nichts gesendet wurde, ist das Array leer. print_r (print recursive) kann ganze Arrays ausgeben. Wenn die Seite aufgerufen wird, steht oben über dem Formular jetzt:

Code

Array
(
)

Nach einem Klick auf den Absenden Button steht dort Folgendes:

Code

Array
(
    [dienstart] => 
    [disponent] => 
    [Personalnummer] => 
    [kategorie] => 
    [user_eingabe] => 
    [gesendet] => Absenden
)

Jetzt ist bekannt, dass das Formular abgesendet wurde und nicht mehr angezeigt werden muss. Also eine Variable setzen die wir später abfragen können:

PHP

print_r($_POST);




if(isset($_POST['gesendet']))
    $formular_anzeigen = false;
else
    $formular_anzeigen = true;

Weiter unten lässt sich die Variable jetzt abfragen und dementsprechend kann das Formular ausgeblendet werden:

PHP

<?php if($formular_anzeigen): ?>
<form action="formular.php" method="post">
<!-- Formular wegen Übersicht ausgeschnitten -->
</table> 
</form>
<?php else: ?>
<p>Das Formular wurde abgesendet!</p>
<?php endif; ?>

Jetzt wird das Formular nicht mehr gezeigt, wenn es bereits abgesendet wurde. Stattdessen ein Paragraph der meldet, dass das Formular gesendet wurde.

Dann kannst du eigentlich schon deinen PHP Code einfügen. Statt einer direkten Ausgabe der Meldung einfach in eine Variable speichern und diese unten ausgeben:

PHP

$dz = fopen("c:\\Users\\User_B\\Desktop\\history.csv", "a"); 
if(!$dz) 
{ 
     $meldung = "Datei konnte nicht zum Schreiben geöffnet werden."; 
} 
else
{
    fputs(
        $dz,
        $_POST["dienstart"].";".
        $_POST["disponent"].";". 
        $_POST["Personalnummer"].";".
        $_POST["kategorie"].";".
        $_POST["user_eingabe"].";\n"
    ); 
    fclose($dz); 
    $meldung = "Ihre Eingaben wurden gespeichert.";
}

Alles anzeigen

PHP

<?php if($formular_anzeigen): ?>
<form action="formular.php" method="post">
<!-- Formular wegen Übersicht ausgeschnitten -->
</table> 
</form>
<?php else: ?>
<p><?php print $meldung; ?></p>
<?php endif; ?>

Der exit Befehl würde die Anzeige der Datei abbrechen und das wäre Unsinn. Damit niemand Unsinn in deine Datei schreiben kann, empfiehlt es sich die eingegebenen Daten noch zu bereinigen. Dafür bieten sich die Funktionen trim (entfernt unnötige Leerzeichen am Anfang und Ende), stripslashes (entfernt Maskierungszeichen) und htmlspecialchars (maskiert HTML). Damit man nicht für jede Eingabe alle drei Funktionen aufrufen muss, macht es Sinn eine eigene anzulegen. Das sieht dann etwa so aus:

PHP

function bereinigen($input)
{
    return trim(stripslashes(htmlspecialchars($input)));
}




fputs(
    $dz,
    bereinigen($_POST["dienstart"]).";".
    bereinigen($_POST["disponent"]).";". 
    bereinigen($_POST["Personalnummer"]).";".
    bereinigen($_POST["kategorie"]).";".
    bereinigen($_POST["user_eingabe"]).";\n"
);

Alles anzeigen

Die ganze Datei sieht bei mir dann etwa so aus:

PHP

<?php  




if(isset($_POST['gesendet']))
    $formular_anzeigen = false;
else
    $formular_anzeigen = true;





    
$dz = fopen("c:\\Users\\User_B\\Desktop\\history.csv", "a"); 
if(!$dz) 
{ 
     $meldung = "Datei konnte nicht zum Schreiben geöffnet werden."; 
} 
else
{
    function bereinigen($input)
    {
        return trim(stripslashes(htmlspecialchars($input)));
    }

    fputs(
        $dz,
        bereinigen($_POST["dienstart"]).";".
        bereinigen($_POST["disponent"]).";". 
        bereinigen($_POST["Personalnummer"]).";".
        bereinigen($_POST["kategorie"]).";".
        bereinigen($_POST["user_eingabe"]).";\n"
    );

    fclose($dz); 
    $meldung = "Ihre Eingaben wurden gespeichert.";
}




?>
<!DOCTYPE html>
<html> 
<head> 
<title>Einstellung</title> 
<link rel="stylesheet" type="text/css"href="format.css"> 




<meta charset="utf-8"> 




<script> 
window.addEventListener("load", function(){ 
    document.getElementById("formular_disponent").addEventListener("change", function(event){ 
        document.getElementById("formular_nummer").value=this.value; 
    }); 
}); 
</script> 
</head> 
<body> 




<?php if($formular_anzeigen): ?>
<form action="formular.php" method="post">
<table class="einstellung_text" border="1" cellspacing="0"> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Datum:</th> 
        <th> 
            <script type="text/javascript"> 
                var Jetzt = new Date(); 
                var Tag = Jetzt.getDate(); 
                var Monat = Jetzt.getMonth() + 1; 
                var Jahr = Jetzt.getYear(); 
                var Stunden = Jetzt.getHours(); 
                var Minuten = Jetzt.getMinutes(); 
                var NachVoll = ((Minuten < 10) ? ":0" : ":"); 
                if (Jahr < 2000) 
                Jahr = Jahr + 1900; 
                document.write(Tag + "." + Monat + "." + Jahr + "<\/b>"); 
                // " + Stunden + NachVoll + Minuten + " Uhr<\/b>"); 
            </script> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_blau"> 
        <th>Dienstart:</th> 
        <th> 
            <select class="Auswahl_dienstart" name="dienstart" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="Früh">Fr&uuml;h</option> 
                <option value="Mittel">Mittel</option> 
                <option value="Spät">Sp&auml;t</option> 
            </select> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Disponent:</th> 
        <th> 
            <select class="Auswahl_disponent" name="disponent" id="formular_disponent" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="1234">Albrecht, Jens</option> 
                <option value="2345">Bracht, Michael</option> 
                <option value="3456">Coburg, Harry</option> 
            </select>  
        </th> 
    </tr> 




    <tr class="einstellung_hintergrund_blau"> 
        <th>Personalnummer:</th> 
        <th> 
            <input class="autoPerso" name="Personalnummer" id="formular_nummer" readonly="readonly"></p> 
        </th> 
    </tr> 
    <tr class="einstellung_hintergrund_grau"> 
        <th>Kategorie:</th> 
        <th> 
            <select class="Auswahl_kategorie" name="kategorie" size="1"> 
                <option value="" select>Bitte w&auml;hlen</option> 
                <option value="Unfall">Unfall</option> 
                <option value="Krankschreibung">Krankschreibung</option> 
                <option value="Beschwerde">Beschwerde</option> 
                <option value="Allg. Information">Allg. Information</option> 
                <option value="Weiterführung">Weiterf&uuml;hrung</option> 
                <option value="sonstige Anmerkung">sonstige Anmerkung</option> 
            </select> 
        </th> 
    </tr> 
    <tr> 
        <th class="bericht_ueberschrift">Bericht:</th> 
        <td class="bericht_textarea_position"> 
            <textarea class="bericht_text" name="user_eingabe" cols="75" rows="15" ></textarea>  
        </td> 
    </tr> 
    <tr>
        <td colspan="2">
            <input type="submit" name="gesendet" value="Absenden">
        </td>
    </tr>
</table> 
</form>
<?php else: ?>
<p><?php print $meldung; ?></p>
<?php endif; ?>




</body> 
</html>

Alles anzeigen

Frage zur Wertübergabe Auswahlliste -> Textfeld

Jetzt mitmachen!

Teilen