Ik ben verschillende issue's tegengekomen met mijn AJAX gebaseerde formulier en zou deze graag willen omzetten naar een normaal formulier.
Echter, dient deze wel de functies te behouden, namelijk:
- form validatie
- email versturen
- data toevoegen aan de database
- data tonen op RESULT.php
Kan iemand mij tonen waar ik wijzigingen moet brengen zodat de javascript bestand niet meer gebruikt wordt en de functies blijven werken. Er is mij verteld dat dit niet al teveel moeite moet zijn..
Ps. ik heb de titel en inhoud van deze post gewijzigd, dus onderstaande reacties zijn gebaseerd op de vorige titel..
VOORBEELD FORMULIER
<table width="675px" cellpadding="0" cellspacing="0">
<form id="ContactForm" action="">
<tr class="rij_contactpersoon">
<td class="left_td">Contactpersoon</td><td><input id="contactpersoon" name="contactpersoon" class="inplaceError" maxlength="120" type="text" class="error" autocomplete="off" onFocus="window.scrollTo(0, 0);"/><span class="error" style="display:none; margin-left:40px;"></span></td>
</tr>
<tr class="rij_bedrijf">
<td class="left_td">Bedrijfsnaam</td><td><input id="bedrijfsnaam" name="bedrijfsnaam" class="inplaceError" maxlength="120" type="text" autocomplete="off" onFocus="window.scrollTo(0, 0);"/><span class="error" style="display:none; margin-left:40px;"></span></td>
</tr>
<tr>
<td class="left_td">E-mail</td><td><input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off" onFocus="window.scrollTo(0, 0);"/><span class="error" style="display:none; margin-left:40px;"></span></td>
</tr>
<tr>
<td class="left_td">Telefoonnummer</td><td><input id="telefoon" name="telefoon" class="inplaceError" maxlength="120" type="text" autocomplete="off" onFocus="window.scrollTo(0, 0);"/><span class="error" style="display:none; margin-left:40px;"></span></td>
</tr>
<tr>
<td class="left_td">Question 1</td><td><div class="sizer"><label class="label_radio" for="vraag1_A"><input name="vraag1_antwoorden" id="vraag1_A" value="A" type="radio" />A) 10 Ohm</label><label class="label_radio" for="vraag1_B"><input name="vraag1_antwoorden" id="vraag1_B" value="B" type="radio" />B) 1 Ohm</label><label class="label_radio" for="vraag1_C"><input name="vraag1_antwoorden" id="vraag1_C" value="C" type="radio" />C) 0,1 Ohm</label><label class="label_radio" for="vraag1_D"><input name="vraag1_antwoorden" id="vraag1_D" value="D" type="radio" />D) Geen eis</label></div><span id="vraag1_antwoorden" class="foutmelding_quiz" style="display:none;"></span></td>
</tr>
<tr>
<td class="left_td">Question 2</td><td><div class="sizer"><label class="label_radio" for="vraag2_A"><input name="vraag2_antwoorden" id="vraag2_A" value="A" type="radio" />A) 10 Ohm</label><label class="label_radio" for="vraag2_B"><input name="vraag2_antwoorden" id="vraag2_B" value="B" type="radio" />B) 1 Ohm</label><label class="label_radio" for="vraag2_C"><input name="vraag2_antwoorden" id="vraag2_C" value="C" type="radio" />C) 0,1 Ohm</label><label class="label_radio" for="vraag2_D"><input name="vraag2_antwoorden" id="vraag2_D" value="D" type="radio" />D) Geen eis</label></div><span id="vraag2_antwoorden" class="foutmelding_quiz" style="display:none;"></span></td>
</tr>
<tr>
<td class="left_td"></td><td><input type="button" class="button_verzenden black" id="send" value="VERSTUUR" /><input type="hidden" id="newcontact" name="newcontact" value="1"></input></form>
</td>
</tr>
</table>
Het oude javascript bestand, deze dient niet meer gebruikt te worden, maar is voor jullie handig om te zien wat eruit werd opgeroepen.
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError,.foutmelding_antwoorden',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
window.location = 'result.php';
//show success message
$('#midden').remove();
var tekst = $('input[name=vraag1_antwoorden]:checked').val();
$('#succes_A_div span').html(tekst);
var tekst = $('input[name=vraag2_antwoorden]:checked').val();
$('#succes_B_div span').html(tekst);
//ook nog nodig om het echt te tonen?
$('#succes_A_div').show();
$('#succes_B_div').show();
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='') {
var elm = $("#"+data.errors[i].name);
// we gaan kijken welk soort element elm is.
// wanneer dat element een span is, moeten we geen nieuwe span meer aanmaken...
switch (elm[0].tagName.toLowerCase()) {
case 'span':
elm.html(data.errors[i].value).fadeIn();
break;
default:
elm.next().html('<span class="foutmelding_quiz">'+data.errors[i].value+'</span>').fadeIn();
break;
}
}
$("#"+data.errors[i].name).next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
CONTACT.PHP (wat moet ik hierin toevoegen, verwijderen?)
<?php
require_once("db.php"); /* Database Class */
require_once('utils/is_email.php'); /* Email Validation Script */
/* Handle Ajax Request */
if(isset($_POST['newcontact'])){
$contact = new Contact();
unset($contact);
}
else{
header('Location: ../result.php');
}
/* Class Contact */
class Contact{
private $db; /* the database obj */
private $errors = array(); /* holds error messages */
private $num_errors; /* number of errors in submitted form */
public function __construct(){
$this->db = new DB();
if(isset($_POST['newcontact']))
$this->processNewMessage();
else
header("Location: ../result.php");
}
public function processNewMessage(){
$contactpersoon = $_POST['contactpersoon'];
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$telefoon = $_POST['telefoon'];
$email = $_POST['email'];
$vraag1_antwoorden = $_POST['vraag1_antwoorden'];
$vraag2_antwoorden = $_POST['vraag2_antwoorden'];
/* Server Side Data Validation */
/* Contactpersoon Validation */
if(!$contactpersoon || mb_strlen($contactpersoon = trim($contactpersoon)) == 0)
$this->setError('contactpersoon', 'Vul uw contactpersoon in');
else if(mb_strlen(trim($contactpersoon)) > 120)
$this->setError('contactpersoon', 'Te lang! 120 karakters max.');
/* Bedrijfsnaam Validation */
if(!$bedrijfsnaam || mb_strlen($bedrijfsnaam = trim($bedrijfsnaam)) == 0)
$this->setError('bedrijfsnaam', 'Vul uw bedrijfsnaam in');
else if(mb_strlen(trim($bedrijfsnaam)) > 120)
$this->setError('bedrijfsnaam', 'Te lang! 120 karakters max.');
/* Telefoon Validation */
if(!$telefoon || mb_strlen($telefoon = trim($telefoon)) == 0)
$this->setError('telefoon', 'Vul uw telefoonnummer in');
else if(mb_strlen(trim($telefoon)) > 120)
$this->setError('telefoon', 'Te lang! 120 karakters max.');
/* Vraag 1 Validation */
if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
$this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Vraag 2 Validation */
if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
$this->setError('vraag2_antwoorden', 'Selecteer een antwoord a.u.b.');
/* Email Validation */
if(!$email || mb_strlen($email = trim($email)) == 0)
$this->setError('email','Vul uw e-mail in');
else{
if(!is_email($email))
$this->setError('email', 'Vul een correct email adres in');
else if(mb_strlen($email) > 120)
$this->setError('email', 'Te lang! 120 karakters max.');
}
/* Errors exist */
if($this->countErrors() > 0){
$json = array(
'result' => -1,
'errors' => array(
array('name' => 'contactpersoon' ,'value' => $this->error_value('contactpersoon')),
array('name' => 'bedrijfsnaam' ,'value' => $this->error_value('bedrijfsnaam')),
array('name' => 'email' ,'value' => $this->error_value('email')),
array('name' => 'telefoon' ,'value' => $this->error_value('telefoon')),
array('name' => 'vraag1_antwoorden' ,'value' => $this->error_value('vraag1_antwoorden')),
array('name' => 'vraag2_antwoorden' ,'value' => $this->error_value('vraag2_antwoorden')),
)
);
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
/* No errors, insert in db*/
else{
if(($ret = $this->db->dbNewMessage($contactpersoon, $bedrijfsnaam, $email, $telefoon, $vraag1_antwoorden, $vraag2_antwoorden)) > 0){
$json = array('result' => 1);
if(SEND_EMAIL)
$this->sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden);
}
else
$json = array('result' => -2); /* something went wrong in database insertion */
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}
}
public function sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden){
/* Just format the email text the way you want ... */
$message_body = "<div style=\"font-size:12px; font-weight:normal;\">Hallo,<br><br>"
."Het volgende bedrijf heeft zich zojuist aangemeld:</div><br>"
."<table cellpadding=\"1\" cellspacing=\"1\" width=\"550px\"><tr><td style=\"font-size:12px; color:#000000\">Bedrijfsnaam:</td><td style=\"font-size:12px; color:#000000\">".$bedrijfsnaam."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Contactpersoon:</td><td style=\"font-size:12px; color:#000000\">".$contactpersoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Telefoonnummer:</td><td style=\"font-size:12px; color:#000000\">".$telefoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">E-mail:</td><td style=\"font-size:12px; color:#000000\">".$email."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 1:</td><td style=\"font-size:12px; color:#000000\">".$vraag1_antwoorden."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 2:</td><td style=\"font-size:12px; color:#000000\">".$vraag2_antwoorden."</td></tr></table><br>";
// Geef GELDIGE adressen op
// Een korte benaming voor jouw website
$website_naam = 'Aanmelding';
// Jouw eigen geldige emailadres
$eigen_emailadres = 'EMAIL';
// Een geldig emailadres voor errors
$error_emailadres = 'EMAIL';
// De naam van de verzender
$naam_verzender = ''.$bedrijfsnaam.'';
// Het geldige emailadres van de afzender
$email_verzender = ''.$email.'';
// Een geldig emailadres of helemaal leeg laten
$bcc_emailadres = '';
// HTML mail? True/False
$html = true;
// De headers samenstellen
$headers = 'From: ' . $website_naam . ' <' . $eigen_emailadres . '>' . PHP_EOL;
$headers .= 'Reply-To: ' . $naam_verzender . ' <' . $email_verzender . '>' . PHP_EOL;
$headers .= 'Return-Path: Mail-Error <' . $error_emailadres . '>' . PHP_EOL;
$headers .= ($bcc_emailadres != '') ? 'Bcc: ' . $bcc_emailadres . PHP_EOL : '';
$headers .= 'X-Mailer: PHP/' . phpversion() . PHP_EOL;
$headers .= 'X-Priority: Normal' . PHP_EOL;
$headers .= ($html) ? 'MIME-Version: 1.0' . PHP_EOL : '';
$headers .= ($html) ? 'Content-type: text/html; charset=iso-8859-1' . PHP_EOL : '';
mail(EMAIL_TO,MESSAGE_SUBJECT,$message_body,$headers);
}
public function setError($field, $errmsg){
$this->errors[$field] = $errmsg;
$this->num_errors = count($this->errors);
}
public function error_value($field){
if(array_key_exists($field,$this->errors))
return $this->errors[$field];
else
return '';
}
public function countErrors(){
return $this->num_errors;
}
};
?>
RESULT.PHP (waar de ingevoerde data getoond moet worden, na het submitten. Momenteel heb ik alleen divs gemaakt voor beide vragen ter voorbeeld.
<body ontouchmove="BlockMove(event);">
<div id="position">
<div id="contact">
<div id="bevestiging">
<div id="succes_A_div">U koos voor antwoord: <span><span></div><br />
<div id="succes_B_div">U koos voor antwoord: <span><span></div>
</div>
</div>
</div>
</body>