Ajax/jquery contact formulier

**Nathan van der Werf** · 15-04-2010, 17:24

Hallo mensen ik had een vraagje over een ajax / jquery contact formulier
ik heb de volgende scripts:
Validation.js (jquery en ajax):

$(function() {
$('.error').hide();
$(".button").click(function(){
$('.error').hide();
var name = $("input#name").val();
//als iets leeg is geef een error
if(name == ""){
$("input#name").addClass("errors1");
$("label#name_error").show();
$("input#name").focus();
}
else{$("input").removeClass("errors1");}

var email = $("input#email").val();
if(email == ""){
$("input#email").addClass("errors2");
$("label#email_error").show();
$("input#email").focus();
}
else{$("input").removeClass("errors2");}

var phone = $("input#phone").val();
if(phone == ""){
$("input#phone").addClass("errors3");
$("label#phone_error").show();
$("input#phone").focus();
}
else{$("input").removeClass("errors3");}

//Als er iets leeg is return false
if(name == ""){ return false;}
if(email == ""){ return false;}
if(phone == ""){ return false;}

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "scripts/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});
}
});
return false;
});
});

Process.php (php gedeelte):

<?php
include('../include/database.inc.php');
$error = '';
if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)){
$name = stripslashes(strip_tags($_POST['name']));
}
else {
$error = 'No name entered<br />';
}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)){
$email = stripslashes(strip_tags($_POST['email']));
}
else {
$error = 'No email entered<br />';
}
if ((isset($_POST['phone'])) && (strlen(trim($_POST['phone'])) > 0)) {
$phone = stripslashes(strip_tags($_POST['phone']));
}
else {
$error = 'No phone entered';
}
if(!empty($error)){
echo $error;
}
$email = $_POST['email'];
$regexp = "/^[a-z0-9][a-z0-9_.\-]*@([a-z0-9]+\.)*[a-z0-9][a-z0-9\-]+\.([a-z]{2,6})$/";
if (preg_match($regexp, $email)) {
return true;
}
else{
return false;
}
if(empty($error)){
mysql_query("INSERT into contact(name, email, phone)
values(
'". mysql_real_escape_string($name) ."',
'". mysql_real_escape_string($email) ."',
'". mysql_real_escape_string($phone) ."'
)
");
}
?>

En de html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery Contact form</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="js/validation.js"></script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="" method="post">
<table>
<tr>
<td colspan="3"><h1>Contact me</h1></td>
</tr>
<tr>
<td><label for="name" id="name_label">Name:</label></td>
<td><input type="text" name="name" id="name" size="30" value="" class="text-input" /></td>
<td><label class="error" for="name" id="name_error">This field is required.</label></td>
</tr>
<tr>
<td><label for="email" id="email_label">Email:</label></td>
<td><input type="text" name="email" id="email" size="30" value="" class="text-input" /></td>
<td><label class="error" for="email" id="email_error">This field is required.</label></td>
</tr>
<tr>
<td><label for="phone" id="phone_label">Phone:</label></td>
<td><input type="text" name="phone" id="phone" size="30" value="" class="text-input" /></td>
<td><label class="error" for="phone" id="phone_error">This field is required.</label></td>
</tr>
<tr>
<td><input type="submit" name="submit" class="button" id="submit_btn" value="Send" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

en nog css: waarschijnlijk overbodig

body{
margin: 0 auto;
font-size: 15px;
font-family: verdana;
}
#contact_form{
margin: 0 auto;
height: 250px;
width: 500px;
margin-top: 50px;
background: #E3E3E3;
border: 1px solid #333;
}
table{
margin-left: 50px;
}
h1{
color: #333;
}
.text-input{
border: 1px inset #333;
margin: 3px;
padding: 5px;
}
.errors{
border: 1px solid #F04246;
background: #F9AAAC;
}
.error{
color: red;
}
#message{
margin-left: 30px;
}
.errors1{ border: 1px solid #F04246; background: #F9AAAC;}
.errors2{ border: 1px solid #F04246; background: #F9AAAC;}
.errors3{ border: 1px solid #F04246; background: #F9AAAC;}

mijn vraag is nu of mijn probleem:

Ik heb in process.php een regexp
alleen deze werkt helemaal niet, hij returned niet false hij doet totaal niks
ik heb al aantal dingen geprobeerd zoals:
-Variabele overdragen naar jquery en if else maken (is niet gelukt)
-JQuery validatie maken met regexp(is ook niet gelukt)
heb ook al 4 uren gegoogled dus kom niet met stomme google linkjes enzo...

Als er iemand is die me kan helpen dan hoor ik dit graag

**Martijn H** · 16-04-2010, 15:55

als je php gedeelte in een functie staat: hij returnt sowieso voordat hij bij de mysql_query aan komt (namelijk true of false)

PHP Code:


$regexp = "/^[a-z0-9][a-z0-9_.\-]*@([a-z0-9]+\.)*[a-z0-9][a-z0-9\-]+\.([a-z]{2,6})$/";
if (preg_match($regexp, $email)) 
{
    return true;
}
else
{
    return false;
}

daarna stopt je script.
probeer eens:
var_dump(preg_match($regexp,$email));

Bij 0 is je regex goed maar matcht ie het email adres niet
Bij 1 matcht ie met het email adres
Bij false gaat er iets fout.
Ik heb je regex net getest en deze werkt overigens dus daar ligt het niet aan...

en voor je query:

PHP Code:


$sql = 'INSERT INTO contact(name, email, phone) VALUES("%s","%s","%s")';
$sql = sprintf($sql,mysql_real_escape_string($name),mysql_real_escape_string($email),mysql_real_escape_string($phone));
mysql_query($sql);

is net zo netjes en makkelijker in gebruik :-)

**Ramon Mol** · 16-04-2010, 16:07

Mwah sprintf vind ik persoonlijk helemaal niks hoor. Maak veel liever mijn queries overzichtelijk op. Zodat een ander ook nog kan teruglezen wat je hebt geschreven en je er zelf - nadat je er een tijdje niet meer na hebt gekeken - ook nog je weg vindt.

PHP Code:


$sql = '
    INSERT INTO contact
    (
        name,
        email,
        phone
    )
    VALUES
    (
        "'.mysqli_real_escape_string($name).'",
        "'.mysqli_real_escape_string($email).'",
        "'.mysqli_real_escape_string($phone).'"
    );

Tipje van mijn kant. Gebruik filter_var() om bijvoorbeeld email-adressen te filteren. Hoef je niet met regex te kloten.

Tipje 2 van mijn kant. Gebruik mysqli() :)

Ajax/jquery contact formulier