[Fixed]-Django form add new rows upon changing to edit

Let’s dive right into listing out what you want to do and the requirements you’ll need to do so.

1. You basically want to toggle hiding and showing some functionality for this web page. This is easily accomplished by including the “Edit” button, “Add New Record” button, and popup (most likely in its own <div> somewhere in the page). So the “Edit” button will have the display set to something, be it inline, block, etc., while the “Add New Record” and popup would have a display of “none” or however it is you wish to hide it.

2. You’ve got the stuff set up and ready to go but now you need to show it when you click the “Edit” button. This is generally accomplished through Javascript. Just find the “Add New Record” button and switch the visibility.

3. When you click on the “Add” button you want to display a popup. This can be done in a variety of ways with different libraries. One of my personal favorites is using jquery’s blockUI. Why? It doesn’t allow the user to click anywhere except in the popup so it’s a quick way to handle users trying to reach outside the scope of the popup.

4. So you’ve got all the new rows added and you are done editing. Maybe you have a “Save” button or something like that where you can click. When you do, you’ll want to push all those new rows you just added to the database. Django handles this well and you could do something like include the new rows in part of the POST request or however you care to implement this solution.

So there’s a bit of work ahead of you to get this page up and running with the exact functionality you need but hopefully this starts steering you in the right direction of where you need to go.