Build an HTML form with jQuery/AJAX and JSON responses

I am building a webapp for dog kennels/day cares. I need a complex reservation form made. The form should use Bootstrap 3.0, jQuery 1.10.2, [url removed, login to view] 1.0, jquery ui date/time picker. The code is currently on the PHP CodeIgniter framework, although I will provide all of the PHP objects to the view for populating the menus.

The form has the following fields

1.) Location - <select> menu with [url removed, login to view], I have the PHP object for population (loads on page load)

2.) Owner - <select> menu with [url removed, login to view], I have the PHP object for population (loads on page load)

3.) Pet - <select multiple> menu with [url removed, login to view], this field is dependent on the "owner" field and <option> will need to be populated with AJAX (I provide JSON object and URL)

4.) Type - <select> menu with [url removed, login to view], I have the PHP object for population (loads on page load)

5.) Start Date / Time - uses jQuery UI date/timepicker

6.) End Date / Time - uses jQuery UI date/timepicker

7.) Notes - <textarea> with bootstrap-wysihtml5 (wysiwyg editor available on Github)

8.) Services - <select multiple> menu with chosen.js. I have the PHP object for population (loads on page load)

Selecting a value for #3 (Pet) field will populate a hidden div that can be shown by clicking on a button that will show details about the selected pet (I will provide a JSON object and URL).

There should be a button next to Owner to show a modal window to create a new owner (I provide the form and handle the submission and will respond with a JSON object of the newly created owner). After creating a new owner, the created record will be selected programatically. A new pet button should appear. After clicking this button show a modal window to create a new pet (I provide the form and handle the submission and will respond with a JSON object of the newly created pet). This new record should be automatically selected.

There should be 2 types of submit buttons, "Save and Add Another" and "Save and Go Back To List". Both of these forms will be submitted by AJAX (I provide the URL to POST to and will respond with a JSON object that will contain a success message or validation errors). If "Save and Add Another" is selected, the form will clear and allow for a new submission. If "Save and Go Back to List" is selected, it will save and on success redirect to another URL (I will provide).

Start Date and End Date should pre-populate on page load, and after each AJAX submission (I will provide the dates).

After selecting a start date, use AJAX to ask the server if it falls within a deposit required date range. I will provide the URL and a JSON response. If this request returns "true", then add fields to the form asking for Credit Card Number, Exp. Date (month and year), CVV2, and amount (amount should populate from the JSON response).

AJAX HTML HTML5 jQuery / Prototype PHP

Nº del proyecto: #5745994

Sobre el proyecto