1 / 13

Forms & AJAX

Forms & AJAX. Professor Josh Miller Lehigh University | Spring 2012. 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.

ratana
Download Presentation

Forms & AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Forms & AJAX Professor Josh Miller Lehigh University | Spring 2012

  2. 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

  3. Standard Forms • DW: insert> forms> form • Insert > form > Text field, text area, checkbox, radio button, select • Button • Standard Code <form id="form1" name="form1" method="post" action="process.php"> <input name="name" type="text" /> <textarea name="contact" id="contact" cols="45" rows="5"></textarea> </form>

  4. Code from last semester… <html><head><title>mail</title></head><body> <form method='post' action='mail.php'> Email: <input name='email' type='text' /><br /> Subject: <input name='subject' type='text' /><br /> Message:<br /> <textarea name='message' rows='15' cols='40'></textarea><br /> <input type='submit' /> </form> </body></html> ---- save as mail.php in same directory, change $to line <?php $to = "YOURADDRESS@mail.com"; $email = $_REQUEST['email'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail( $to, "Subject: $subject", $message, "From: $email" ); header( 'Location: thanks.html' ); ?>

  5. Classic Form Processing Model Web Application Development

  6. 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

  7. AJAX Form Processing • Still need the HTML, PHP (slightly modified), and some javascript… • messageHandler.php: <?php $username = $_POST['username']; $phoneNumber = $_POST['phoneNumber']; $message = $_POST['message']; $email = $_POST['email']; // setup the mail headers $subject = 'New contact received through the website'; $to = 'YOUREMAIL@whatever.com'; // <-- put YOUR email address here. $from = $email; $headers = "From: $from" . "\r\n" . "Reply-to: $from" . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $body = "New email received, details below\n\n"; $body .= "Full name: $username\n"; $body .= "Email address: $email\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/1.1 200 OK'); echo json_encode($response); ?>

  8. HTML part 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Contact Form</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style type = "text/css"> 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; } </style> </head>

  9. HTML part 2 <body> <div id = "container"> <h1>Contact Me</h1> <form id = "contactForm"> Full Name:<br /> <input type = "text" name = "fullName" id = "theName" /><br /><br /> Your Email Address:<br /> <input type = "text" name = "email" id = "theEmail" /><br /><br /> Phone Number: <br /> <input type = "text" name = "phoneNumber" id = "theNumber" /><br /><br /> Your inquiry: <br /> <textarea name = "message" id = "theMessage" rows = "6" cols = "40"></textarea><br /><br /> <input type = "button" id = "submitButton" value = "Send Now" /> </form> <div id = "statusUpdate"></div> </div> </body> </html>

  10. The Javascript <script type = "text/javascript"> jQuery(document).ready(function() { jQuery('#submitButton').click(function() { vartheName = jQuery('#theName').val(); vartheNumber = jQuery('#theNumber').val(); vartheMessage = jQuery('#theMessage').val(); vartheEmail = jQuery("#theEmail").val(); jQuery.post("messageHandler.php", { username: theName, phoneNumber: theNumber, message: theMessage, email: theEmail }, 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" ); }); }); </script>

  11. Validdation • Almost always done client side (perhaps also server side), with javascript • jQuery simplifies this tedious task • Example: if (theName == '') { jQuery("#theName").after('<label>Please fill in your first name.</label>'); jQuery("#theName").focus(); return false; }

  12. All 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 varapos=theEmail.indexOf("@"); dotpos=theEmail.lastIndexOf("."); if (apos < 1 || dotpos-apos < 2 ) { // email address lacks an '@' symbol or a '.' jQuery("#theEmail").after('<label>Please enter a valid email address.</label>'); jQuery("#theEmail").focus(); return false; } if (theName == '') { jQuery("#theName").after('<label>Please fill in your first name.</label>'); jQuery("#theName").focus(); return false; } if (theNumber == '') { jQuery("#theNumber").after('<label>Please fill in your phone number.</label>'); jQuery("#theNumber").focus(); return false; } if (theMessage == '') { jQuery("#theMessage").after('<label>Please enter a message.</label>'); jQuery("#theMessage").focus(); return false; }

  13. Homework • Research form stylizing CSS (customizing the look, color, focus css form forms) – try to make something unusual. • Forms can be beautiful: http://www.mattdempsey.com/#contactme • 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 email. • Nov 1,3 – work time. Due Nov 8. Must post on des170.com because you cannot use ajax between domains. Email link.

More Related