Formulardaten mittels Ajax übermitteln

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Formulardaten mittels Ajax übermitteln

    Tag zusammen!

    Ich bin gerade dabei mir ein Kontaktformular zu basteln. Das übermitteln an sich funktioniert schon. Nur sollte es so sein, dass die Variablen nicht an den Browser übermittelt werden, sondern das ganz soll im Hintergrund ablaufen, sodass die Seite nicht neu geladen wird.

    Hab in google ein bisschen gesurft und wurde auch fündig. Da gab es ein ähnliches Script, welches ich nur noch angepasst hab.

    Im Header steht bei mir folgendes:

    Quellcode

    1. <script src="js/prototype.js" type="text/javascript"></script>
    3. <script type="text/javascript">
    4. function init () {
    5. $('submit').onclick = function () {
    6. sendData();
    7. }
    8. }
    9. function sendData () {
    10. var url = 'php/mail.php';
    11. var pars = Form.serialize('frm');
    12. var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
    13. }
    14. function showLoad () {
    15. $('load').style.display = 'block';
    16. }
    17. function showResponse (originalRequest) {
    18. var newData = originalRequest.responseText;
    19. $('load').style.display = 'none';
    20. $('status').innerHTML = newData;
    21. }
    22. </script>
    Alles anzeigen


    Der Code des Formulars ist:

    Quellcode

    1. <form id="frm" name="frm">
    3. <table cellspacing="0" cellpadding="0" border="0">
    4. <tbody>
    5. <tr>
    6. <td valign="top" height="40">
    7. <p><strong>Ihre Nachricht an mich:</strong><strong><br />
    8. </strong></p>
    9. </td>
    10. <td valign="top">&nbsp;</td>
    12. </tr>
    13. <tr>
    14. <td valign="top">Name, Vorname <span style="color: red;">*</span></td>
    15. <td valign="top"><input type="text" size="40" id="name" class="formStyle" name="name" /></td>
    16. </tr>
    17. <tr>
    18. <td valign="top">Firma</td>
    20. <td valign="top"><input type="text" size="40" id="firma" class="formStyle" name="firma" /></td>
    21. </tr>
    22. <tr>
    23. <td valign="top">Telefon</td>
    24. <td valign="top"><input type="text" size="40" id="phone" class="formStyle" name="tele" /></td>
    25. </tr>
    26. <tr>
    27. <td valign="top">E-Mail-Adresse <span style="color: red;">*</span></td>
    29. <td valign="top"><input type="text" size="40" id="email" class="formStyle" name="email" /></td>
    30. </tr>
    31. <tr>
    32. <td valign="top">Webseite</td>
    33. <td valign="top"><input type="text" size="40" id="webseite" class="formStyle" name="webseite" /></td>
    34. </tr>
    35. <tr>
    36. <td>&nbsp;</td>
    38. <td>&nbsp;</td>
    39. </tr>
    40. <tr>
    41. <td colspan="2">Beschreibung <span style="color: red;">*</span></td>
    42. </tr>
    43. <tr>
    44. <td colspan="2"><textarea id="job" class="formStyle_Large" rows="5" cols="60" name="job"></textarea></td>
    46. </tr>
    47. <tr>
    48. <td>&nbsp;</td>
    49. <td>&nbsp;</td>
    50. </tr>
    51. </tbody>
    52. </table>
    53. <p align="left"> <input type="submit" value="Anfrage schicken" class="inputButton" id="submit" /> </p>
    55. <p>&nbsp;</p>
    56. <div style="display: none;" id="load">Bitte warten...</div>
    57. <div id="status"></div>
    58. <p>&nbsp;</p>
    59. <p><span style="font-size: 8pt;">Notwendige Angaben sind mit <span style="color: red;">*</span> gekennzeichnet.</span></p>
    60. </form>
    Alles anzeigen


    Außerdem habe ich im body noch angegeben:

    Quellcode

    1. <body onload="init()">


    Das Einblenden des Divs "display" funktioniert wunderbar.
    Anschließend sollte er im div "status" einen bestimmten Text(Error o. Success) einbinden. Tut er aber nicht, was ich nicht verstehe.

    Es werden die Variablen des Formulars übergeben und die Email abgeschickt. Die Variablen sind dann auch in der Adressleiste zu sehen(sollte doch nicht so sein?).

    Vielleicht könnte es daran liegen, dass der code in einer php liegt. Zuvor hatte ich zum Test den Code in einer externen HTML getestet und es hatte auch alles prima funktioniert.

    Ich hoffe, dass ihr mir weiterhelfen könnt.

    grüße Willy

  • Re: Formulardaten mittels Ajax übermitteln

    hi, wie genau meinst du das?

    "styleworker" schrieb:

    Zuvor hatte ich zum Test den Code in einer externen HTML getestet und es hatte auch alles prima funktioniert.

    also .php zu .html umbenannt und es hat geklappt?
    das macht eigentlich keinen unterschied. Hast du alle externen dateien (prototype) mitkopiert?

    nutzt du firefox.. schau mal unter "extras" in die fehlerkonsole, ob da etwas mehr infos erscheinen

  • Habs nur zum Testen auf post gewechselt. Hat das Problem aber nicht gelöst.

    Benutze zum Testen am besten den Link: willyraider.de/kontakt.html

    Hier der code meiner mail.php:

    Quellcode

    1. $mailaddress = "xxx@xxx.de"; //e-mail Adresse des Empf?ngers
    2. $betreff = "Kundenauftrag";
    3. $name = $_GET['name'];
    4. $firma = $_GET['firma'];
    5. $phone = $_GET['phone'];
    6. $email = $_GET['email'];
    7. $website = $_GET['website'];
    8. $job = $_GET['job'];
    10. // jetzt die Mail wegschicken
    12. if(@mail($mailaddress, $betreff, "Name: $name \nFirma: $firma \nTelefonnummer: $phone \nE-Mail: $email \nWebseite: $website \n\nNachricht: \n$job", "From:$email")){
    14. print "Vielen Dank für Ihre Anfrage. Sie hören so bald wie möglich von mir.";
    15. usleep(400000);
    17. }else {
    19. print "Die Anfrage konnte nicht gesendet werden. Bitte kontaktieren Sie mich unter xxx@xxx.de";
    20. usleep(400000);
    21. }
    Alles anzeigen