App to add multiple line items to an order

  • Goal: I am trying to build an app where users can create and submit orders. My backend database structure is similar to the one described here. I have an orders table, with one row per order, and an order_items table, with one row per item in the order. I also have a products table with all possible products that could be ordered, and a customers table with one row per customer.

I would like a user of my app to be able to submit an "order" form, with an order name (free text input) and a customer_id (dropdown based on existing customers in the customer table) and a list of order items (products and quantities). When the user submits the form, I would like to add a row to the orders table and several rows to the order_items table, depending on how many items are in the order.

I know how to create a basic form with a text input field for the order name and a dropdown for the customer.

I also have all of my tables created in postgres, with appropriate foreign key relationships.

What I don't know how to do is create an arbitrarily long list of order items in my form, each with a product (selected from a dropdown list of products) and a quantity (numeric input).

I am envisioning two buttons:

  1. an "add item" button that would add another two input boxes to my form (one with the product dropdown and a second with the quantity input). This button would not write any data to postgres.
  2. a "submit" button, which would both insert one row into my orders table with the order name and customer_id and insert several rows into my order_items table (depending on how many items had been added in the form) with the product_id, quantity, and order_id. I wouldn't know what order_id to populate in the order_items table until the new row had been created in the orders table, since the order_id would need to be the newly created serially incrementing integer primary key for the orders table.
  • Attempts: I tried to use list views and repeatables, but was only able to list or repeat data that already existed in my database, not queue up multiple order_items to insert.

Can anyone recommend an approach?

Thanks in advance!