Logins You will need PHP to test this code, all modern web hosting companies will provide this, Lehigh does not. I've given you an account on des170.com: SFTP server: des170.com Login: Password: Directory: web
Standard FormsStandard Forms DW: insert> forms> form Insert > form > Text field, text area, checkbox, radio button, select Button Standard Code
Code from last semester…Code from last semester… mail Subject: Message: ---- save as mail.php in same directory, change $to line <?php $to = $ = $_REQUEST[' '] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail( $to, "Subject: $subject", $message, "From: $ " ); header( 'Location: thanks.html' ); ?>
Classic Form Processing Model Web Application Development
AJAX Asynchronous Javascript and XML Except, xml isn’t cool anymore, it’s now trendy to use JSON to transfer data (JavaScript Object Notation) “Data side” of the jQuery code we have been working with … Pros/Cons
AJAX Form ProcessingAJAX Form Processing Still need the HTML, PHP (slightly modified), and some javascript… messageHandler.php: <?php $username = $_POST['username']; $phoneNumber = $_POST['phoneNumber']; $message = $_POST['message']; $ = $_POST[' ']; // setup the mail headers $subject = 'New contact received through the website'; $to = // <-- put YOUR address here. $from = $ ; $headers = "From: $from". "\r\n". "Reply-to: $from". "\r\n". 'X-Mailer: PHP/'. phpversion(); $body = "New received, details below\n\n"; $body.= "Full name: $username\n"; $body.= " address: $ \n"; $body.= "Phone number: $phoneNumber\n"; $body.= " \n"; $body.= $message; //echo 'hello'; if (mail($to,$subject,$body,$headers)) { $returnMessage = "Thank you $username, we have received your message and reply to you as soon as possible."; $response = array('status'=>'success','message'=>$returnMessage); } else { $response = array('status'=>'error'); } header('HTTP/ OK'); echo json_encode($response); ?>
HTML part 1HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Contact Form body { font-family: verdana; font-size:12px; } #container { margin:20px 20px 0px 20px; } #statusUpdate { margin-top:20px; border:1px solid #999; padding:10px; width:300px; color:#666; display:none; } #contactForm label { color:red; display:block; }
HTML part 2HTML part 2 Contact Me Full Name: Your Address: Phone Number: Your inquiry:
The JavascriptThe Javascript jQuery(document).ready(function() { jQuery('#submitButton').click(function() { var theName = jQuery('#theName').val(); var theNumber = jQuery('#theNumber').val(); var theMessage = jQuery('#theMessage').val(); var the = jQuery("#the ").val(); jQuery.post("messageHandler.php", { username: theName, phoneNumber: theNumber, message: theMessage, the }, function(data) { if (data.status == 'success') { jQuery("#statusUpdate").html(data.message); jQuery("#statusUpdate").fadeIn(500); } else { jQuery("#statusUpdate").css('color','#ff0000'); jQuery("#statusUpdate").html('Sorry, there was an error sending you message.'); jQuery("#statusUpdate").fadeIn(500); } },"json" ); });
Validdation Almost always done client side (perhaps also server side), with javascript jQuery simplifies this tedious task Example: if (theName == '') { jQuery("#theName").after(' Please fill in your first name. '); jQuery("#theName").focus(); return false; }
All ValidationAll Validation Add before messageHandler post in the javascript – check for errors before data is sent // remove any error messages jQuery("#contactForm").find('label').remove(); // first validate the form var dotpos=the .lastIndexOf("."); if (apos < 1 || dotpos-apos < 2 ) { // address lacks an symbol or a '.' jQuery("#the ").after(' Please enter a valid address. '); jQuery("#the ").focus(); return false; } if (theName == '') { jQuery("#theName").after(' Please fill in your first name. '); jQuery("#theName").focus(); return false; } if (theNumber == '') { jQuery("#theNumber").after(' Please fill in your phone number. '); jQuery("#theNumber").focus(); return false; } if (theMessage == '') { jQuery("#theMessage").after(' Please enter a message. '); jQuery("#theMessage").focus(); return false; }
Homework Research form stylizing CSS (customizing the look, color, focus css form forms) – try to make something unusual. Forms can be beautiful: Create a contact form that has additional fields than what was shown in this demo, at least 3 additional fields (try to use more than just standard text boxes) Create a beautiful stylized form (perhaps the look of your portfolio layout), with validation, that sends a formatted . Nov 1,3 – work time. Due Nov 8. Must post on des170.com because you cannot use ajax between domains. link.