Ergebnis 1 bis 2 von 2
  1. #1
    Avatar von .holger
    .holger ist offline Lounge-Member
    registriert
    22-04-2001
    Ort
    HB und Zw'ahn
    Beiträge
    5.789

    Formulareingaben verarbeiten

    Die heutige „lern mit Holger“ Lektion behandelt das Verarbeiten von Formulareingaben mit JavaScript. Wobei Verarbeiten eigentlich nicht das richtige Wort ist, weil man kann mit JavaScript ja nichts speichern oder so, aber man kann dem USER der etwas eingegben hat etwas mit den Formulareingaben machen lassen. Genung der Vorrede fangen wir an:

    1) Zuerst brauchen wir natürlich ein Formular, das man auslesen kann. Ich nehme hier einfach ein Textfeld und einen Knopf:
    Code:
    <form name=“lernenmitholger“>
    <input type=“text“ name=“lektion1“>
    <imput type=“button“ value=“abschicken“ onclick=“machdas();“>
    </form>
    „<form name=“lernenmitholger“>“ erklärt dem Browser sozusagen dass als nächstes ein Formular kommt. Das name=“lernenmitholger“ setzt den Namen fest mit dem man das Formular später ansprechen kann um etwas auszulesen.

    „<input type=“text“ name=“lektion1“>“ definiert ein Eingabefeld wo der Benutzer später seine Eingabe drin tätigt. Das name=“..“ bewirkt das selbe wie beim form-Tag, ermöglicht also ein späteres ansprechen des Eingabefeldes.

    „<input type=“button“ value=“abschicken“ onclick=“machdas();“>“ erstellt den Knopf auf dem der Benutzer später klicken soll damit etwas passiert. Value=“..“ definiert was auf dem Knopf steht. Und onclick=“machdas();“ ist das erste JavaScript Element. Es sagt, dass bei einem Klick (onclick) auf das Element (den Knopf) die function „machdas()“ ausgeführt werden soll.

    Das „</form>“ schliesst das Formular wieder.

    2) Jetzt brauchen wir das Script das die Formulareingaben auswertet:
    Code:
    <script language=“JavaScript“>
    function machdas()
    {
    eingegeben = document.lernenmitholger.lektion1.value;
    alert(eingeben);
    }
    </script>
    „<script language=“JavaScript“> leitet das Script ein. „</script>“ am Ende des Teils beendet es wieder.
    Nun folgt eine function die aufgerufen wird, wenn auf den Knopf gedrückt wird. Da ich oben den Namen „machdas“ bestimmt habe muss ich den natürlcih hier definieren. Zwischen den beiden geschweiften Klammern findet sich das eigentlcihe Script.
    „eingegeben“ ist eine neue Variable, die die Eingabe des Benutzer „schlucken“ soll. Diese hole ich mir jetzt aus dem Formular, das geht folgendermassen, ich muss dem Script sagen woher er die Eingabe holen soll. Sie liegt in diesem Dokument, in dem Formular „lernenmitholger“ und im Textfeld „lektion1“. Also benutze ich document.lernenmitholger.lektion1 um das Eingabefeld anzusprechen. Nun will ich das haben was in dem Eingabefeld steht. Das hole ich mir dort mit „value“ raus. Das Eingegebene soll der Variablen „eingegeben“ zugewiesen werden also gilt

    eingegeben = document.lernenmitholger.lektion1.value;

    Die Zeile wird mit einem Semikolon abgechlossen. Nun kann ich die Eingabe verarbeiten wie ich will. Hier lasse ich sie einfach in einem „alert“-Fenster ausgeben. Man kann natürlcih auch noch viele andere Sachen damit machen.

    Den „<script...“ bis „</script>“ Teil packt ihr am besten in den Head der HTML-Datei (zwischen <head> und </head>) und das Formular dahin wo ihr es halt haben wollt.

    Was ihr alles mit der Eingabe machen wollt müsst ihr Euch natürlcih selber überlegen, da kann ich Euch keine Ideen liefern.

  2. #2
    Avatar von jeko
    jeko ist offline Foren-Gott
    registriert
    03-06-2004
    Ort
    [CH]Vor meinem PC[/CH]
    Beiträge
    3.069

    Formulareingabe auf Zahl prüfen

    So könnt ihr schauen, ob eine Zahl eingegeben wurde oder nicht:
    Code:
    <html>
    <head>
    <title>Checken</title>
    <script type="text/javascript">
    <!--
    function zahlodernet(Wert)
    {
     if(isNaN(Wert) == true)
     {
      alert(Wert + " ist keine Zahl!");
     }
     else {
    	alert(Wert + " ist eine Zahl");
     }
    }
    //-->
    </script>
    </head><body>
    <form action="">
    <input size="30" name="Eingabe">
    <input type="button" value="checken!"
    onClick="zahlodernet(this.form.Eingabe.value)">
    </form>
    </body></html>
    Wird auf den Button "checken!" geklickt, wird die Funktion "zahlodernet()" aufgerufen. Diese überprüft dann, ob der eingebene Wert im Input-Feld "eingabe" keine Zahl ist mit der vordefinierten Javascript-Funktion isNaN(). Wenn ja, also der Wert keine Zahl ist, wird ein Alert-Fenster mit dem Text: "XX ist keine Zahl!"
    Wenn nein, also der Wert ist eine Zahl, wird ein Alert-Fenster mit folgendem Text ausgegeben:
    "XX ist keine Zahl!"
    Arbeit an der Sprache ist Arbeit am Gedanken.
    NoPaste / Format / Analyze / Crypt
    Ich bin ein Schwätzer.

Lesezeichen

Berechtigungen

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