 there are so many different javascript frameworks out there but i have recently started to use jquery 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 start with a regular form first i am going to build a regular form 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 user fills out the form user submits the form to the server server side script makes sure that there are no blank fields and that the email addresses are valid if there are errors show the form again with the error messages if there are no errors send the email ok so this form is pretty simple and doesnt take much time to submit since its so short but lets see how much better we can make it with a little jquery add in javascript ok so next i am going to make an ajax version which is a duplicate of the first form the only other things i am going to include on the page are the jquery library which you can download here and my javascript to process this form firing my script when the document is ready jquery has a nice little function to have you script start when the document is ready $ document ready function script goes here ok easy enough now lets make something happen when the button to submit the form is clicked i was smart enough to add an id of submit to my button so it makes it really easy to reference $ document ready function $ submit click function return false first things first im going to hide anything with the class of error if its 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 $ document ready function $ submit click function $ error hide var haserror = false var emailreg = w w w 2 4 $ return false error checking now that weve got the beginning of the script setup we need to do the error checking so first lets check to make sure that the email to address is not empty or invalid $ document ready function $ submit click function $ error hide var haserror = false var emailreg = w w w 2 4 $ var emailtoval = $ emailto val if emailtoval == $ emailto after span class= error you forgot to enter the email address to send to span haserror = true else if emailreg test emailtoval $ emailto after span class= error enter a valid email address to send to span haserror = true return false remember the email address to send to input has an id of emailto what that code is saying is get the value of the email to address input if it is empty add an error message after the input if it has an invalid email address add an error message after the input now we just need to repeat the error checking for the other form fields $ document ready function $ submit click function $ error hide var haserror = false var emailreg = w w w 2 4 $ var emailtoval = $ emailto val if emailtoval == $ emailto after span class= error you forgot to enter the email address to send to span haserror = true else if emailreg test emailtoval $ emailto after span class= error enter a valid email address to send to span haserror = true var emailfromval = $ emailfrom val if emailfromval == $ emailfrom after span class= error you forgot to enter the email address to send from span haserror = true else if emailreg test emailfromval $ emailfrom after span class= error enter a valid email address to send from span haserror = true var subjectval = $ subject val if subjectval == $ subject after span class= error you forgot to enter the subject span haserror = true var messageval = $ message val if messageval == $ message after span class= error you forgot to enter the message span haserror = true return false ok error checking is done if there are no errors we need to send the email via an ajax request im not going to include the whole script here just because its getting long but you can see the whole script so there are no errors lets remove the button from the form and add in a loading graphic if haserror == false $ this hide $ sendemail li buttons append img src= images template loading gif alt= loading id= loading submit the post request ok now lets send the values via an ajax post request to our send email script that just sends the email once the request is completed lets hide the form and display a success message $ post play jqueryajaxform sendemail php emailto emailtoval emailfrom emailfromval subject subjectval message messageval function data $ sendemail slideup normal function $ sendemail before h1success h1pyour email was sent 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 jquery documentation so go ahead send yourself some emails to see for yourself update i was asked in the comments if i could include the php script so as requested here are the files that are used index php verify php sendemail php thanks php 