Goedendag,
ik heb al jarenlang een simpel klein contact formuliertje, maar wil deze graag wat uitbereiden. Daarom heb ik ervoor gekozen om een contact formulier te laten samen werken met jquery. Hiervoor heb ik het nodige hulp nodig.
Als volgt heb ik deze Jquery script:
en de volgende html code:
Ik heb in de php het volgende zitten. Let op dit kan helemaal fout zijn!
Zou iemand mij hiermee kunnen helpen?
als ik op verzenden druk, staat er alleen maar: Loading...
alvast bedankt!
groet,
Rick Bongers
ik heb al jarenlang een simpel klein contact formuliertje, maar wil deze graag wat uitbereiden. Daarom heb ik ervoor gekozen om een contact formulier te laten samen werken met jquery. Hiervoor heb ik het nodige hulp nodig.
Als volgt heb ik deze Jquery script:
Code:
$('.validate-form').submit(function(){
var form = $(this);
form.find('.required').parents('.row:eq(0)').removeClass('field-error');
var field, v, id, msg, t, field_holder;
var alert_msg = $('.msg-alert');
var error = false;
form.find('.required').each(function(){
field = $(this);
field_holder = field.parents('.row:eq(0)');
v = $(this).val();
t = $(this).attr('title');
id = $(this).attr('id');
if( $(this).hasClass('valid-email') ){
if( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(v) == false ) {
error = true;
}
}else {
if( v == '' || v == t ){
error = true;
}
}
if( error ) {
field.addClass('field-error');
alert_msg.fadeIn();
//error_fields.push( field );
}
});
if( !error ) {
form.find('.required').removeClass('field-error');
var data = {}
form.find('.text-field').each(function(){
data[ $(this).attr('name') ] = $(this).val();
});
form.find('.text-field').each(function(){
$(this).val( $(this).attr('title') );
});
$('#message-field').val( 'Loading...' );
$.post('send.php', data, function(){
alert_msg.fadeOut();
form.find('.msg-thanks').fadeIn(function(){
$('#message-field').val( $('#message-field').attr('title') );
window.setTimeout(function(){
form.find('.msg-thanks').fadeOut();
}, 5000);
});
});
}
return false;
});en de volgende html code:
HTML:
<form action="#" class="validate-form" method="post">
<div class="row">
<label>Voornaam<span>(verplicht)</span></label>
<input type="text" id="fname-field" name="name" class="field required text-field" />
<div class="cl"> </div>
</div>
<div class="row">
<label>Achternaam<span>(verplicht)</span></label>
<input type="text" id="lname-field" name="lastname" class="field required text-field" />
<div class="cl"> </div>
</div>
<div class="row">
<label>E-mail<span> (verplicht)</span></label>
<input type="text" id="mail-field" name="email" class="field required valid-email text-field" />
<div class="cl"> </div>
</div>
<div class="row">
<label>Onderwerp</label>
<input type="text" id="company-field" class="field text-field required" name="onderwerp" />
<div class="cl"> </div>
</div>
<div class="row">
<label>Bericht<span>(verplicht)</span></label>
<textarea id="message-field" name="comment" class="field message required text-field" cols="100" rows="5"></textarea>
<div class="cl"> </div>
</div>
<div class="row">
<input type="submit" class="submit-btn" value="Komt binnenkort" />
<div class="cl"> </div>
</div>
</form>Ik heb in de php het volgende zitten. Let op dit kan helemaal fout zijn!
PHP:
<?php
if ($_POST["email"]<>'') {
$ToEmail = 'info@excez.com';
$EmailSubject = 'Contact formulier Excez Design';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "fname-field: ".$_POST["name"]."<br>";
$MESSAGE_BODY .= "mail-field: ".$_POST["email"]."<br>";
$MESSAGE_BODY .= "company-field: ".$_POST["onderwerp"]."<br>";
$MESSAGE_BODY .= "message-field: ".nl2br($_POST["comment"])."<br>";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>Zou iemand mij hiermee kunnen helpen?
als ik op verzenden druk, staat er alleen maar: Loading...
alvast bedankt!
groet,
Rick Bongers
