AJAX: Passwort ändern funktion

  • AJAX: Passwort ändern funktion

    [..] gesplittet von Ausklapptext

    ein loginscipt habe ich schon längst hinter mich gebracht. Heute kam mir die idee, meinen Benutzern etwas gutes zu tun und eine "passwort-ändern" funktion einzubauen. *hust, spätzünder*

    So hab ich mir das vorgestellt:

    1. eingabefeld neues pw
    2. neues pw wiederholen
    3. altes pw
    4. ok ändern.

    So eigentlich ja kein thema, wollte es aber etwas schicker haben, also hab ich mir überlegt JS/Ajax miteinfließen zu lassen. hat dann auch noch nen gewissen lerneffekt *hüstel*

    Ich weiß ja, wenn ich bsp. den senden button mit einer onclick function ausstatte, wird zuerst das js ausgeführt bevor das formular versendet wird. Also hänge ich da erstmal ein onclick ran, das eine oder zwei funktionen aufruft.

    Der Benutzer gibt also sein neues passwort ein, ebenso die wiederholung und zum schluss noch das alte kennwort. Er klickt auf "ändern".
    Nun soll aber nicht gleich das dashinterhängende script gestartet werden, sondern erst sollen die eingaben überprüft werden.

    Also, 1. soll per JS der inhalt aus den beiden ersten eingabefeldern (neues pw, wdh. neues pw) ausgelesen werden und miteinander verglichen werden. Ist dieser nicht identisch, wird ein div sichtbar, das sagt, die beiden eingegebenen kennwörter sind nicht identisch. Der focus soll in eines der beiden eingabefelder springen.
    Ich denke, dass werde ich ohne euch hinbekommen wobei ich nicht weiß wie ich den inhalt von feldern auslesen kann. Ich kann die eigenschaften der elemente ändern aber die inhalte auslesen?! naja.. *im buch nachschlagen werd*.

    Nun kommt der für mich immernoch verwirrende Ajax-Teil.
    Ist diese überprüfung erfolgreich, wird eine zweite function aufgerufen. Diese soll PHP-Code nachladen, der das "alte Passwort" mit dem in der MySQL DB gespeicherten vergleicht. Das php und Mysql gedöhns schaff ich.
    Wie ihr vielleicht schon mitbekommen habt bin ich ja in JS nicht fit.. Benutze zum inhalte nachladen gerne den/die code/s aus dem wiki.

    Da ist es allerdings immer so, das ich per onclick auf ein element (beispiel ein dropdownfeld) eine funktion aufrufe. Diese function übergibt dann der zugehörigen func datei per $_POST['s'] den inhalt des geklickten elements. Ich möchte nun aber nicht den inhalt des geklickten elements, sondern den inhalt eines anderen felds auslesen und der func datei übermitteln.

    Ich würde ja das feld "altes pw" in der funktion auslesen und den inhalt von POST ändern aber ich blicke einfach nicht, wie der an die inhalte der elemente kommt. ich hoffe ihr versteht was ich meine.. bin schlecht im formulieren.

    in diesen sendRequest aus dem wiki tut er ja hier:

    Quellcode

    1. req.send('s='+digit);

    den inhalt 's='+digit übergeben. Dieser inhalt ist dann, soweit ich das verstanden habe, auf der func via $_POST['s'] abrufbar.

    in den sendRequest wird aber nirgends die variable s deklariert oder ich blick auch nicht wie der den inhalt von 's' bekommt.

    ist es möglich (bevor ich nun meine zeit vergeude und es dann nicht geht) bei

    Quellcode

    1. req.send('s='+digit);


    nicht req.send('s='+digit); sondern req.send('meinevariable'); zu übergeben?! oder wie soll ich mir den prozess der inhaltehinundherschiebung vorstellen?! wie bekomm ich auf der func den inhalt eines anderen, nicht ongeclicktem element?

    danke schonmal für euere antworten.

    grüße timo

    p.s: geiles adjektiv: wie ist dein button?! "ongeklickt" oder "geonclickt" :D
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von eseL ()

  • Also erstmal stell sicher, dass sich alle Input Elemente im selben Formular Element befinden.

    Dann kannst du mit this.form.inputname auch auf andere Werte zugreifen

    Quellcode

    1. <input type="hidden" name="foo"/>
    2. <input type="submit" name="s" onclick="alert(this.form.foo.value)"/>


    Die Funktion im Wiki kann dir übrigens auch einfach ALLE formularfelder sammeln: [wiki]Formulare mit AJAX.. und ohne[/wiki]

    Quellcode

    1. <input type="hidden" name="foo"/>
    2. <input type="submit" name="s" onclick="alert(getFormData(this.form))"/>

  • Öhh ok also ich hab mir den Wiki-beitrag durchgelesen und auch einigermaßen verstanden, nur schlauer bin ich irgendwie nicht geworden...

    Also ich Poste mal meinen derzeitigen stand. Ich habe nun die Überprüfung, ob alle Felder ausgefüllt sind sowie ob Neues PW und wiederholung neues PW identisch sind, mit hervorheben durch farben etc hintermich gebracht. Jetzt fehlt eben noch die überprüfung ob das alte PW denn auch mit dem aus der DB identisch ist.
    So sieht das bisher aus:
    Bitte erschlagt mich nicht, schön ist das ganze nicht aber es funzt...


    Hier mal der normale HTML quatsch:

    Quellcode

    1. <form name="kennwort" action="" method="POST" id="kennwort" onsubmit="return vergleich();" >
    2. <fieldset>
    3. <table>
    4. <tr>
    5. <td><font id="text3" style="color:">Neues Kennwort</font></td>
    6. <td><input id="input" name="neu1" type="password" size="25" style="background-color:" style="border-color:" /></td>
    7. </tr>
    9. <tr>
    10. <td><font id="text" style="color:">Neues Kennwort Wiederholen</font></td>
    11. <td><input id="input1" name="neu2" type="password" size="25" style="background-color:" style="border-color:" /></td>
    12. </tr>
    14. </table>
    16. <div id="content0" style="display:none" >
    17. <font color="#CD0000" style="margin: 0 0 0 1.7em;">Die eingegebenen Kennwörter sind nicht identisch.</font>
    18. </div>
    19. </fieldset>
    21. <table>
    22. <tr>
    23. <td><font id="text2" style="color:">Bisheriges Kennwort</font></td>
    24. <td><input id="alt" name="alt" type="password" size="25" style="background-color:" style="border-color:"/></td>
    25. </tr>
    27. </table>
    29. <div id="content1" style="display:none">
    30. </div>
    32. <div id="content2" style="display:none" >
    33. <font color="#CD0000" style="margin: 0 0 0 1.8em;">Bitte füllen Sie alle felder aus.</font>
    34. </div>
    36. <table>
    38. <tr>
    39. <td><input type="submit" name="los" value="ändern"></td>
    40. <td></td>
    41. </tr>
    42. </table>
    43. </form>
    Alles anzeigen


    hier der bisherige JS-Code

    Quellcode

    1. <script tyspe="text/javascript">
    2. <!--
    3. function vergleich(kennwort)
    4. {
    5. var npw;
    6. var npwwdh;
    7. var element;
    9. npw=document.kennwort.neu1.value;
    10. npwwdh=document.kennwort.neu2.value;
    11. apw=document.kennwort.alt.value;
    13. element=document.getElementById('content0');
    14. element1=document.getElementById('content1');
    15. element2=document.getElementById('content2');
    17. element3=document.getElementById('text');
    18. element4=document.getElementById('input1');
    19. element5=document.getElementById('alt');
    20. element6=document.getElementById('text2');
    21. element7=document.getElementById('text3');
    22. element8=document.getElementById('input');
    24. element2.style.display='none';
    25. element7.style.color='';
    26. element8.style.backgroundColor='';
    27. element8.style.borderColor='';
    28. element2.style.display='none';
    29. element3.style.color='';
    30. element4.style.backgroundColor='';
    31. element4.style.borderColor='';
    32. element2.style.display='none';
    33. element6.style.color='';
    34. element5.style.backgroundColor='';
    35. element5.style.borderColor='';
    37. element.style.display='none';
    38. element1.style.display='none';
    39. element2.style.display='none';
    42. if(npw == "" || npwwdh == "" || apw == "")
    43. {
    44. if(npw == "")
    45. {
    46. element2.style.display='inline';
    47. element7.style.color='#CD0000';
    48. element8.style.backgroundColor='#ffeeee';
    49. element8.style.borderColor='#CD0000';
    50. document.kennwort.neu1.focus();
    51. return false;
    52. }else{
    53. element2.style.display='none';
    54. element7.style.color='';
    55. element8.style.backgroundColor='';
    56. element8.style.borderColor='';
    57. }
    59. if(npwwdh == "")
    60. {
    61. element2.style.display='inline';
    62. element3.style.color='#CD0000';
    63. element4.style.backgroundColor='#ffeeee';
    64. element4.style.borderColor='#CD0000';
    65. document.kennwort.neu2.focus();
    66. return false;
    67. }else{
    68. element2.style.display='none';
    69. element3.style.color='';
    70. element4.style.backgroundColor='';
    71. element4.style.borderColor='';
    72. }
    74. if(apw == "")
    75. {
    76. element2.style.display='inline';
    77. element6.style.color='#CD0000';
    78. element5.style.backgroundColor='#ffeeee';
    79. element5.style.borderColor='#CD0000';
    80. document.kennwort.alt.focus();
    81. return false;
    82. }else{
    83. element2.style.display='none';
    84. element6.style.color='';
    85. element5.style.backgroundColor='';
    86. element5.style.borderColor='';
    87. }
    88. }else{
    89. if(npw!=npwwdh)
    90. {
    91. element.style.display='inline';
    93. element3.style.color='#CD0000';
    95. element4.style.backgroundColor='#ffeeee';
    96. element4.style.borderColor='#CD0000';
    98. document.kennwort.neu2.focus();
    100. return false;
    101. }else{
    103. //HIER IM ELSE TEIL SOLL DANN, WENN DENN ALLE AUSGEFÜLLT SIND UND NeuesPW mit WDH. NEUES PW IDENTISCH IST, DIE JS FUNKTION AUFGERUFEN WERDEN, DIE DEN INHALT VON altesPW
    104. //AN MEIN PHP FILE SCHICKT, DAS ABGLEICHT UND FALLS KORREKT DAS FORMULAR GESENDET WIRD UND FALLS INKORREKT, DAS DIV SICHTBAR WIRD MIT "FALSCHES PW" SOWIE RETURN
    105. // FALSE; ZURÜCKGIBT
    106. element.style.display='none';
    107. element1.style.display='none';
    108. element2.style.display='none';
    110. }
    111. }
    112. }
    113. //-->
    114. </script>
    Alles anzeigen


    wie gesagt sauber ist der code nicht egal... bin trotzdem stolz *hust*

    Also was muss ich nun genau tun um dan Inhalt von "alt" mittels Ajax der func zu übermitteln?! :whistling:

    vielen dank schonmal
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---

  • Hi Folks, :D

    bin nun ein schritt weiter. Die funktion "vergleich" checkt ob alle Felder gefüllt sind, ob neues pw und wiederholung neues pw identisch sind. Stimmt das führt sie den Code aus, der den inhalt des Felds "alt" an die func datei übermittelt.

    sieht dann so aus:

    Quellcode

    1. ...
    2. //hier noch ob neuespw == wiederholung npw, falls ja den nachladecode
    3. if(npw!=npwwdh)
    4. {
    5. element.style.display='inline';
    7. element3.style.color='#CD0000';
    9. element4.style.backgroundColor='#ffeeee';
    10. element4.style.borderColor='#CD0000';
    12. document.kennwort.neu2.focus();
    14. return false;
    15. }else{
    18. var req;
    19. try {
    20. req = window.XMLHttpRequest?new XMLHttpRequest():
    21. new ActiveXObject("Microsoft.XMLHTTP");
    22. } catch (e)
    23. {
    24. //Kein AJAX Support
    25. }
    27. req.onreadystatechange = function() {
    28. if ((req.readyState == 4) && (req.status == 200))
    29. {
    30. document.getElementById('content1').innerHTML = req.responseText;
    31. }
    32. };
    33. var id = document.getElementById('alt').value;
    35. req.open('get', '../func/func6.php?s='+ id + '&anti_cache=' + Math.random());
    36. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    37. req.send('s='+ id);
    38. ...
    Alles anzeigen


    Soo ok ich brauche wieder hilfe. Diesmal habe ich aber nicht einmal eine idee für den korrekten lösungsansatz. Bleibt diesmal also kein Monolog meinerseits sondern ich brauche euere Hilfe :whistling:

    Also ich habe der func datei nun den Inhalt übergeben. Diese soll nun überprüfen ob der inhalt auch der selbe ist wie der in der DB. Das problem ist jetzt, die funktion "vergleich" wird ja mit einem onsubmit aufgerufen, damit return false; das absenden verhindert, solange werte nicht korrekt sind. Wie schaffe ich es nun, nach der überprüfung des alten pws der js funtkion "vergleich" zu übermitteln ob der vergleich der altenpw's korrekt oder inkorrekt war. Denn falls inkorrekt muss die funktion "vergleich" ja ein return false; reinhauen, damit das formular nicht gesendet wird.

    Ich hoffe ihr versteht was ich meine.

    habe schon an ein hidden feld gedacht aber das lässt sich mit dem thema sicherheit nicht vereinbaren.

    danke schonmal

    grüße
    Timo
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von eseL ()

  • das geht nicht. Der "A"JAX erfolgt asynchron - ist selbst also immer vom Typ void. Willst du AJAX benutzen muss onsubmit also immer false liefern.
    Synchrone Requests sind zwar möglich aber nicht zu emfehlen.

    Ist die asynchrone Anfrage im Hintergrund irgendwann fertig, dann ruft diese eine Callback Funktion auf.
    Siehe dazu noch: [wiki]AJAX Hintergrundwissen[/wiki]

  • ohje d0nut danke dir...

    du hast grade einen geballten sack an hoffnung zerschmettert ;(

    Ich kann mit deiner Antwort leider nicht allzuviel anfangen. Also meine asynchrone Anfrage im Hintergrund überprüft das pw, true (falls pw korrekt) oder false (falls pw inkorrekt), und ist fertig.

    Jetzt für Dummies, was muss ich tun damit wenn die Überprüfung der Anfrage richtig ist, mein Formular gesendet wird?!

    Aus "eine Callback-Funktion" aufrufen werde ich leider nicht schlau. :S

    grüße
    Timo
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---

  • Ich möchte der Vollständigkeit halber mal einen Link ergänzen der erklärt wie dein Problem "synchron" zu lösen ist: hunlock.com/blogs/Snippets:_Synchronous_AJAX
    Verwendest du den 3ten Parameter false AJAX.open("POST", url, false); könntest du also statt return false direkt ein return AJAX.responseText machen.

    Über die Nachteile synchroner Aufruf habe ich mich relativ wenig informiert.
    Tatsache ist, dass du während eines synchronen Aufrufs nicht im Browser weiterarbeiten kannst. Wie sich das auf andere Tabs auswirkt weiß ich nicht hundertprozentig, ich könnte mir jedoch vorstellen, dass viele Browser hier blockieren.

    Asynchrone Aufrufe arbeiten wie gesagt mit callback Methoden (setrequesthandler = callback). Diese werden ausgeführt, wenn der server eine Antwort produziert hat.
    Die Logik wandert in JavaScript - du sendest das Formular also nicht ab wie normalerweise - sondern du extrahierst die Daten und sendest sie via AJAX. (getFormData, ...)

    Um genau zu sein, kannst du Validierung und Formular übertragen natürlich in einem Schritt machen. Übertrage das Formular und je nachdem ob die Validierung OK ist oder nicht, gebe einen anderen responseText.

  • Hi d0nut, vielen Dank für deine Hilfe und den Link.

    Habe dazu noch etwas in einem Buch gestöbert und daraufhin, in der zeile

    Quellcode

    1. req.open('get', '../func/func6.php?s='+ id + '&anti_cache=' + Math.random(), false);

    am ende das "false" hinzugefügt.

    Nun wartet das restliche script brav bis der Rest nachgeladen wurde und rattert erst danach weiter. Also habe ich mich für das Synchrone Asynchrone JAX entschieden ;)

    Zeitlich ist hier keine verzögerung zu bemerken, in diesem Bruchteil einer Sekunde, indem der Code ausgeführt und gesendet wird, hätte der Benutzer nicht die Möglichkeit, selbst wenn er wollte, irgendwie andersweitig mit dem Formular zu arbeiten.

    Das geht ruck zuck, es wird in der nachgeladenen Datei geprüft ob denn das alte Passwort übereinstimmt und und ein hiddenfeld generiert. Das bekommt dann jenachdem ob die Überprüfung "erfolgreich" war oder nicht den Value true oder false.

    Da mein "Main-"Script schön wartet, kann ich nach dem nachladecode, butterweich auf dieses frisch generierte element zugreifen und auslesen. Je nach inhalt verfährt das script dann andersweitig fort. Stimmen alle Eingaben, wird das Formular gesendet.

    Der Phpcode überprüft dann natürlich nocheinmal ob das im Formular mitgesendete "altpw" immernoch das selbe wie in der DB ist, sicher ist sicher ;)

    Naja alles in allem funzt das jetzt Wunderbar und sieht dazu noch gut aus, mit dem ganzen sichtbarmachen, rot hervorgehebe und einfocusen gedöhns :love:

    muss gestehen habe mich hier an die "kennwort ändern" funktion hier im Forum gehalten. Die ist zwar anders gelöst, optisch und funktionell habe ich aber eine 1zu1 kopie :whistling: hoffe das stört nicht ^^

    also nochmals vielen Dank d0nut für deine Hilfe

    achja, falls es mit dem Paradoxon "Synchrones Asynchrones Javascript and XML" irgendwann zu problemen kommen sollte, erfährst du es als erster ;)

    grüße
    Timo
    ----[Blockierte Grafik: http://www.smilie-harvester.de/smilies/Alltag/putzen.gif] Nein ich bin nicht die Signatur, ich Putz hier nur ---