Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP.DE EXKLUSIV: formular dankeseite statt meldung + button nach klick 'ausgrauen'

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • PHP.DE EXKLUSIV: formular dankeseite statt meldung + button nach klick 'ausgrauen'

    hallo.

    ich habe ein kontaktformular, welches ich gern etwas aufpimpen moechte. da ich durch try&error bislang keine loesung gefunden habe (fuer mehr reichen meine php kenntnisse leider nicht) wollte ich hier mal fragen.

    das formular hat eine validierungspruefung. bei fehlenden feldern werden diese nach klick auf den submitbutton rot eingefaerbt und nichts wird versendet. nach korrektem ausfuellen und absenden wir eine dankemeldung unterhalb des formulars eingeblendet. soweit alles ok. letzteres dauert jedoch ein, zwei, drei sekunden.

    hier meine ziele des 'pimpens':
    1. nach absenden des formulars soll statt einer meldung auf der selben seite eine neue dankeseite geladen werden.
    2. der button soll nach klicken -UND nach ERFOLGREICHER FORMUALRPRUEFUNG- ausgrauen und mit z.b. 'wird gesendet' beschriftet werden. also nicht sofort nach JEDEM klick, sondern erst beim tatsaechlichen senden der mail - also auch NACH erfolgreicher pruefung der formularfelder.

    hier mal die drei komponenenten aus denen sich das formular zusammensetzt
    -----

    die formularseite:
    HTML-Code:
    <form id="send-form" method="post" action="email-kontakt.php" novalidate>
     <div>
      <input id="send-form-name" class="form-control" type="text" placeholder="Name *" name="name">
     </div>
     <div>
      <input id="send-form-email" type="email" placeholder="E-Mail *" name="email">
     </div>
     <div class="form-group">
      <textarea id="send-form-message" placeholder="Nachricht *" name="message"></textarea>
     </div>
     <input class="btn btn-default" type="submit" value="absenden">
    
    <span class="succs-msg">Vielen Dank!</span>
    
    </form>

    dann das email PHP script (email-kontakt.php):
    PHP-Code:
    <?php
    define
    ('EMAIL_ADMIN_SENT_TO''mail@domain.de');
    define('EMAIL_ADMIN_SUBJECT''Anfrage');
    define('EMAIL_CLIENT_SUBJECT''Ihre Anfrage');

    $headers  "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=UTF-8\r\n";
    $headers .= "From: mail@domain.de\r\n";
    $headers .= "X-Mailer: PHP/" phpversion() . "\r\n";

    $errors = array();
    $name    strip_tags(trim(!empty($_POST['name'])  ? $_POST['name']  : ''));
    $email   strip_tags(trim(!empty($_POST['email']) ? $_POST['email'] : ''));
    $message nl2br(strip_tags(trim(!empty($_POST['message']) ? $_POST['message'] : '')));

    if (empty(
    $name)) {
        
    $errors[] = 'name';
    }

    if (empty(
    $email) || !filter_var($emailFILTER_VALIDATE_EMAIL)) {
        
    $errors[] = 'email';
    }

    if (empty(
    $message)) {
        
    $errors[] = 'message';
    }

    $response = array('status' => 'ok');

    $datetime date('Y-m-d H:i:s');

    $letterToAdmin = <<<MSG
    <html>
    <body>

    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

        <strong>
    {$name}</strong> ( <a href="mailto:{$email}">{$email}</a> ) schreibt:<br/>
    {$message} <br/><br/>
    </body>
    </html>
    MSG;

    $letterToClient = <<<MSG
    <html>
    <body>

    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    Hallo 
    {$name},<br/>
    vielen Dank f&uuml;r Ihre Nachricht:<br/><br/>
    {$message}

    </body>
    </html>
    MSG;

    if (empty(
    $errors)) {
        
    mail(EMAIL_ADMIN_SENT_TOEMAIL_ADMIN_SUBJECT$letterToAdmin$headers);
        
    mail($emailEMAIL_CLIENT_SUBJECT$letterToClient$headers);
    } else {
        
    $response = array('status' => 'error''errors' => $errors);
    }

    die(
    json_encode($response));


    und ein formular-javascript:
    HTML-Code:
    (function ($, window, document) {
        'use strict';
    
    // ##### HIER FEHLT WAS ZUR BESSEREN UEBERSICHTLICHKEIT! #####
    
            $win = $(window),
            $html = $('html'),
    
    // ##### HIER FEHLT WAS ZUR BESSEREN UEBERSICHTLICHKEIT! #####
    
            that.init();
    
            // onLoad function
            $win.load(function(){
                that.sendform();
    
    // ##### HIER FEHLT WAS ZUR BESSEREN UEBERSICHTLICHKEIT! #####
    
            sendform: function () {
                var contactForm = $('#send-form'),
                    contactFormName = $('#send-form-name'),
                    contactFormEmail = $('#send-form-email'),
                    contactFormMessage = $('#send-form-message'),
    
                    emailValidationRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    
                contactForm.find('input, textarea').focusout(function(){
                    var self = $(this);
    
                    if (self.attr('id') == 'send-form-email'){
                        if ((self.val() === '') || (!emailValidationRegex.test(self.val()))) {
                            self.parent().addClass('has-error');
                        }
                    } else {
                        if (self.val() === '')
                            self.parent().addClass('has-error');
                    }
                }).focusin(function(){
                    $(this).parent().removeClass('has-error');
                });
    
                contactForm.on('submit', function(){
                    var isHaveErrors = false;
    
                    if (contactFormName.val() === '') {
                        isHaveErrors = true;
                        contactFormName.parent().addClass('has-error');
                    }
    
                    if ((contactFormEmail.val() === '') || (!emailValidationRegex.test(contactFormEmail.val()))) {
                        isHaveErrors = true;
                        contactFormEmail.parent().addClass('has-error');
                    }
    
                    if (contactFormMessage.val() === '') {
                        isHaveErrors = true;
                        contactFormMessage.parent().addClass('has-error');
                    }
    
                    if (!isHaveErrors) {
                        $.ajax({
                            type: 'POST',
                            url: 'email-angebot.php',
                            data: {
                                name: contactFormName.val(),
                                email: contactFormEmail.val(),
                                message: contactFormMessage.val()
                            },
                            dataType: 'json'
                        })
                            .done(function(answer){
                                if ((typeof answer.status != 'undefined') && (answer.status == 'ok')) {
                                    $('.succs-msg').fadeIn().css("display","inline-block");
                                    contactFormName.val('');
                                    contactFormEmail.val('');
                                    contactFormMessage.val('');
                                } else {
                                    alert('Message was not sent. Server-side error!');
                                }
                            })
                            .fail(function(){
                                alert('Message was not sent. Client error or Internet connection problems.');
                            });
                    }
    
                    return false;
                });
            }
        };
    
        $.fn[pluginName] = function (options) {
            return this.each(function () {
                if (!$.data(this, "plugin_" + pluginName)) {
                    $.data(this, "plugin_" + pluginName,
                        new Plugin(this, options));
                }
            });
        };
    })(jQuery, window, document);
    
    (function ($) {
        $(document.body).kontaktformular();
    })(jQuery);

    kannn mir hier bitte jemand weiterhelfen? habe schon mehrere stunden versenkt . und komme einfach auf keinen gruenen zweig. ;-(

    DANKE und gruss,
    stefan


  • #2
    Wie viele Threads noch? http://www.php.de/forum/webentwicklu...lick-ausgrauen

    Hier zwei ...

    dort und da welche... zu viel.


    [MOD: Geschlossen]
    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar

    Lädt...
    X