"Senden erfolgreich" wird auf andere Seite angezeigt

  • JavaScript

Es gibt 11 Antworten in diesem Thema. Der letzte Beitrag () ist von Eve.

    "Senden erfolgreich" wird auf andere Seite angezeigt

    Hey Leute,

    folgendes Problem: Nachdem man das Kontaktfeld ausfüllt und auf senden klickt, wird die Benachrichtigung dass die Nachricht abgeschickt wurde, auf einer extra Seite geöffnet. Was ich nicht verstehe da ich das Kontakt-Formular und die php und js Dateien aus einer anderen Webseite (welches ein bekannter von mir programmiert hat, wo es auch funktioniert) kopiert habe, ich habe auch kontrolliert ob alles richtig verlinkt, im richtigen Ordner und auch auf dem richtigen Platz ist. An den Codes an sich habe ich nur die E-Mail Adresse und die Namen geändert, sonst nichts. Nach stundenlangem suchen und rum probieren finde ich leider das Problem nicht.

    Hier Codes:

    Das Kontakt-Formular im html:

    Quellcode

    1. <form id="contact-form" action="assets/php/contact.php" method="post">
    3. <div class="messages"></div>
    5. <div class="controls">
    6. <div class="form-row">
    7. <div>
    8. <div class="form-group">
    9. <label class="d-xl-flex justify-content-xl-end" for="form_name"></label>
    10. <input class="form-control" type="text" id="form_name" data-error="Name erforderlich." name="name" required="" placeholder="Dein Name">
    11. <div class="help-block with-errors"></div>
    12. </div>
    13. </div>
    14. </div>
    15. </div>
    17. <div class="form-row">
    18. <div>
    19. <div class="form-group">
    20. <label class="d-xl-flex justify-content-xl-end" for="form_email"></label>
    21. <input class="form-control" type="email" id="form_email" data-error="E-Mail erforderlich." name="email" required="" placeholder="Deine Mail">
    22. <div class="help-block with-errors"></div>
    23. </div>
    24. </div>
    25. </div>
    27. <div class="form-row">
    28. <div>
    29. <div class="form-group">
    30. <label class="d-xl-flex justify-content-xl-end" for="form_phone"></label>
    31. <input class="form-control d-xl-flex justify-content-xl-start" type="text" id="form_subject" data-error="Betreff erforderlich." name="subject" required="" placeholder="Dein Thema (Betreff)">
    32. <div class="help-block with-errors"></div>
    33. </div>
    34. </div>
    35. </div>
    37. <div class="form-row">
    38. <div>
    39. <div class="form-group">
    40. <label class="d-xl-flex justify-content-xl-end" for="form_message"></label>
    41. <textarea class="form-control d-xl-flex justify-content-xl-start" type="text" id="form_message" data-error="Nachricht erforderlich." rows="8" name="message" required="" placeholder="Dein Anliegen"></textarea>
    42. <div class="help-block with-errors"></div>
    43. </div>
    44. </div>
    45. </div>
    47. <br>
    49. <div class="form-row"> <button class="btn btn-success btn-send submit" value="Senden" type="submit">senden</button> </div> </form>





    Hier der php-code:

    PHP-Quellcode

    1. <?php
    2. /*
    3. * CONFIGURE EVERYTHING HERE
    4. */
    6. // an email address that will be in the From field of the email.
    7. $from = 'Kontaktform KdB <[email=contactform@kulturderbewegung.de]contactform@kulturderbewegung.de[/email]>'; [i](das hier ist einer der veränderten codes)[/i]
    9. // an email address that will receive the email with the output of the form$sendTo = 'KDB Kontakt <[email=office@conweimar.de]office@conweimar.de[/email]>';[i] (das hier ist einer der veränderten codes)[/i]
    11. // subject of the email
    12. $subject = 'KdB Kontaktformular'; [i](das hier ist einer der veränderten codes)[/i]
    14. // form field names and their translations.
    15. // array variable name => Text to appear in the email
    16. $fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Betreff', 'message' => 'Nachricht');
    18. // message that will be displayed when everything is OK :)
    19. $okMessage = 'Wir haben deine Anfrage erhalten! Wir melden uns schnellstmöglich bei dir.';
    21. // If something goes wrong, we will display this message.
    22. $errorMessage = 'Es ist ein Fehler aufgetreten . Bitte später erneut versuchen';
    24. /* * LET'S DO THE SENDING */// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
    25. error_reporting(E_ALL & ~E_NOTICE);
    27. try
    28. {
    29. if(count($_POST) == 0) throw new \Exception('Form is empty');
    31. $emailText = "Neue Kontaktanfrage\n=============================\n";
    33. foreach ($_POST as $key => $value) {
    35. // If the field exists in the $fields array, include it in the email
    36. if (isset($fields[$key])) {
    37. $emailText .= "$fields[$key]: $value\n";
    38. }
    39. }
    41. // All the neccessary headers for the email.
    42. $headers = array('Content-Type: text/plain; charset="UTF-8";',
    43. 'From: ' . $from,
    44. 'Reply-To: ' . $from,
    45. 'Return-Path: ' . $from,
    46. );
    48. // Send email
    49. mail($sendTo, $subject, $emailText, implode("\n", $headers));
    51. $responseArray = array('type' => 'success', 'message' => $okMessage);
    52. }
    53. catch (\Exception $e)
    54. {
    55. $responseArray = array('type' => 'danger', 'message' => $errorMessage);
    56. }
    58. // if requested by AJAX request return JSON response
    59. if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    60. $encoded = json_encode($responseArray);
    62. header('Content-Type: application/json');
    64. echo $encoded;
    65. }
    67. // else just display the message
    68. else { echo $responseArray['message'];
    69. }




    JS Code 1:

    Quellcode

    1. $(function () {
    3. $('#contact-form').validator();
    5. $('#contact-form').on('submit', function (e) {
    7. if (!e.isDefaultPrevented()) {
    8. var url = "assets/php/contact.php";
    10. $.ajax({
    11. type: "POST",
    12. url: url, data: $(this).serialize(),
    13. success: function (data)
    14. {
    15. var messageAlert = 'alert-' + data.type;
    16. var messageText = data.message;
    17. var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;
    19. </button>' + messageText + '</div>';
    20. if (messageAlert && messageText) {
    21. $('#contact-form').find('.messages').html(alertBox);
    22. $('#contact-form')[0].reset();
    23. }
    24. }
    25. });
    26. return false;
    27. }
    28. })
    29. });



    Es gibt noch einen ewig langen JS Code, den findet Ihr in den Dateianhängen. Hoffe es funktioniert.



    Ich gehe von aus dass es alle Codes sind, wenn nicht würde ich es noch hier einfügen.

    Danke schonmal im voraus!
    Dateien

    • JS Code 2.txt

      (12,11 kB, 119 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Eve“ ()

    Was meinst du mit "auf einer extra Seite angezeigt"? In einem neuen Tab? Oder im selben Tab, aber optisch eine andere Seite?

    EDIT: Und bitte nutze die Code-Tags um den Code entsprechend zu formatieren.. So kann man wenig mit anfangen...


    EDIT 2: @Eve ich behaupte mal es liegt an deiner Form.. Lass mal das action="assets/php/contact.php weg. Du hast einmal einen Listener auf den Button (JavaScript) und zusätzlich noch die Form. Beim Submit wird vermutlich beides getriggert - und die action leitet dich auf die andere Seite weiter.

    VG,
    Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    @Eve Bitte bearbeite deinen Startpost und entferne die rote Schrift (siehe Boardregeln) und füge Syntaxhighlighting-BBCodes ein, siehe [Forum] Welche BBCodes (Tags) gibt es hier im Forum zum Einfärben von Quellcodes (Syntax-Highlighting)?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Ehm, bitte nicht nur zur Kenntnis nehmen, sondern auch machen.

    Marcus Gräfe schrieb:

    Bitte bearbeite deinen Startpost und entferne die rote Schrift


    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „VaporiZed“, mal wieder aus Grammatikgründen.

    Aufgrund spontaner Selbsteintrübung sind all meine Glaskugeln beim Hersteller. Lasst mich daher bitte nicht den Spekulatiusbackmodus wechseln.

    Guten Morgen,

    ich hab mal die Seite aufgerufen.
    Wie lange entwickelst du schon Websites? In die Entwicklertools (Logs) schauen ist immer ein guter Anfang bei Problemen ;)

    1.) Lädst du jQuery zu spät, sodass Boostrap nicht richtig laden kann,
    2.) Lädst du nicht das jQuery Validator-Plugin.

    Dadurch wird er die function abbrechen und gar nicht erst dazu kommen, deinen Listener zu registrieren.
    Behebe mal die Probleme und schaue wie es dann ausschaut :)

    VG,
    Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    Ich entwickle schon seit fast einem Jahr Websites, bin aber in der Zeit nie dazu gekommen mich mit JS, jquery, php und allem drumherum zu beschäftigen, da ich meistens nur einfache Websites entwickelt habe, also ohne großem Kontaktformular usw.

    Also um ehrlich zu sein kann ich groß nicht mit deiner Erklärung anfangen, ich denke dass ich zwar verstehe was du mir sagen willst, aber ich weiß jetzt nicht was ich genau verändern oder umschreiben müsste :/

    Okay, alles kein Problem! Ich denke Grundverständnis zwischen JavaScript/HMTL und CSS hast du! :)

    Also

    HTML-Quellcode

    1. <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    2. <script src="assets/js/jquery.min.js"></script>


    Du lädst Boostrap, dann jQuery. Aber Bootstrap braucht vorher schon jQuery. Also muss das erstmal getauscht werden.

    Und ähnlich wie Fancybox, etc. ist der jQuery-Validator ebenfalls ein Plugin, dass du zusätzlich laden musst.

    HTML-Quellcode

    1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    3. <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
    4. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>


    Kannst im Netz nach den entsprechenden cdn-Links suchen oder alternativ: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js verwenden.
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    Also das $responseArray wird richtig zurückgegeben. Sprich es gibt nur ein Problem im E-Mail-Versand.

    Ich würde darauf tippen, dass dein Server auf dem das Script läuft noch nicht fähig ist Mails zu verschicken.
    Dazu muss (linux) bspw. sendmail installiert werden und entsprechend von PHP geladen werden.

    Aber dazu müssen wir mehr über deine Infrastruktur/deinen Server wissen :)
    Alternativ kannst du mal ein test php-script machen dass nur

    PHP-Quellcode

    1. ​<?php
    2. phpinfo();


    enthält und uns den Link schicken.


    VG,
    Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    Das Kontaktformular funktioniert jetzt, habe den

    Quellcode

    1. ​<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    entfernt da mir eingefallen ist dass jemand mal meinte, dass die jquery-Links ganz oben sein müssen. Den entfernten hatte ich noch ganz unten.


    Ich habe jetzt auf jeden Fall etwas neues dazu gelernt!

    Besten Dank für die Hilfe!