nicht angemeldet
Hi,
wenn man dein Formular absendet wird der onsubmit-handler aufgerufen und gleich im Anschluss das Formular abgesendet.
Da das action-Attribut leer ist wird es an die aktuelle Seite gesendet.
Es wird nicht gewartet bis dein AJAX-Request fertig ist, da dieser asynchron ausgeführt wird.
Wenn du verhindern möchtest dass das Formular abgesendet wird könntest du einfach im submit-handler false zurück geben.
Ich habe auch sonst noch ein paar Anmerkungen zu deinem Code, die deine eigentliche Frage nicht direkt betreffen:
Du gibst keinen Doctype an. Das führt früher oder später zu unerwartetem Verhalten.
Du hast deine Skripte zu beginn des body-Elements. Das ist suboptimal, da der weitere Aufbau der Seite blockiert wird bis diese Skripte geladen wurden.
Das heißt das Formular und auch alles andere was nach den script-Elementen kommt wird erst angezeigt nachdem das/die Skript(e) geladen wurden.
Deshalb: Skripte ganz zum Schluss einbinden.
Außerdem verwendest du bei einem Element das language-Attribut. Dieses Attribut ist absolut unsinnig und AFAIK sogar falsch(?).
Dafür hast du kein type-Attribut, falls du kein HTML5 schreibst ist dieses aber Pflicht.
Gibt es einen Grund warum du jQuery 1.5.2 verwendest und nicht das aktuelle 1.7.1?
Dann wenn du schon jQuery einbindest solltest du es auch konsequent verwenden. Das zählt bei jedem Framework.
Wenn man sich für eines entscheidet sollte man auch dabei bleiben, und nicht immer drum rum basteln o.ä.
Das bedeutet konkret:
- Eventhandler nicht per onsubmit-Attribut zuweisen sondern über .bind (bzw. .on bei 1.7.1)
- Zugriff auf Elemente nicht über das document-Element (document.wowrealmstatusform.servername.value) sondern über $. In diesem Beispiel $('input[name=servername]').
- Code kapseln. Der Code sollte nicht direkt ausgeführt werden sondern erst wenn das DOM fertig ist. Das geht folgendermaßen:
$(function(){
// Hier deine Programmlogik
});
Umgebaut würde das Ganze dann so aussehen:
<!DOCTYPE html>
<html>
<head><title></title></head><!-- Das title-Element ist verpflichtend, aber ich denke da fehlt sowieso noch einiges -->
<body>
<form name="wowrealmstatusform">
<input name="servername" type="text" autocomplete="off" /><!-- input Element sind immer inhaltslos, d.h. sie dürfen kein schließendes </input>-Tag haben. Das hätte dir auch der [link:validator.w3c.org@title=Validator] gesagt. -->
</form>
<div id="realmstatuses"></div>
<!-- da als Doctype HTML5 angegeben wurde kein type-Attribut erforderlich (und language sowieso nicht) -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="wowrealmstatus.js"></script>
</body>
</html>
Das Javascript-File wäre wie folgt:
$(function(){ // Zur Kapselung des Codes, und warten bis das DOM fertig ist
var server = $('input[name=servername]');// keine globale Variable (wäre böse!), Referenz auf das Objekt wird zwischengespeichert da es im Eventhandler ggf. öfter benötigt wird
$('form[name=wowrealmstatusform]').bind('submit', // Zugriff wieder über jQuery-Methoden, zuweisen des submit-Handlers genauso
function(e){// Das hier ist die Funktion die onsubmit aufgerufen werden soll, hier jetzt anonym
e.preventDefault(); // als Argument bekommt diese das event-Objekt. Da du das Formular nicht absenden möchtest, was die Default-Aktion wäre, sagen wir hier "verhindere das" (Das ist das äquivalent zu "return false;" wenn der Handler über das Element-Attribut zugeweisen wurde)
$.getJSON("http://eu.battle.net/api/wow/realm/status?jsonp=?", // Dein AJAX-Request
function(realm){ // Dein Callback
alert(server.val()); // server ist die Variable von weiter oben, hier holen wir den Wert (wieder über eine jQuery-Methode, ist ja auch ein jQuery-Objekt)
});
});
});
Fertig.
Würde mich freuen zu Erfahren ob mein Post für dich hilfreich war.
~dave
Der Martin