StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>Version 1 (omitting AJAX)</h1> <p>Well, pretty much you have it done, as far as for adding new items:</p> <pre><code><form id="ContactForm" action="php/contact.php" method="post"> </code></pre> <p>Then, further adjustments should be done at server-side validation and presenting result stage:</p> <pre><code>/* 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')), ) ); // The code below is an example and was not tested // you have to do similar thing for "insert into db" section echo("<ol>"); echo("Please correct the followin errors:") foreach ($json['errors'] as $item) { echo("<li>".$item['value']."</li>"); } echo("</ol>"); } /* 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); //the code below is an example, it includes result.php file include('result.php'); } else $json = array('result' => -2); /* something went wrong in database insertion */ $encoded = json_encode($json); echo $encoded; unset($encoded); } </code></pre> <p>Hints:</p> <ol> <li>You don't need JSON here.</li> <li>If you want to keep it simple, just echo HTML with errors or inserted data, where $encoded = json_encode($json) variable gets assigned (both cases, if and else).</li> <li>Make sure, that HTML form action points to you contact.php file.</li> <li>Then, result.php won't be needed.</li> <li>Major disadvantage is that reloading your page will keep adding new contact info if it's not checked at server-side validation.</li> </ol> <h1>Version 2 (displaying errors to your users)</h1> <p>This case will require you to redesign flow of your form, and this is what we want to achieve:<br> 1. A form is presented to your user (form.php).<br> 2. User fills out form (form.php).<br> 3. Form is being submitted (form.php, data is being sent to form.php).<br> 4a. Form is valid, insert data to database and present result page (form.php, then result php), OR<br> 4b. Form is invalid, present errors to user (form.php, submit will bring user back to point 3). </p> <p>Therefore: Form code you posted has to be adjusted: 1. First, put your current php/contact.php file's contents on top of it. 2. Then, each table row containing form input field has to be adjusted to present errors that were made.<br> 3. If-else block has to be adjusted to have header("Location: "); to produce redirect to result page. </p> <p>So, it'll be somewhere along the following.</p> <p>form.php (code wasn't tested but should have no semantic errors, you should put your html and meta definitions just after '?>' and before ''):</p> <pre><code><?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(); //We'll refer to that later on, to display errors. //unset($contact); } else{ //header('Location: ../result.php'); } /* Class Contact */ class Contact{ private $db; /* the database obj */ //private $errors = array(); /* holds error messages */ //we have to init $errors array, as otherwise form will produce errors on missing array entry private $errors = array( /* holds error messages */ 'bedrijfsnaam' => '', 'email' => '', 'telefoon' => '', 'vraag1_antwoorden' => '', 'vraag2_antwoorden' => '' ); private $num_errors; /* number of errors in submitted form */ public function __construct(){ $this->db = new DB(); if(isset($_POST['newcontact'])) $this->processNewMessage(); /* We don't need this anymore * 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')), ) ); } /* No errors, insert in db else*/ if($this->countErrors() == 0) { 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); //This is for relocating to successful result page header('Location: ../result.php'); } else { // else // $json = array('result' => -2); /* something went wrong in database insertion */ //This will need special treatment. You have to prepare an errorpage //for database-related issues. header("Location: database-error.html"); } /*$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; } }; ?><table> <form id="ContactForm" action="php/contact.php" method="post"> <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;">  <?php echo($contact->error_value('contactpersoon')) ?> </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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload