Inputfelder: Strukturierung und Zusammengehörigkeit

Nicole · 26.02.2011, 14:57

Hallo zusammen!

Ich sehe inzwischen nur noch Sterne und komme nicht weiter. Darum möchte ich nun euch mal fragen wie man die Probleme am besten löst.

Folgende Situation:
Ich möchte dem Besucher die Möglichkeit geben, verschiedene Silben (2 Buchstaben) nach einem vorgegebenen Muster zusammenzufügen. Hierfür habe ich nun eine Sammlung von Input-Feldern (Typ: text), deren Länge ich auf 2 begrenzt habe.
Durch JavaScript werden auch eingegebene Silben an anderen Stellen eingebunden, damit das Muster erhalten bleibt (z.B. entspricht Silbe 1 9 - gibt man eine der Silben ein, wird die andere automatisch ausgefüllt). Die Zusammengehörigkeit habt ich durch verschiedenfarbige border-bottom's der Inputfelder kenntlich gemacht.
An manchen Stellen entspricht eine Silbe aber nicht ganz einer anderen. So kann es z.B. sein, dass Silbe 2 und 10 auf den selben Buchstaben enden, aber der erste Buchstabe ein beliebiger sein kann. Für solche Fälle habe ich die Silbe in 2 Inputs geteilt, wobei jedes Input einen Buchstaben enthält.

Das Beispiel findet ihr hier: Klick mich!

Die Probleme:
1. Ich weiß nicht, wie ich die Inputs am besten ordnen soll. Aktuell identifiziere ich die Inputs in JavaScript über ihren Namen. ds1 hat überall den selben Inhalt, ds1a hat den selben ersten Buchstaben wie ds1, bei ds2b sind nur die ersten Buchstaben gleich, ds3c sind identisch und geben ihren ersten Buchstaben an ds3d. Außerdem werde ich noch etwas brauchen, wenn ich den Fall habe, dass der letzte Buchstabe identisch ist.
Allerdings bin ich nun ziemlich unglücklich mit dem System, weil ich fürchte, es könnte einen besseren Weg geben.
2. Wenn der Besucher nun ein Input komplett ausgefüllt hat, soll er automatisch zum nächsten springen. Ich weiß nicht, wie ich herausfinden kann, ob er nun die Silbe gerade ausgefüllt hat, oder jetzt nochmal bearbeiten möchte. Außerdem weiß ich nicht, wie ich herausfinden soll, in welchem Input er gerade ist und welches das nächste sein wird...

Kann mir jemand helfen, gute Lösungen zu finden?

Grüße
Nicole

nikosch · 26.02.2011, 15:03

Das ist ganz schwer zu verstehen. Kannst Du nochmal beschreiben, wie genau die Logik Deiner Anwendung funktioniert? Du hast mehrere Feldgruppen und dann?

Nicole · 26.02.2011, 19:11

Hi nokosch!

Gut, ich versuchs nochmal - das ist auch alles etwas tricky..

Es geht darum, verschiedene Silben aneinander zu reihen. Dies soll nach einem gewissen System geschehen.
Das System ist vorgegeben und es gibt 4 Systeme. In dem Beispiel sieht man nur das erste.
Die erste Version besteht aus insgesamt 16 Silben (1. Pe, 2. re, 3. ka, 4. la, 5. Pa, 6. po, 7. ri, 8. na, 9. Pe, 10. ke, 11. la, 12. to, 13. Pe, 14. pe, 15. la, 16. to)
Man sieht, das einige Silben identisch sind. Laut dem Muster müssen einige der Silben auch immer identisch sein - unabhängig davon, was der Benutzer als Silbe eingibt (1 = 9 = 13, 11 = 15, 12 = 16)
Bei anderen Silben muss nur der letzte Buchstabe bei den betreffenden Silben identisch sein (2 & 10 & 14, 4 & 11)
Dann gibt es noch den Fall, dass der erste Buchstabe mit dem ersten Buchstaben einer anderen Silbe identisch sein muss (5 wie 1/9/13[die sind ja immer identisch])

Soweit zur Anforderung.

Jetzt stellt sich mir die Frage, wie ich die Inputs ordnen soll, da mein jetziges System nicht funktioniert *lach*
Im Moment heißen alle Inputs der ersten Version "ds", dazu eine Zahl für verschiedene Inputs. Inputs, die die selben Inhalte haben, haben die selbe Zahl (z.B. ds1 oder ds4). Hängt ein Feld mit einem anderen zusammen, wird noch ein Buchstabe angehängt (z.B. ds1a [erster Buchstabe wie bei ds1]).

Das Problem sehe ich nun darin, dass ich Namen doppelt vergeben habe und nicht weiß, welches Input als nächstes kommt und wie ich es beim Absenden handeln soll...

Hier nochmal der Code:

Code:

<form name="muster1"> 
    <input name="ds1" value="Pe" class="gleich1" on onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="1" value="r" class="buchstabe buchstabe1" maxlength="1" type="text" />
    <input name="ds2" value="e" class="buchstabe gleich5" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="2" value="ka" maxlength="2" type="text" />
    <input name="3" value="l" class="buchstabe buchstabe1" maxlength="1" type="text" />
    <input name="ds3" value="a" class="buchstabe gleich6" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="ds1a" value="P" class="buchstabe ahnlich1 neueswort buchstabe1" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="4" value="a" class="buchstabe" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="5" value="po" maxlength="2" type="text" />
    <input name="6" value="ri" maxlength="2" type="text" />
    <input name="7" value="n" class="buchstabe buchstabe1" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="ds3" value="a" class="buchstabe gleich6" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="ds1" value="Pe" class="gleich1 neueswort" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="8" value="k" class="buchstabe buchstabe1" maxlength="1" type="text" />
    <input name="ds2" value="e" class="buchstabe gleich5" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="ds4" value="la" class="gleich3" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="ds5" value="to" class="gleich4" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="ds1" value="Pe" class="gleich1 neueswort" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="9" value="p" class="buchstabe buchstabe1" maxlength="1" type="text" />
    <input name="ds2" value="e" class="buchstabe gleich5" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input name="ds4" value="la" class="gleich3" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input name="ds5" value="to" class="gleich4" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
</form>

javascript:

Code:

var position;
var zeichenanzahl;
var silbenarray;

function silbendublizieren(position, value) {
	if(position.length <= 3) {
		silbenarray = document.getElementsByName(position);
		for(var i = 0; i < silbenarray.length; i++) {
			silbenarray[i].value = value;
		}
		//wenn es sich um xx1 handelt, wird der erste Buchstabe an xx1a übergeben
		if(position.charAt(2) == 1 && position.length == 3) {
			var ersterbuchstabe = value.charAt(0);
			var inputdesbuchstabens = position + "a";
			document.getElementsByName(inputdesbuchstabens)[0].value = ersterbuchstabe;
		}
	} 
	//wenn der einzelne Buchstabe xxxa übergeben wird, wird er auch an xxx übergeben
	else if(position.charAt(3) == "a") {
		//Name der Zielinputs
		var inputdesbuchstabens = position.slice(0,3);
		//Zielinputs in ein Array
		silbenarray = document.getElementsByName(inputdesbuchstabens);
		for(var i = 0; i < silbenarray.length; i++) {
			//altes Value auslesen
			var altesvalue = silbenarray[i].value;
			//den ersten Buchstaben wegschneiden
			altesvalue = altesvalue.slice(1);
			//neuer erster Buchstabe + altes Value
			silbenarray[i].value = value + altesvalue;
		}
	}
	else if(position.charAt(3) == "b") {
		var ersterbuchstabe = value.charAt(0);
		//Zielinputs in ein Array
		silbenarray = "";
		silbenarray = document.getElementsByName(position);
		for(var i = 0; i < silbenarray.length; i++) {
			//altes Value auslesen
			var altesvalue = silbenarray[i].value;
			//alert(altesvalue);
			//den ersten Buchstaben wegschneiden
			altesvalue = altesvalue.slice(1,2);
			//alert("Der folgende Buchstabe: " + altesvalue);
			//neuer erster Buchstabe + altes Value
			silbenarray[i].value = ersterbuchstabe + altesvalue;
		}
	}
	else if(position.charAt(3) == "c") {
		//gleiche Felder ausfüllen
		silbenarray = document.getElementsByName(position);
		for(var i = 0; i < silbenarray.length; i++) {
			silbenarray[i].value = value;
		}
		//Name der Zielinputs
		var inputdesbuchstabens = (position.slice(0,3)) + "d";
		alert(inputdesbuchstabens);
		//Zielinputs in ein Array
		silbenarray = document.getElementsByName(inputdesbuchstabens);
		for(var i = 0; i < silbenarray.length; i++) {
			//altes Value auslesen
			var altesvalue = silbenarray[i].value;
			//den ersten Buchstaben wegschneiden
			altesvalue = altesvalue.slice(1);
			alert(altesvalue);
			value = value.charAt(0)
			//neuer erster Buchstabe + altes Value
			silbenarray[i].value = value + altesvalue;
		}
	}
	else if(position.charAt(3) == "d") {
		var ersterbuchstabe = value.charAt(0);
	}
}

Gruß
Nicole

nikosch · 27.02.2011, 01:30

Damit kann man doch wenigstens schon mal was anfangen. Bleibt noch die Frage: Wer soll das was eintragen? Und auf welchem Wege soll er unterstützt werden? *)

Ein paar grundlegende Aussagen:

*) Entscheidend ist die Art der Verarbeitung: Die Prüfung der o.g. Kriterien zur Eingabe ist nicht gerade trivial. Vor allem das Prinzip mit den gleichen Buchstaben am Ende. Etwas leichter als derartige Eingaben zu verhindern ist, nur eine Prüfung durchzuführen und die betreffenden falschen Felder zu kennzeichnen (und die Eingabe abzulehnen). Das kann JS-Seitig oder PHP-seitig geschehen.
Etwas einfacher gestalten sich die komplett gleichen Silben. Hier würde ich Dir empfehlen, die entsprechenden Felder gleich vorauszufüllen, bzw. nicht doppelt zu erfassen.

Desweiteren würde ich alle anstehenden Fehler einfach linear durchnumerieren, allerdings ein Array verwenden, also <input name="silbe[]">

Nicole · 27.02.2011, 10:42

Danke für den Hinweis. *s*

Ich erklär nun nochmal die Gesamtheit der Sache *g*:
Das Ganze ist für eine Online-Hexenschule gedacht. Die basieren i.d.R. auf der Animeserie DoReMi und es geht darum, sich anzumelden und durch das Bestehen von Prüfungen eine Hexe zu werden. Da eine Hexe einen Zauberspruch braucht, muss man den auch angeben.
Die Zaubersprüche in der Serie sind in diesen Mustern verfasst.
Ich möchte an dieser Stelle nun, dass der Schüler bei der Anmeldung seinen Zauberspruch nach einem dieser Muster festlegt.
Dabei ist es mir wichtig, dass er den Spruch direkt so sehen kann und nicht irgendwie wählt "Silbe 1 = Pe, Silbe 2 = da, ..." und irgendwo das Ergebnis angezeigt bekommt, sondern direkt sehen kann, wo seine Eingabe verwendet wird. Darum möchte ich so mit den Inputs arbeiten.
Die vorgelegten Values dienen nur nocheinmal zur Verdeutlichung. Jeder, der sich da anmeldet kennt die Zaubersprüche aus der Serie und soll so das Muster besser verstehen. Ist einfach anschaulicher als wenn ich schreibe A-o-o-x B-o-o-x A-y-C-D A-y-C-D

Das mit den IDs sehe ich gerade nicht als ideale Lösung an - zumindest was das gleiche-Silben-erkennen-Problem angeht. Für das springen könnte ich das vielleicht machen, sodass ich den Befehl gebe "Springe zu [jetzigeID + 1]" und eine Variabel anlege mit der maximalen ID der Version (in Version 1 also "22", weil 10 Silben in 22 Inputs aufgeteilt). Hätte so einen Extra-Variabel gern vermieden, weil ich so ja nicht durchzählen kann, aber das ist vielleicht die kürzeste Lösung...
EDIT: Okay, nichts mit IDs! xD Hab mich verlesen. Den Namen kann ich nicht einfach durchnummerieren, weil ich durch den doch festlege, welche Felder identisch und halbidentisch sind. Und 2 Namen kann ich ja nicht vergeben. Über IDs kann ich die Gleichheit auch nicht festlegen, weil eine ID ja nur einmal vergeben sein darf. Und auf Klassen kann ich nicht zugreifen und beim TagName habe ich gut 70 Inputs (nur für 5 Versionen der Zaubersprüche), die ich selektieren muss. Eine Spezialisierung von document.getElementsByTagName("input") geht ja durch eine Variabel anscheinend auch nicht ( document.VariabelDesMusternamens.getElementsByTagN ame("input"))...

Ich hatte gestern noch einige Stunden damit verbracht, eine Silbe aus 2 Buchstaben zusammen zu setzen (erster Buchstabe aus Silbe 1(erster Buchstabe) und zweiter Buchstabe aus Silbe 3(letzter Buchstabe)). Da hab ich gefühlte 150 Zeilen Code und es ging trotzdem nicht xD" Ich denke, ich werd solche Silben dann ebenfalls auf 2 Inputs aufteilen.
Dann muss nur das mit dem Springen klappen...

Gruß
Nicole

nikosch · 27.02.2011, 14:55

Das mit dem Springen verstehe ich nicht. Für mich wäre das logischste: Ich trage die erste Silbe ein und Silbe 9 und 13 werden bei Tastendruck oder onBlur gleich aufgefüllt. (deshalb können diese Felder im Prinzip auch readonly sein).

Zitat:

Den Namen kann ich nicht einfach durchnummerieren, weil ich durch den doch festlege, welche Felder identisch und halbidentisch sind. Und 2 Namen kann ich ja nicht vergeben. Über IDs kann ich die Gleichheit auch nicht festlegen, weil eine ID ja nur einmal vergeben sein darf.

Javascript ist eine Scriptsprache. Du kannst also problemlos ein zusätzliches Array oder Literal führen, in dem Du die Zusammenhänge definierst.

Schau Dir mal jQuery und JSON an, macht vieles leichter.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Nachgefragt zum Submit und Inputfelder	chandlerP	Off-Topic Diskussionen	3	01.02.2011 18:29
Strukturierung und Verknüpfung mehrerer Tabellen	1coffee2go	Datenbanken	2	30.12.2010 14:22
Mehrere Inputfelder in DB speichern	larsibaby78	PHP Tipps 2010	6	21.08.2010 10:50
dynamische Inputfelder in mehrseitigem Formular mit Sessions	maeck	PHP Tipps 2010	12	13.03.2010 18:16
Strukturierung eines Templatesystems	Anyone	Software-Design	16	12.08.2009 21:27
Strukturierung größerrer Projekte	#Avedo	Software-Design	19	24.10.2008 11:10
Strukturierung einer kleinen DB	c-f-g	Datenbanken	6	24.03.2006 09:54
Strukturierung modularer Website mit CleanUrls	ssm	PHP Tipps 2006	20	22.03.2006 16:49
mehrere Inputfelder abfragen		PHP Tipps 2004	4	07.07.2004 22:00
Tabellen Inputfelder etc. verschwinden lassen		HTML, Usability und Barrierefreiheit	4	28.06.2004 20:24

26.02.2011, 14:57
Nicole Neuer Benutzer Registriert seit: 30.06.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	Inputfelder: Strukturierung und Zusammengehörigkeit Hallo zusammen! Ich sehe inzwischen nur noch Sterne und komme nicht weiter. Darum möchte ich nun euch mal fragen wie man die Probleme am besten löst. Folgende Situation: Ich möchte dem Besucher die Möglichkeit geben, verschiedene Silben (2 Buchstaben) nach einem vorgegebenen Muster zusammenzufügen. Hierfür habe ich nun eine Sammlung von Input-Feldern (Typ: text), deren Länge ich auf 2 begrenzt habe. Durch JavaScript werden auch eingegebene Silben an anderen Stellen eingebunden, damit das Muster erhalten bleibt (z.B. entspricht Silbe 1 9 - gibt man eine der Silben ein, wird die andere automatisch ausgefüllt). Die Zusammengehörigkeit habt ich durch verschiedenfarbige border-bottom's der Inputfelder kenntlich gemacht. An manchen Stellen entspricht eine Silbe aber nicht ganz einer anderen. So kann es z.B. sein, dass Silbe 2 und 10 auf den selben Buchstaben enden, aber der erste Buchstabe ein beliebiger sein kann. Für solche Fälle habe ich die Silbe in 2 Inputs geteilt, wobei jedes Input einen Buchstaben enthält. Das Beispiel findet ihr hier: Klick mich! Die Probleme: 1. Ich weiß nicht, wie ich die Inputs am besten ordnen soll. Aktuell identifiziere ich die Inputs in JavaScript über ihren Namen. ds1 hat überall den selben Inhalt, ds1a hat den selben ersten Buchstaben wie ds1, bei ds2b sind nur die ersten Buchstaben gleich, ds3c sind identisch und geben ihren ersten Buchstaben an ds3d. Außerdem werde ich noch etwas brauchen, wenn ich den Fall habe, dass der letzte Buchstabe identisch ist. Allerdings bin ich nun ziemlich unglücklich mit dem System, weil ich fürchte, es könnte einen besseren Weg geben. 2. Wenn der Besucher nun ein Input komplett ausgefüllt hat, soll er automatisch zum nächsten springen. Ich weiß nicht, wie ich herausfinden kann, ob er nun die Silbe gerade ausgefüllt hat, oder jetzt nochmal bearbeiten möchte. Außerdem weiß ich nicht, wie ich herausfinden soll, in welchem Input er gerade ist und welches das nächste sein wird... Kann mir jemand helfen, gute Lösungen zu finden? Grüße Nicole


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.02.2011, 15:03
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das ist ganz schwer zu verstehen. Kannst Du nochmal beschreiben, wie genau die Logik Deiner Anwendung funktioniert? Du hast mehrere Feldgruppen und dann? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

27.02.2011, 01:30
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Damit kann man doch wenigstens schon mal was anfangen. Bleibt noch die Frage: Wer soll das was eintragen? Und auf welchem Wege soll er unterstützt werden? ) Ein paar grundlegende Aussagen: ) Entscheidend ist die Art der Verarbeitung: Die Prüfung der o.g. Kriterien zur Eingabe ist nicht gerade trivial. Vor allem das Prinzip mit den gleichen Buchstaben am Ende. Etwas leichter als derartige Eingaben zu verhindern ist, nur eine Prüfung durchzuführen und die betreffenden falschen Felder zu kennzeichnen (und die Eingabe abzulehnen). Das kann JS-Seitig oder PHP-seitig geschehen. Etwas einfacher gestalten sich die komplett gleichen Silben. Hier würde ich Dir empfehlen, die entsprechenden Felder gleich vorauszufüllen, bzw. nicht doppelt zu erfassen. Desweiteren würde ich alle anstehenden Fehler einfach linear durchnumerieren, allerdings ein Array verwenden, also <input name="silbe[]"> __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

27.02.2011, 10:42
Nicole Neuer Benutzer Registriert seit: 30.06.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	Danke für den Hinweis. s Ich erklär nun nochmal die Gesamtheit der Sache g: Das Ganze ist für eine Online-Hexenschule gedacht. Die basieren i.d.R. auf der Animeserie DoReMi und es geht darum, sich anzumelden und durch das Bestehen von Prüfungen eine Hexe zu werden. Da eine Hexe einen Zauberspruch braucht, muss man den auch angeben. Die Zaubersprüche in der Serie sind in diesen Mustern verfasst. Ich möchte an dieser Stelle nun, dass der Schüler bei der Anmeldung seinen Zauberspruch nach einem dieser Muster festlegt. Dabei ist es mir wichtig, dass er den Spruch direkt so sehen kann und nicht irgendwie wählt "Silbe 1 = Pe, Silbe 2 = da, ..." und irgendwo das Ergebnis angezeigt bekommt, sondern direkt sehen kann, wo seine Eingabe verwendet wird. Darum möchte ich so mit den Inputs arbeiten. Die vorgelegten Values dienen nur nocheinmal zur Verdeutlichung. Jeder, der sich da anmeldet kennt die Zaubersprüche aus der Serie und soll so das Muster besser verstehen. Ist einfach anschaulicher als wenn ich schreibe A-o-o-x B-o-o-x A-y-C-D A-y-C-D Das mit den IDs sehe ich gerade nicht als ideale Lösung an - zumindest was das gleiche-Silben-erkennen-Problem angeht. Für das springen könnte ich das vielleicht machen, sodass ich den Befehl gebe "Springe zu [jetzigeID + 1]" und eine Variabel anlege mit der maximalen ID der Version (in Version 1 also "22", weil 10 Silben in 22 Inputs aufgeteilt). Hätte so einen Extra-Variabel gern vermieden, weil ich so ja nicht durchzählen kann, aber das ist vielleicht die kürzeste Lösung... EDIT: Okay, nichts mit IDs! xD Hab mich verlesen. Den Namen kann ich nicht einfach durchnummerieren, weil ich durch den doch festlege, welche Felder identisch und halbidentisch sind. Und 2 Namen kann ich ja nicht vergeben. Über IDs kann ich die Gleichheit auch nicht festlegen, weil eine ID ja nur einmal vergeben sein darf. Und auf Klassen kann ich nicht zugreifen und beim TagName habe ich gut 70 Inputs (nur für 5 Versionen der Zaubersprüche), die ich selektieren muss. Eine Spezialisierung von document.getElementsByTagName("input") geht ja durch eine Variabel anscheinend auch nicht ( document.VariabelDesMusternamens.getElementsByTagN ame("input"))... Ich hatte gestern noch einige Stunden damit verbracht, eine Silbe aus 2 Buchstaben zusammen zu setzen (erster Buchstabe aus Silbe 1(erster Buchstabe) und zweiter Buchstabe aus Silbe 3(letzter Buchstabe)). Da hab ich gefühlte 150 Zeilen Code und es ging trotzdem nicht xD" Ich denke, ich werd solche Silben dann ebenfalls auf 2 Inputs aufteilen. Dann muss nur das mit dem Springen klappen... Gruß Nicole Geändert von Nicole (27.02.2011 um 10:47 Uhr).