You are not logged in.

Brauche Hilfe bei einer Funktion zum automatischen Focussieren von Formularfeldern.

wcf.regNote.message

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

1

Monday, October 13th 2008, 7:57pm

Brauche Hilfe bei einer Funktion zum automatischen Focussieren von Formularfeldern.

Ich habe ein Formular welches die Eingabe mehrerer Zahlen ermöglicht. Das heißt es gibt z.B. 5 Felder in welche eine Zahl eingegeben wird. Im Moment mache ich in jedem Feld nach der Eingabe ein submit um die Felder zu summieren und das Ergebnis in einer Totalzeile zu haben. Klar könnte ich auch im Browser beim User rechnen aber da bestimmte errechnete Werte auch in eine Datenbank geschrieben werden und ich unter allem Umständen verhindern möchte, dass ein User irgendwas manipuliert lasse ich lieber den Server rechnen. Klar könnte ich das mit Ajax machen um zum einen nur die nötigen Elemente zu laden und zum anderen auch das lästige "flackern" beim Neuladen des Formulars zu verhindern aber im Moment geht es mir erst mal um Funktion und nicht um Schönheit.

Lange Rede kurzer Sinn, wenn ich in das erste Feld eine Zahl eingegeben habe und mit Tab zum nächsten Feld springen möchte läd das Formular neu und es ist momentan gar kein Feld focussiert. Ich brauche also irgendwas was bei submit festhält in welchem Feld ich mich grade befunden habe und dann den Focus auf das nächst mögliche Eingabefeld legt.

Erschwerend hinzu kommt das ich einen Kalender nutze um ein Datum auszuwählen. Gebe ich das Datum per Hand ein und drücke Tab lande ich im nächsten Feld aber klicke ich das Datum in dem Kalender an liegt der Focus in dem Kalender und ich kann Tab drücken bis der Arzt kommt ich komme einfach nicht ins nächste Feld.

Ich kann ja bei onLoad im Body automatisch ein bestimmtes Feld focussieren lassen aber geht es auch das ich jedem Feld irgendwie eine Focusreihenfolge zuweise? Oder eine JS Funktion in der ich sage nach FeldID 3 kommt ID 5 und nicht 4 oder irgendwas?

Ich hätte bei JS echt mal besser aufpassen sollen damals :D
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

2

Friday, October 17th 2008, 11:03am

Ich hab mir das alles noch mal durch den Kopf gehen lassen und die Möglichkeit die mir im Moment einfällt wäre jedem Feld eine eindeutige ID zu geben und dann beim Laden der Seite eine Funktion aufzurufen die prüft welcher Inhalt in welchem Feld steht. Das heißt bei 5 Feldern ist normal der Wert 0 eingetragen und soll vom User bearbeitet werden. Beim Laden wird geprüft ob im Feld ID 1 ein anderer Wert wie 0 steht und wenn ja wird zum nächsten Feld gesprungen und immer so weiter bis eben alle Felder durch sind. Ich denke ich muss den Aufruf dann in onLoad im Body Tag packen nur ich hab noch keinen Ansatz für die Funktion.
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

3

Thursday, October 23rd 2008, 11:40am

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
<head>
<script type="text/javascript" language="javascript">
function focusTheNextOne(){
  var iFirstOneValue = parseInt(document.getElementById('firstone').value);
  if(iFirstOneValue != 0){
    var iSecondOneValue = parseInt(document.getElementById('secondone').value);
    if(iSecondOneValue != 0){
      var iThirdOneValue = parseInt(document.getElementById('thirdone').value);
      if(iThirdOneValue != 0){
        // hier muss ich nichts mehr machen, da alle felder ausgefüllt sind
      } else document.getElementById('thirddone').focus();
    } else document.getElementById('secondone').focus();
  } else document.getElementById('firstone').focus();
}
</script>
</head>
<body onLoad="javascript:focusTheNextOne();">
<form action="disesedatei.php" method="post">
<input type="text" name="firstinput" ID="firstone" value="<?php if(isset($_POST["firstinput"]) AND !empty($_POST["firstinput"])) echo $_POST["firstinput"]; else echo "0"; ?>">
<input type="text" name="secondinput" ID="secondone" value="<?php if(isset($_POST["secondinput"]) AND !empty($_POST["secondinput"])) echo $_POST["secondinput"]; else echo "0"; ?>">
<input type="text" name="thirdinput" ID="thirdone" value="<?php if(isset($_POST["thirdinput"]) AND !empty($_POST["thirdinput"])) echo $_POST["thirdinput"]; else echo "0"; ?>">
<input type="submit" value="Berechnen">
</form>
</body>
</html>


ist im prinzip recht einfach. erst wird mit php nachgesehn ob die variablen (in diesem falle im post-verfahren übergeben) gesetzt und nicht leer sind. dann wird falls gesetzt und nicht leer, das entsprechende feld mit value auf den übergeben wert gesetzt, oder halt auf 0 falls die variable nicht gesetzt oder leer ist. dann wird sobald der browser die seite geladen hat die javascript funktion focusTheNextOne ausgeführt. diese überprüft die felder auf ihren inhalt. ist der wert des ersten feldes != 0, wird das zweite überprüft, ansonsten wird das erste feld fokussiert. ist der wert des zweiten != 0 wird das dritte überprüft oder falls er nicht != 0 ist das zweite fokussiert. was du machst wenn das letzte feld auch != 0 ist weiß ich nicht. darum hab ich an dieser stelle einen kommentar eingefügt.

ist nicht die allerschönste variante, du könntest den feldern eine id geben wie ID="Feld1" und ID="Feld2" und könntest dann eine schleife machen, die so lange alle felder mit der id "Feld"+iCounterValue überprüft bis eines den wert 0 hat und dieses dann fokussiert, aber ich denk das kriegst du schon hin.

an der ein oder andern stelle kann eine klammer oder ein semikolon fehlen, hab das jetzt auf die schnelle hier im browser getippt. aber ich denke auch das fidest du raus falls es der fall ist ;)
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

4

Friday, October 24th 2008, 9:13pm

Das Formular um das es geht ist leider nicht so statisch als das ich die Methode anwenden könnte. Es gibt 1 bis n mögliche Eingabefelder in Abhängigkeit von einer Tabelle in welcher bestimmte Dinge vordefiniert sind. Heißt wenn eine neue Definition dazu kommt dann gibt es eine neue Zeile mit 2 Eingabefeldern und 4 Ausgabefeldern. Aber ich hab da schon eine Idee wie ich das hin bekomme sobald es funktioniert poste ich mal wie ich es gelöst habe.
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

wcf.user.socialbookmarks.titel