Hi,

Basically I’m coding an order system. There’re Products, Customer, Order and OrderItems tables.

My Order form is like attached capture.

Order Form928×660 15.3 KB

Here’s my codes:
lib/myapp_web/live/admin/form_component.html.leex

<h2><%= @title %></h2>

<%= f = form_for @changeset, "#",
  id: "order-request-form",
  phx_target: @myself,
  phx_submit: "save" %>

  <%= label f, :customer_id %>
  <%= text_input f, :customer_id %>
  <%= error_tag f, :customer_id %>

  <%= label f, :order_id %>
  <%= text_input f, :order_id %>
  <%= error_tag f, :order_id %>

  <h2>Order Items</h2>
  <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Count</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="products">
  <tr>
    <td>
      <%= select f, :product_id, Enum.map(@products, &{&1.name, &1.id })%>
    </td>
    <td>
      <%= select f, :count, 1..50 %>
      <%= error_tag f, :count %>
    </td>
    <td>
      <button type="button" phx-click="add">+</button>
    </td>
  </tr>
  </tbody>
</table>

<h2>Cart</h2>
  <table id="cart" phx-update="append">
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Count</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <%= for item <- @cart_items do %>
      <tr id="item-<%= item.id %>">
        <td><%= item.name %></td>
        <td><%= item.price %></td>
        <td></td>
        <td>
          <button type="button" phx-click="remove">-</button>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= submit "Save", phx_disable_with: "Saving..." %>

</form>

lib/myapp_web/live/admin/index.ex

defmodule MyAppWeb.AdminLive.Index do
  use MyAppWeb, :live_view

  alias MyApp.{ Products, Orders }

  @impl true
  def mount(_params, _session, socket) do
    socket = socket |> assign(:pending_orders, load_pending_orders())
    {:ok, socket, temporary_assigns: [cart_items: []]}
  end

  @impl true
  def handle_params(params, _url, socket) do
    IO.inspect(params)
    IO.inspect(socket.assigns)
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

  @impl true
   def handle_event("add", params, socket) do
      IO.puts("+++++++++++++++++ADDING+++++++++++++++++++")
      IO.inspect(params)
      IO.inspect(socket.assigns.cart_items)
      IO.puts("+++++++++++++++++ADDED+++++++++++++++++++")
      cart_items = socket.assigns.cart_items
      socket = assign(socket, :cart_items, cart_items)
		{:noreply, socket}
  end

  @impl true
  def handle_event("remove", params, socket) do
    IO.puts("+++++++++++++++++REMOVING+++++++++++++++++++")
    IO.inspect(params)
    IO.inspect(socket.assigns.cart_items)
    IO.puts("+++++++++++++++++REMOVED+++++++++++++++++++")
    cart_items = socket.assigns.cart_items
    socket = assign(socket, :cart_items, cart_items)
		{:noreply, socket}
   end

  defp apply_action(socket, :new, _params) do
    socket
    |> assign(:page_title, "New Order")
    |> assign(:order_request, nil)
    |> assign(:products, load_avaliable_products())
    |> assign(:cart_items, [%Products.Product{}])
  end

  defp apply_action(socket, :index, _params) do
    socket
    |> assign(:page_title, "Admin")
    |> assign(:pending_orders, load_pending_orders())
  end

  defp load_pending_orders do
     Orders.list_pending_orders()
  end

  defp load_avaliable_products do
	Products.list_avaliable_products()
  end

end

What I need is, getting selected values of ordered products when click the “+” button on server side.

How can I achieve this?

Thank you!