OnSubmit functie (Ajax) werkt niet in Firefox

[monnick]

Ik ben bezig met het het maken van een loginsysteem. Wanneer een gebruiker een username+password heeft ingevuld en het formulier submit wordt er eerst met een XmlHttpRequest een salt uit de database opgehaald. Dit gebeurt in een Javascript functie die wordt aangeroepen bij "onsubmit". De request is synchroom, niet asynchroom, anders wordt het formulier al gesubmit voordat de salt is opgehaald.

Nu werkt dit prima in Chrome en IE, alleen in FF wil het niet werken. In Firefox wordt het formulier al gesubmit voordat de Ajax request binnenkomt. Ik heb al op Tweakers en Google gezocht naar oplossingen voor dit probleem, maar ik kan niet echt iets werkends vinden. Iemand een idee wat hier fout gaat?

De javascript functie wordt hier aangeroepen:

HTML:

<form id="login" method="post" action="auth.php" onsubmit="return doChallengeResponse();">

En dit is de functie:

JavaScript:

function doChallengeResponse() 
{
    var username =      document.getElementById('username').value;
    
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                
                var saltedPassword;
                var password =      document.getElementById('password').value;
                var challenge =     document.getElementById('challenge').value;
                var salt =          xmlhttp.responseText;
            
                // Add the salt to the password
                saltedPassword =    password.substring(0,(password.length/2));
                saltedPassword =    saltedPassword + salt;
                saltedPassword =    saltedPassword + password.substring((password.length/2), password.length);
                saltedPassword =    sha1(saltedPassword);
                alert(saltedPassword); // De alert wordt in Chrome en IE wel weergegeven. In FF niet.
            
                // Empty the password field to prevent it from being send in plaintext
                document.getElementById('password').value =     '';
                document.getElementById('challenge').value =    '';
    
                // Create the response string
                document.getElementById('response').value = sha1(username + ':' + saltedPassword + ':' + challenge);
                return true;
                
            } else {
                return false;
            }
        }
    }
    
    var page = "include/inc.getsalt.php";
    var params = "user=" + username;
    xmlhttp.open("POST", page, false);

    //Send the proper header information along with the request
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
}

[ Voor 4% gewijzigd door monnick op 14-10-2010 21:25 ]

[RobIII]

Sorry, maar dit is niets meer dan een "dit is mijn code en 't doet niet wat ik wil" topic. Begin eens met debuggen (Debuggen: Hoe doe ik dat?) en zelf te zoeken naar de oorzaak. Roepen dat je gezocht hebt kan iedereen; wat vond je, wat heb je daar uit gehaald en waarom werkte dat niet etc. etc. etc. We doen hier niet aan quickfixes.

Voor Fx issues is het handig eens te kijken naar dingen als Firebug. Die kunnen je het debuggen aardig veraangenamen.

(en het is (a)synchroon).

Edit: Ik zie je ook in je code het password veld leegmaken zodat 't niet gesubmit wordt. Had je dit niet gezien? Verder denk ik dat je veel kunt leren door eens te kijken hoe het login gebeuren hier op T.net werkt

[ Voor 29% gewijzigd door RobIII op 14-10-2010 21:39 ]

[crisp]

Waarom gebruik je een onreadystatechange handler voor een synchroon request?

Note overigens dat de return waarde van je handler sowieso niet de returnwaarde van je doChallengeResponse() functie is; die returned altijd undefined. Note ook dat de open() method ook altijd een onreadystatechange event afvuurt; het is ook altijd beter de onreadystatechange handler pas na de open() method toe te kennen, maar in het geval van een synchroon request heb je die eventhandler dus helemaal niet nodig en kan je na de send() method direct de responseText property uitlezen.

[monnick]

Bedankt voor je reactie Crisp Ik had eerst een asynchrone request, maar dat werkte dus niet. Toen had ik dat naar aanleiding van jouw reactie in dit topic (crisp in "\[php/javascript] Hoe form + check combin...") veranderd naar een synchrone request, maar was vergeten om de onreadystatechange() weg te halen.

Dat was meteen het probleem in Firefox, nu werkt het daar ook. Fijn dat je de moeite hebt genomen om het topic nog even te openen en me te helpen met je behulpzame reactie

Het is nu dus:

JavaScript:

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    var page = "include/inc.getsalt.php";
    var params = "user=" + username;
    xmlhttp.open("POST", page, false);

    //Send the proper header information along with the request
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200 && xmlhttp.responseText != 0) {
                // blaat
        }

@Roblll : Wat is het voordeel van het gebruiken van een shadow form zoals dat op Tweakers login gebeurt? Ik zie niet wat dat voor voordeel heeft ten opzichte van de methode die ik gebruik.

[crisp]

monnick schreef op donderdag 14 oktober 2010 @ 23:02:
Bedankt voor je reactie Crisp Ik had eerst een asynchrone request, maar dat werkte dus niet. Toen had ik dat naar aanleiding van jouw reactie in dit topic (crisp in "\[php/javascript] Hoe form + check combin...") veranderd naar een synchrone request, maar was vergeten om de onreadystatechange() weg te halen.

Dat was meteen het probleem in Firefox, nu werkt het daar ook. Fijn dat je de moeite hebt genomen om het topic nog even te openen en me te helpen met je behulpzame reactie

Graag gedaan; ik zag dat het probleem wat je hier aanstipte toch ietwat gecompliceerder was dus heb ik op die basis inderdaad besloten om het topic toch weer open te doen (RobIII zal het me vast niet kwalijk nemen ).

Overigens is de uiteindelijk reden waarom dit wel werkte in Chrome en IE waarschijnlijk een implementatie-verschil; waarschijnlijk handelen deze browsers de onreadystatechange die volgt op de send() nog wel af in dezelfde JS-thread (dus nog voor de submit), en Firefox niet.

@Roblll : Wat is het voordeel van het gebruiken van een shadow form zoals dat op Tweakers login gebeurt? Ik zie niet wat dat voor voordeel heeft ten opzichte van de methode die ik gebruik.

Dat kan ik ook voor je beantwoorden: dat is gedaan omdat sommige password managers anders de verkeerde waarde voor het password veld opsloegen en gebruikers dus bij een volgende keer met vooringevuld password veld toch niet konden inloggen