[Erledigt] Kleines Problem mit einem Forumal und Ajax..

[Moonblood]

Hallo Leute,

ich bräuchte mal einen Rat von euch.
Ich versuche gerade meine PHP Skills zu erweitern, in dem ich mich an einer Art Miniforum versuche. Bisher habe ich alles via PHP gesteuert, nun möchte ich aber etwas AJAX ins Spiel bringen.

Folgende Sachlage, ich habe ein Login Formular mit folgenden Aufbau.

<form id="login_form" class="round_border" action="page/form_handler.php" method="POST">
		
	<label for="user">Nutzername: <input id="user" name="user" type="text" value=""/></label><br>
	<label for="user_passw">Passwort: <input id="password" name="password" type="text" value=""/></label><br>
	<input name="form_action" id="verbinden" type="submit" value="anmelden" />
	<input id="reset" type="reset" value="reset" /><br><br>

</form>

Ich möchte nun, wenn der User auf anmelden klickt, dass mein JS die Eingaben
auf Inhalt (als ob Benutzername und Password eingetragen sind) prüft und nur wenn beide Eingaben vorhanden sind, die Informationen mittels POST an meine form_handler.php übertragen wird.

Hier mein JS.

$(document).ready(function(){
	
	$("#login_form").submit(function(){
		
		var user = $("input#user").val(); //Username
		var password = $("input#password").val(); //Password
		
		if('' == user || '' == password)
		{
			alert("Bitte überprüfen Sie Ihre Eingaben! \n Nutzername und Password eingeben!")
			
			//Submit Funktion unterdrücken
			$("#login_form > input[type='submit']").attr("disabled", "disabled");	
		}
		//beide Inputs (User|Password) NICHT leer
		else
		{
			$.ajax({
				type: "POST",
				url: "form_handler.php"
				data: "user=" + user + "&password=" + password,
				success: function()
					{
						//window.location.reload();
					}
				});
		}
	
	/* wichtig!
        sonst schickt der browser das formular ab und
        und ruft die seite auf die bei action="" hinterlegt wurde.
        dann verlässt er nämlich die bisherige seite... */
	return false;
	});
});

Ich habe bereits geschaut, wie ich mittels JS die Submit Funktionalität des Submit Buttons unterdrücken kann, jedoch funktioniert dies leider nicht so recht. Mein zweites Problem, ich bekomme ständig eine JS Fehlermeldung "Uncaught SyntaxError: Unexpected identifier" Zeile 21. Das wären dann meine Daten welche ich übertragen möchte, jedoch bin ich der Meinung das ich diese korrekt deklariert habe.

[tkausl]

function(event){
event.preventDefault();

Um das Absenden zu verhindern.
Und zu dem Fehler guckst du mal in die Zeile davor, was dort fehlt.

[Moonblood]

@tkausl sorry, damit konnte ich leider nicht so viel anfangen. Wie ich schon sagte, ich bin alles andere als ein Profi in Sachen JS..

Ich habe mit jetzt anders geholfen, mit der .load() Methode bin ich ans Ziel gekommen.
Ich habe mich mit dem oben geposteten Script noch eine Weile beschäftigt und auch voller Fazination festgestellt, dass auch keine Post Daten übertragen wurden. Keine Ahnung wieso genau, ich werde am WE mein AJAX Buch dazu noch mal studieren um hoffentlich meinen Fehler zu finden.

Das hier funktioniert nun so wie ich es mir wünsche und vor allem auch auf die Art und Weise wie ich es wollte. Ergo, die .load() Funktion ist mein Mann...

$(document).ready(function(){
	
	$("#login_form").submit(function(){
		
		if('' != $("input#user").val() && '' != $("input#password").val())
			{
				$("div#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function(){
					$("div#content").load("page/form_handler.php",
							{name: $("input#user").val(), password: $("input#password").val()}, function()
								{
									$("div#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400)	
								}
						);
				});	
			} 
		else
			{
				//Nutzer und Password leer
				if('' == $("input#user").val() && '' == $("input#password").val())
				{
					alert("Bitte Nutzername UND Password eingeben!");	
				}
				//Nutzer leer
				else if('' == $("input#user").val())
				{
					alert("Bitte Nutzername eingeben!");	
				}
				//Password leer
				else if('' == $("input#password").val())
				{
					alert("Bitte Password eingeben!");	
				}

			}
		
		return false;
	});
});

[rkr]

AngularJS

[Moonblood]

@rkr, was möchtest du mir damit sagen?

AngularJS ist offensichtlich ein JS Framework, genau wie jQuery mit dem ich ja bereits Versuche unternommen habe.

[rkr]

Nein, jquery ist ein js framework. Angular ist dagegen ein Superheldenframework. Das ist ein wichtiger unterschied.
Wenn ich eine Vergleich machen müsste würde sagen, dass jquery wie windowsmobile (nicht windowsphone) und angular wie iPhone ist.

[Gast]

was ein vergleich, will ich beides nicht nicht haben. fraglich bleibt auch, ob dem TE damit jetzt zwingend geholfen ist, dass man ihn in die grosse weite welt der js framework einläd, damit er noch mehr probleme kriegt.

muss bei POST nicht der datatype angegeben werden?

http://api.jquery.com/jquery.ajax/

//OT:
und wenn überhaupt dann erstmal backbone.js.
einfaches beispiel:
https://gist.github.com/derickbailey/1026406
complexeres beispiel:
http://clintberry.com/2012/backbone-...tion-tutorial/

[rkr]

Ich glaube kaum, dass man backbone als guten Vergleich stehen lassen kann. Eher emberjs. Und nein. Angular konsumiert eine Anwendung nicht so wie backbone oder ember. Es ist aber auch nicht ganz so dezent wie jquery. Naja, jedenfalls ist es der jquery-Nachfolger schlechthin.

[Gast]

//OT:
Ich habe nicht die möglichkeiten und hindernisse verschiedener js libs verglichen, sondern inwiefern sie für anfänger praktisch sind, in dem sinne, dass man damit gut js lernen kann. jquery hat mich jedenfalls zuanfang nur abgeschreckt.
Es ist möglich, dass ich mich hier irre.

@Topic: liegt das jetzt an dem datzatype, ich hab von jquery soeviel plan, wei ein erdmännchen vom fischen.

[nikosch]

[MOD] Back to topic bitte.

[rkr]

... der Thread ist doch bereits erledigt?