AngularJS_logo.svg-1

AngularJS Booking Form

My latest work involved building an online booking form. On submitting the form, details are then emailed to the client. Sounds simple enough.., however there was a slight twist to it.

Brief:

Users should be able to submit the following criteria with ease:

  • Personal details / more info text field
  • Arrival / Departure Dates (using a datapicker)
  • Number of days / people requiring meals (input x 2)
  • Discount of 10% applied if 10+ days are selected
  • A choice of three meal types available (input)
  • A real-time calculation of the total cost – worked out by the inputs mentioned above (minus any discount applied)

Project details:

Now while the general form requirements aren’t that complicated, the real-time calculation with the possible application of a discount added some spice to the mix.
jQuery could solve this, but after watching a tutorial on Code School, Shaping up with AngularJS by Greg Pollack and seeing what AngularJS could do, I thought I would go ahead and try out my newly acquired skills and use AngularJS.

Much of the content in the course by Code School came in handy, especially the sections on Forms and Services. In particular, using $http.post(... when submitting the form to the backend.

As I learnt more, I realised I could add some gentle user guidance regarding the datepickers. Disabling the second datepicker field until the first one had a value. Then using this value to set a min-date on the second datepicker. Also disabling the submit button until the entire form was completed and adding in some visual colours for validity improved the UX/UI. Both of these were achieve with ng-disabled and ng-valid respectively.

When tackling the meal type selection and calculation I found the following article on Tutorialzine particularly helpful.

Finally the backend was handed by a php script, sending the completed form data to an email address.

Conclusion:

With zero prior knowledge of AngularJS before starting this project, I used Bootstrap, Datepicker (ui.bootstrap.datepicker), AngularJS and of course a great online tutorial from Code School.

The more I learnt about AngularJS the more functionality I could add to my code and with ease too, it just makes sense!

Plunker | Github