Task 11 - JavaScript, Event Handling, Bindings and DOM

Post Updated On: June 8, 2021

Above is the User Interface of how your application shall look alike. Make a web page using HTML, CSS and JavaScript/JQuery. When user fill the form and click 'add' button, the record shall be added in the table on the left side of page. 'Action' column shall contain Update and Remove links, "Update" shall load the record in the form on right. When user update the values and press 'update' button, it shall update the corresponding row in the table on left. Initially, when the page is loaded, the table shall be empty and "Update" button shall be disabled. When user click the "Update" link shown under 'Action' column, "add" button shall be disabled. The "reset" button shall reinitialize the form at the same state when the page was loaded to add new records, so it shall make the add button enabled. The page shall not reload during these operations, so it shall be a single page app.

You would find this article useful. Its not mandatory to follow any specific approach, you can do, as you like.


Once you are done with above described functionality, update the task by adding additional feature to practice AJAx. Before the above table, add a checkbox "Sync with Database". If the checkbox is selected by user, the add, update and remove operations performed shall be replicated in database too by AJAX (create required table and database). Keep your database and html table synchronized. When page is opened, initialize the table with records stored in database.

Feel free to use JQuery library for AJAX and DOM manipulation.