Event Handling, Bindings and DOM Manipulation using JavaScript

Post Updated On: March 28, 2023

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 for DOM manipulation). 

When user fill the form and click the 'add' button, entered record shall be added in the table on left side of the page. 'Action' column in left side table shall contain "Update" and "Remove" links. "Update" shall load the corresponding record in the form on right to be updated. When user update the values and press 'update' button of the form, 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.