Tweet
formular: dankeseite statt meldung und button nach 1x 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:
dann das email PHP script ([COLOR=#FF8000][COLOR=#0000FF]email-kontakt.php[/COLOR][/COLOR]):
und ein formular-javascript:
kannn mir hier bitte jemand weiterhelfen? habe schon mehrere stunden versenkt . und komme einfach auf keinen gruenen zweig. ;-(
DANKE und gruss,
stefan
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 ([COLOR=#FF8000][COLOR=#0000FF]email-kontakt.php[/COLOR][/COLOR]):
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($email, FILTER_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"> </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"> </div>
</div>
Hallo {$name},<br/>
vielen Dank für Ihre Nachricht:<br/><br/>
{$message}
</body>
</html>
MSG;
if (empty($errors)) {
mail(EMAIL_ADMIN_SENT_TO, EMAIL_ADMIN_SUBJECT, $letterToAdmin, $headers);
mail($email, EMAIL_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
Kommentar