Event Handling, Bindings and DOM Manipulation using JavaScript

Post Updated On: Nov. 4, 2024

Above is the User Interface of how your application shall look a like. Make a web page using HTML, CSS and JavaScript (you can also use JQuery library for DOM manipulation). 

When user fill the form and click the 'add' button, entered record shall be added inside the table on left of the page. 'Action' column of the table shall contain "Update" and "Remove" links. "Update" shall load the corresponding populate record of that row inside the form, to be updated. When user change/edit the form values and press 'update' button, it shall update the corresponding row in the table. 

Initially, when the page is loaded, the table shall be empty and "Update" button shall be disabled. When user click the "Update" link in 'Action' column, form's "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. No need to reload the page during these options.