{"authorId":"1","title":"Ajax Forms with jQuery","slug":"ajax-forms-with-jquery","postDate":1189221198,"expiryDate":null,"enabled":"1","fields":{"2":"<p>There are so many different javascript frameworks out there, but I have recently started to use <a href=\"http:\/\/jquery.com\">jQuery<\/a>, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.<\/p>\n\n<!--more-->\n\n<h2 class=\"replaceHeadline\">Start with a Regular Form<\/h2>\n\n<p>First, I am going to build a <a href=\"http:\/\/trevordavis.net\/play\/jqueryajaxform\/\">regular form<\/a>. The form is just going to be a basic email form. You enter an email address to send to, an email address to send from, a subject, and a message. All fields are required. So the process of the form is:<\/p>\n\n<ol>\n <li>User fills out the form.<\/li>\n <li>User submits the form to the server.<\/li>\n <li>Server side script makes sure that there are no blank fields and that the email addresses are valid.<\/li>\n <li>If there are errors, show the form again with the error messages.<\/li>\n <li>If there are no errors, send the email.<\/li>\n<\/ol>\n\n<p>Ok, so this form is pretty simple, and doesn&rsquo;t take much time to submit since it&rsquo;s so short, but let&rsquo;s see how much better we can make it with a little jQuery.<\/p>\n\n<h2 class=\"replaceHeadline\">Add in JavaScript<\/h2>\n\n<p>OK, so next, I am going to make an <a href=\"http:\/\/trevordavis.net\/play\/jqueryajaxform\/ajaxed\/\">AJAX version, which is a duplicate of the first form<\/a>. The only other things I am going to include on the page are the jquery library (<a href=\"http:\/\/docs.jquery.com\/Downloading_jQuery\">which you can download here<\/a>) and my JavaScript to process this form.<\/p>\n\n\n<h3 class=\"replaceHeadline\">Firing My Script When the Document is Ready<\/h3>\n<p>jQuery has a nice little function to have you script start when the document is ready:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;\/\/Script&nbsp;goes&nbsp;here<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>OK, easy enough. Now, let&rsquo;s make something happen when the button to submit the form is clicked. I was smart enough to add an id of <strong>submit<\/strong> to my button, so it makes it really easy to reference:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"#submit\").click(function()&#123;<br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>First things first, I&rsquo;m going to hide anything with the class of error if it&rsquo;s showing (which nothing will be unless the form is unsuccessfully submitted twice). I also create a variable that I am going to use later to see if the form has an error and a variable to store the email regular expression:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"#submit\").click(function()&#123;<br \/>&nbsp;&nbsp;$(\".error\").hide();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\/;<br \/><br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n\n<h3 class=\"replaceHeadline\">Error Checking<\/h3>\n\n<p>Now that we&rsquo;ve got the beginning of the script setup, we need to do the error checking. So first, let&rsquo;s check to make sure that the email to address is not empty or invalid:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"#submit\").click(function()&#123;<br \/>&nbsp;&nbsp;$(\".error\").hide();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\/;<br \/><br \/>&nbsp;&nbsp;var&nbsp;emailToVal&nbsp;=&nbsp;$(\"#emailTo\").val();<br \/>&nbsp;&nbsp;if(emailToVal&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailTo\").after('&lt;span&nbsp;class=\"error\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailToVal))&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailTo\").after('&lt;span&nbsp;class=\"error\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;<br \/><br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Remember, the email address to send to input has an id of <strong>emailTo<\/strong>. What that code is saying is:<\/p>\n\n<ul>\n <li>Get the value of the email to address input.<\/li>\n <li>If it is empty, add an error message after the input<\/li>\n <li>If it has an invalid email address, add an error message after the input.<\/li>\n<\/ul>\n\n<p>Now, we just need to repeat the error checking for the other form fields:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"#submit\").click(function()&#123;<br \/>&nbsp;&nbsp;$(\".error\").hide();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\/;<br \/><br \/>&nbsp;&nbsp;var&nbsp;emailToVal&nbsp;=&nbsp;$(\"#emailTo\").val();<br \/>&nbsp;&nbsp;if(emailToVal&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailTo\").after('&lt;span&nbsp;class=\"error\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailToVal))&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailTo\").after('&lt;span&nbsp;class=\"error\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;<br \/><br \/>&nbsp;&nbsp;var&nbsp;emailFromVal&nbsp;=&nbsp;$(\"#emailFrom\").val();<br \/>&nbsp;&nbsp;if(emailFromVal&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailFrom\").after('&lt;span&nbsp;class=\"error\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;from.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailFromVal))&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#emailFrom\").after('&lt;span&nbsp;class=\"error\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;from.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;<br \/><br \/>&nbsp;&nbsp;var&nbsp;subjectVal&nbsp;=&nbsp;$(\"#subject\").val();<br \/>&nbsp;&nbsp;if(subjectVal&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#subject\").after('&lt;span&nbsp;class=\"error\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;subject.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;<br \/><br \/>&nbsp;&nbsp;var&nbsp;messageVal&nbsp;=&nbsp;$(\"#message\").val();<br \/>&nbsp;&nbsp;if(messageVal&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$(\"#message\").after('&lt;span&nbsp;class=\"error\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;message.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&#125;<br \/><br \/>&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Ok, error checking is done. If there are no errors, we need to send the email via an AJAX request. I&rsquo;m not going to include the whole script here, just because it&rsquo;s getting long, but you can <a href=\"http:\/\/trevordavis.net\/images\/content\/2008\/01\/submitform.js\">see the whole script<\/a>.<\/p>\n\n<p>So, there are no errors. Let&rsquo;s remove the button from the form, and add in a loading graphic:<\/p>\n\n<div class=\"codeblock\"><code>\nif(hasError&nbsp;==&nbsp;false)&nbsp;&#123;<br \/>&nbsp;$(this).hide();<br \/>&nbsp;$(\"#sendEmail&nbsp;li.buttons\").append('&lt;img&nbsp;src=\"\/images\/template\/loading.gif\"&nbsp;alt=\"Loading\"&nbsp;id=\"loading\"&nbsp;\/&gt;');<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<h3 class=\"replaceHeadline\">Submit the POST Request<\/h3>\n<p>Ok, now let&rsquo;s send the values via an AJAX POST request to our send email script that just sends the email. Once the request is completed, let&rsquo;s hide the form and display a success message:<\/p>\n\n<div class=\"codeblock\"><code>\n$.post(\"\/play\/jqueryajaxform\/sendEmail.php\",<br \/>&nbsp;&nbsp;&nbsp;&#123;&nbsp;emailTo:&nbsp;emailToVal,&nbsp;emailFrom:&nbsp;emailFromVal,&nbsp;subject:&nbsp;subjectVal,&nbsp;message:&nbsp;messageVal&nbsp;&#125;,<br \/>&nbsp;&nbsp;&nbsp;&nbsp;function(data)&#123;<br \/>&nbsp;&nbsp;$(\"#sendEmail\").slideUp(\"normal\",&nbsp;function()&nbsp;&#123;<br \/><br \/>&nbsp;&nbsp;&nbsp;$(\"#sendEmail\").before('&lt;h1&gt;Success&lt;\/h1&gt;&lt;p&gt;Your&nbsp;email&nbsp;was&nbsp;sent.&lt;\/p&gt;');<br \/>&nbsp;&nbsp;&#125;);<br \/>&nbsp;&#125;<br \/>);&nbsp;\n\n<\/code><\/div>\n\n<p>Pretty nice huh? So now, you have a perfectly accessible form. It works fine without JavaScript. But it works even better with JavaScript. I highly recommend checking out the <a href=\"http:\/\/docs.jquery.com\/Main_Page\">jQuery Documentation<\/a>. So go ahead, send yourself some emails to see for yourself.<\/p>\n\n<h3 class=\"replaceHeadline\">Update&hellip;<\/h3>\n<p>I was asked in the comments if I could include the PHP script. So as requested, here are the files that are used:<\/p>\n<ul>\n<li><a href=\"http:\/\/trevordavis.net\/images\/content\/2008\/01\/index.phps\">index.php<\/a><\/li>\n<li><a href=\"http:\/\/trevordavis.net\/images\/content\/2008\/01\/verify.phps\">verify.php<\/a><\/li>\n<li><a href=\"http:\/\/trevordavis.net\/images\/content\/2008\/01\/sendemail.phps\">sendEmail.php<\/a><\/li>\n<li><a href=\"http:\/\/trevordavis.net\/images\/content\/2008\/01\/thanks.phps\">thanks.php<\/a><\/li>\n<\/ul>","14":{"old_id":{}}}}