Category: Demo: an Ajax-powered contact form

In this lesson we put your knowledge into action by developing a simple but fully functional Ajax contact form. While developing the demo, we touched on a lot of topics covered in this app. We used the selectors, including the context parameter, which you learned in lesson 2. Methods like parent(), next(), and find(), introduced in lesson 3, were used to refine…

JavaScript is a powerful and ubiquitous language that allows you to perform an incredible number of tasks. As you’ve seen in this app, jQuery enables you to take your code to the next level, doing a lot with few lines of code. When developing for the web, however, you have to keep in mind that…

Effects and animations are never an indispensable part of any application, in the sense that with or without them people should still be able to perform the task they want. Under some circumstances, though, they can be useful for improving the experience of your users. In this project you can allow error messages and the…

The ability to provide a quick feedback to your users is a nice feature. Nonetheless, you want to instruct your form to know what to do in case the user clicks the Submit button. To build this feature, you need to attach a handler to the submit event triggered by the form. Your handler’s aim is to…

Your form is in place and you have a PHP page able to process the incoming requests. In an old-fashioned, synchronous world this would be enough. The user fills the form and clicks the Submit button to send the data to the server; the latter uses a server-side language to process the data, validate them,…

The backend of your project has two main responsibilities: validating the user’s input and sending the email. The former is the most interesting one for your purposes because, based on the specifications of your project, you have to deal with two different cases. The first case is a partial request resulting from the loss of…

In the previous section we discussed the constraints you want to apply to your form’s fields. These constraints can be set using some of the new HTML5 attributes and types. For example, to have an email field that is well formatted and mandatory, you can have the following input in a form: In modern browsers, as soon…

Before delving into the development of your project, we’ll discuss its requirements. The demo needs only two pages: one that contains the form (that we’ll call index.html) and another for the backend business logic (that we’ll name contact.php). You can play with this example by accessing the lesson-11 folder of this app’s sources. To keep things as…

This lesson covers In the previous lesson we covered even more topics that belong to jQuery’s core. In between the discussion of the methods, utility functions, and flags, we showed you a lot of snippets of code, demos, and lab pages. All these examples should have given you more confidence with the arguments treated. In lesson…