HTML Mehrere Inputs über Button per Post übergeben

[max_1234]

Hallo!

Ich wage mich in letzter Zeit ein wenig in die Webentwicklung.
Schnell musste ich erkennen, dass es für viele Probleme zahllose Lösungsansätze gibt

Doch wie löst man folgendes "am Besten"?

Ich schreibe gerade eine kleine Login-Seite.
Diese ist sehr einfach strukturiert, sie besteht aus:

- Benutzer
- Passwort
- Checkbox (später für Cookie)
- Button zum Absenden

Alle Inputs sind in eigenen Tabellen/Divs angeordnet, es sind also keine zusammengefassten Inputs.
Wenn ich nun die <form> </form> Tags zusammenfasse, d.h. über mehrere Tabellen/Divs, dann haut es mir in jedem WYSIWG Editor die Formatierung zusammen

D.h. ich brauche eine Art von Trigger, wenn man auf den Button klickt, um alle Eingaben zu überprüfen und per POST an ein PHP-File zu übergeben. Wie kann ich diese Eingaben im "aktuellen" HTML File überprüfen und weitergeben?

Für eventuelle Fehlermeldungen würde ich die Loginseite selbst als Empfänger für POST's ausstatten, damit diese evtl. mit einer Fehlermeldung an sich selbst weiterleitet. Doch das würde ich erst nach der Überprüfung in der Datenbank machen, bzw. wenn ich weiß, wie ich mehrere Inputs mit einem Klick an ein PHP-File senden kann.

Beispiele in diese Hinsicht gibt es millionenfach, allerdings sind diese wirklich unheimlich komplex und gehen in alle Richtungen, nur nicht in die, die ich gerade brauche

mfg,
Max

 

[Mumpitzelchen]

Javascript und JSON?

 

[Tumbleweed]

​Das ginge zwar theoretisch, aber das wäre furchtbare Frickelei und unnötig. Rein von deiner Beschreibung würde ich sagen, dass dein markup falsch aufgebaut ist. Du musst dafür schon ein form nehmen und das dann entsprechend stylen, was ja mit CSS kein Hexenwerk ist.

Und eine Seite empfängt keine POSTs. Du kannst natürlich den submit request des forms per Ajax verschicken und dann auf eine error response vom Server entsprechend reagieren, wenn du den refresh unbedingt vermeiden willst. Das ist aber schon nicht mehr so basic, denn dann musst du an JS ran.

 

[Lawnmower]

Du schaffst es also nicht bei einem simples Login ein Form Tag drumherumzumachen?

dann haut es mir in jedem WYSIWG Editor die Formatierung zusammen

da hast Du mit allerhöchster Wahrscheinlichkeit irgendwas falsch verschachtelt. Inputs mit Tabellen (für ein Login) das ist auch eher ein wenig Retro.

 

[max_1234]

Du schaffst es also nicht bei einem simples Login ein Form Tag drumherumzumachen?


da hast Du mit allerhöchster Wahrscheinlichkeit irgendwas falsch verschachtelt. Inputs mit Tabellen (für ein Login) das ist auch eher ein wenig Retro.

Die zugehörige Formatierung steht zwischen den Elementen, ich implementiere zeitgleich einen selbst entworfenen Style. Die Ausrichtung erfolgt sehr simpel mit Tabellen, jedoch wird das Ergebnis in einem div verwendet.

Ist es möglich über javascript den Inhalt der einzelnen Inputs zu überprüfen und per POST weiterzuleiten?

 

[Tumbleweed]

Ja, dazu bindest du am besten jQuery ein und schaust dir mal diese Methode an (bzw. etwas mehr low level diese).

 

[max_1234]

Nein danke, bitte nur ernsthafte Antworten in Bezug auf mein Problem

 

[Daaron]

Alle Inputs sind in eigenen Tabellen/Divs angeordnet, es sind also keine zusammengefassten Inputs.
Wenn ich nun die <form> </form> Tags zusammenfasse, d.h. über mehrere Tabellen/Divs, dann haut es mir in jedem WYSIWG Editor die Formatierung zusammen

WYSIWYG ist schon einmal ein grober Fehler. Schreib deinen Code sauber in einem Texteditor wie Notepad++. WYSIWYG war schon immer Schrott und wird immer Schrott bleiben.
1.) keine Tabellen! Die Formularfelder sind keine tabellarischen Daten, also hat <table> da nichts zu suchen. Du willst einen logischen Zusammenhang zwischen <label> und zugehörigen <input> herstellen? Dafür gibts das Attribut "for".
2.) Alle Sachen, die ein Formular versenden soll, gehören sich natürlich innerhalb eines einzelnen <form>. <form> innerhalb von <form> dürfte nicht einmal zulässig sein.

D.h. ich brauche eine Art von Trigger, wenn man auf den Button klickt, um alle Eingaben zu überprüfen und per POST an ein PHP-File zu übergeben. Wie kann ich diese Eingaben im "aktuellen" HTML File überprüfen und weitergeben?

1.) Verlasse dich NIE auf clientseitige Prüfung. Prüfe alle Eingaben IMMER serverseitig (also in deinem PHP-Script). Vertraue NIEMALS Daten.
2.) HTML5 bietet einfach zu realisierende rudimentäre Eingabeprüfung, z.B. für Pflichtfelder und Feldtypen (z.B. eMail). Die Anzahl der Browser, die so etwas aber nicht können, ist noch sehr groß
3.) JavaScript... Gib dem Form n onSubmit - Event und mach deinen Sanity-Check für die Daten... Da es sich aber um Login-Daten handelt kannst du hier kaum was prüfen. Ganz sicher nicht, ob die Login-Daten korrekt sind. Du kannst nur gucken, ob alle wichtigen Felder ausgefüllt wurden.

 

[max_1234]

3.) JavaScript... Gib dem Form n onSubmit - Event und mach deinen Sanity-Check für die Daten... Da es sich aber um Login-Daten handelt kannst du hier kaum was prüfen. Ganz sicher nicht, ob die Login-Daten korrekt sind. Du kannst nur gucken, ob alle wichtigen Felder ausgefüllt wurden.

Genau das versuche ich ja
Ich arbeite gerade zum ersten mal seit >5 Jahren mit HTML/CSS, das Übermittlen einzelner POSTS/GETs ist für mich kein Problem, eben so wenig Datenbankabfragen. Nur diese Inputs verwirren mich gerade.

Du hast eh schon verstanden worum es mir geht, ich entnehme verschiedenen Inputs auf einer Seite die Daten, überprüfe diese auf ihre Gültigkeit (z.B. leer) - und sende diese dann per POST an ein PHP-File, welches, falls keine zugehörigen Treffer in der DB vorkommen, einen expliziten Fehler-Text zurück an die Login-Seite schicken, wodurch der User Live-Feedback zu seiner Anmeldung bekommt (Bsp. Passwort falsch/User nicht gefunden/...).

Nur wie verbinde ich das Klick-Event eines Buttons mit einer Javascript Funktion - und wie leite ich mit js Daten per Post weiter?

Das hier funktioniert NICHT (Augenmerk auf IsEmpty()):

<input type="image" src="images/btn_einloggen_normal.png" onMouseOver="this.src='images/btn_einloggen_over.png'" 
                        onMouseOut="this.src='images/btn_einloggen_normal.png'" name="image" width="161" height="42" onclick="return IsEmpty();">

<script type="text/javascript">
	function IsEmpty(){
		if(document.forms['frm'].inpuser.value == "" || document.forms['frm'].inppass.value == "")
		{
			alert("empty");
			return false;
		}
	return true;
	}
</script>

Edit:
Habs nun etwas abgeändert und über Variablen versucht:

<script type="text/javascript">
	function IsEmpty(){
		
		var x = document.forms["form1"]["inpuser"].value;
		var y = document.forms["form2"]["inppass"].value;
		//if(document.forms['frm'].inpuser.value == "" || document.forms['frm'].inppass.value == "")
		if(x=="Benutzer" || y=="Passwort")
		{
			alert("empty");
			return false;
		}
	return true;
	}
</script>

Problem war: Ich habe bereits einen Text in den Inputs, desshalb wurden diese nie wirklich als leer gewertet. Nun muss ich nur noch drauf kommen wie ich mit JS was über POST schicken kann

 

[Daaron]

Regel 1: Hat jemand, der klüger/fähiger ist als du, bereits eine freie Lösung veröffentlicht? Dann nutze sie: http://mootools.net/docs/more/Forms/Form.Validator
Regel 2: Schreib nach Möglichkeit Sachen immer so, dass sie ohne JavaScript korrekt funktionieren. Ein Slider funktioniert nicht ohne JS. Ein Formular (mit HTML5 sogar mit Validator) funktioniert IMMER ohne JS... außer man will krampfhaft <img> anstatt <input type="submit"> verwenden. Schreib erst eine No-JS - Version und peppe sie dann auf, niemals anders herum.

 

[max_1234]

Regel 1: Hat jemand, der klüger/fähiger ist als du, bereits eine freie Lösung veröffentlicht? Dann nutze sie:

Verschwinde aus meinem Thread

Dieser hat sich sowieso erledigt, zum Glück gibts noch andere Foren die einem wirklich weiterhelfen.

 

[Speedy.]

Na da ist aber jemand offen für Anregungen und neue Ideen... Und dank solch beratungsresistenter Leute sterben Webseiten mit Tabellenlayout und Krüppelcode nicht aus.

 

[Daaron]

Reisende soll man nicht aufhalten. Spätestens wenn ihm jemand seine JS-basierte Validierung um die Ohren haut und sein System knackt kommt er eh flennend zurück.

 

[Tumbleweed]

Um gar nicht von den Klartextdaten zu sprechen, die er da vermutlich durch die Welt funkt.

Aber das ist doch das tolle am Internetz. Man findet immer irgendwo jemanden, der auf dem gleichen Level rummurkst und mit dem man sich dann einig sein kann. Ich fand es ja schon dreist einzelne Antworten hier als nicht ernst gemeint abzustempeln, aus reinem Unverständnis.

 

[Daaron]

Um gar nicht von den Klartextdaten zu sprechen, die er da vermutlich durch die Welt funkt.

Na ja, ohne HTTPS/SPDY überträgst du Passwörter im Endeffekt immer im Klartext.

 

[Tumbleweed]

Ja https ist gut, aber ob er daran denkt oder es überhaupt kennt?

Zusätzlich könntest du das Passwort auch schon auf Client-Seite hashen, aber das wäre in so einem Fall overkill. Ich spielte hauptsächlich auf https an.

 

[Daaron]

Zusätzlich könntest du das Passwort auch schon auf Client-Seite hashen, aber das wäre in so einem Fall overkill.

Dann hast du ein neues Problem an der Backe: Was machst du bei Leuten ohne JS? Ich denk da jetzt nicht einmal an Screenreader (und andere barrierefreie Technologien), sondern einfach nur an die Massen an NoScript - Paranoikern.
Willst du dein serverseitiges Script gucken lassen, ob das PW ein Hash ist oder nicht?

Und außerdem: Was solls bringen? Du überträgst dann nicht ein Klartext-PW, sondern einen Hash. Gleichzeitig ist aber die benutzte Hash-Funktion vollkommen bekannt. Verwendete Salts sind ebenfalls bekannt. Ohne Salt braucht ein Mithörer nur ne Rainbow Table bemühen. Mit Salt löst er es auf 2 größeren Grafikkarten per Hash Cracking.