Input feld Variablen Speichern

J

Jooohny

Gesperrt
Hallo liebes Board mus euch noch mal nerven sry!

Allso komme supper weiter mit JS lernen und würde jetzt gerne schon mal ein paar Script´s schreiben nur brauche ich mal grad euere hilfe wen ich ein input feld habe wie speicher ich den wert der eingegeben wird in einer Variablen also auf der gleichen seite soll ja alles ohne neu laden der seite passieren sonst könnte ich ja auf JS verzichten schon mal danke
 
Also wenn Du ein Input Feld hast , und dort eben was eingibst das kannst dann mit einen Eventhandler keyup abfangen und den Wert der eben eingegeben wurde immer in die Variable speichern.

Code: 
<html>
    <head>
        <script type="text/javascript">
            var currentInput;
/*
 * unsere Callback Funktion 
*/
            function getChars (evt) {
                var e = evt || window.event; // event type zuweisen window.event für ie 
                var target = e.srcElement || e.target; // den Auslöser des Events holen
              
                // wert in die Variable speichern
                currentInput = target.value;
              
                // Kontroll Ausgabe
                document.getElementById('check').innerHTML = currentInput;
            }

/*
* kleine Hilfsfunktion um Eventhandler Cross Browser zu initialisieren
*/
            function addEvent (element,event,callback) {
               var ep = new RegExp("^(on)(.*)","i");
               
                if(document.addEventListener) { // ff , opera , safari etc
                   event = event.replace(ep,"$2");
                   element.addEventListener(event,callback,false);  
               } else { // ie 
                   if(!event.match(ep)) event = "on"+event;
                   element.attachEvent(event,callback);
               }
            }

            // wenn das Fenster geladen wurde
            window.onload = function () {
            // ich sage mal wir haben nen inputfeld mit der ID foobar
            // und auf dieses Feld lege ich den Keyup Event drauf 
            // und schicke es dann den Event weiter an die Funktion getChars
            addEvent(document.getElementById('foobar'),'keyup',getChars);
            }
        </script>
    </head>
    <body>
        <input id="foobar" type="text"></input>
        <div id="check"></div>
    </body>
</html>
 
Zuletzt bearbeitet:
woooooooooooooooow ich raf zwar garnix aber danke lerne noch das tut zu ende denke dan raf ichwas was is hihi danke

lg Jooohny
 
naja es gibt Events in dem Falle nehmen wir uns die Eventhandler für die Tastatur. Wenn nun eben eine Taste gedrückt wird ist es keydown , hältst die Taste keypress und lässt sie los keyup.

Die kleine Hilfsfunktion ist dazu da um die Unterschiede zwischen dem IE und den anderen Browsern halt in einer Funktion zu haben ist erstmal weniger wichtig ;).

IE brauch eben die Methode HTMLElement.attachEvent(event type,callback)
die anderen benutzen dann HTMLElement.addEventListener(event typ,callback, und Event Bubbling)

false bedeutet hier das der Event von oben nach unten sickert , musst mal lesen bei Event Bubbeling , der IE kennt nur eine Richtung und die ist von oben nach unten.

Der nächste Unterschied wäre , IE brauch den Event String so , onkeydown , onkeypress etc.

Alle anderen wollen aber keydown und keypress.

Die Funktion macht also erstmal nix anderes als nen Event zu regestrieren und dann noch den Event richtig anzulegen. Also für den IE kommt halt ein on davor wenn man nur keyup übergeben hat.

Und umgedreht , hat man onkeyup übergeben wird das on rausgeworfen für alle anderen Browser .

Dann noch die Events richtig belegt und eine Funktion angegeben die den Event auffangen soll. In meinen Fall war das nun getChars(evt).

evt ist im dem Falle ein Event Objekt , welches automatisch übergeben wurde durch den Event handler.Im IE natürlich nicht da wäre es dann window.event.

Das var e = evt || window.event ; ist somit eine kurz schreibweise ist die variable evt belegt ? nein dann prüfe window.event ab.

nun wollen wir das auzulösende Element haben , also in dem Falle wäre es das input feld wo der Event drauf liegt.

IE wäre halt e.srcElement und andere Browser e.target.

Dann haben wir sozusagen das Inputfeld zur Hand und mit value holen wir den aktuellen Wert raus.

Kann man hier auch nochmal gut nachlesen :

http://www.quirksmode.org/js/events_properties.html

MfG ich hoffe ich konnte es ein wenig erklären :)
 
supper erklärt noch ein bischen hintergrund wissen bekommen cool danke kann ich nicht aus test zwecken einfach ein input feld mit php machen und die php variable in eine javascript variable speichern geht das und wen wie wen ja-->so?

PHP: 
<script language="JavaScript">

<?php
$test = $_POST["blabla"];
?>

var Testvariable = <? $test ?>

</script>

soll jetzt nur zum testen erstmal seihen damit ich so schon mal bischen spielen kan :o)

lg Jooohny
 
omg gehts oder gehts nicht will ich nicht wissen das es mit php geht is klar aber op javascript einen php befehl anihmt will ich wissen o.O

lg jooohny
 
Wie ich eben sagte , der PHP Befehl wurde schon lange davor ausgeführt und somit steht der Wert $_POST schon lange im Dokument und wurde dann der Variable zugewiesen.

Und ein wenig höflicher bitte in Zukunft.
 
Ja is ja gut mag es nur nicht wen man mich falsch versteht sry

aber für alle anderen die zum testen ein input feld brauchen hier die lösung -->

PHP: 
<HTML>
<HEAD>
<TITLE>Jooohny_Rullt</TITLE>
</HEAD>
<BODY>
<H3>Jooohny_is_der-King</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
var benutzername = prompt("Wie heißen Sie?")
if (benutzername)
document.write("Guten Tag, Herr/Frau " + benutzername)
//--></SCRIPT>
</BODY>
</HTML>

lg Jooohny
 
Hallo,
das ist eine tolle Beschreibung, vielen Dank!
ich habe ein ähnliches Problem und zwar ich habe ein Formular und ein textfeld. Darunter gibt es ein inputfeld:

<input type="file" size="45" id="blobData" name="blobData" />

Wenn bei der Validierung des Formulars festgestellt wir dass das Textfeld leer ist wird die Seite neugeladen und es wird eine Fehlermeldung ausgegeben. Dabei verliert das Input-Feld seinen Inhalt.

Leider fehlt mir etwas Hintergrundwissen und ich habe es nciht verstanden wie ich die Methode anpassen soll, damit mein Inputfeld seinen Inhalt behält, falls die Validierung fehlschlägt. Wenn die Datei jedoch hochgeladen muss der INhalt natürlich leer sein.

Kann mir da jemand helfen?

lG,Elisa
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück