In newly rendered form the submit button is making a call to the controller [LiveView]

Hello All. I am new to Pheonix Framework and I have a problem with the newly rendered form wherin the submit button does not trigger the form submit. Here are the codes:

  1. page_live.html.heex
<div class="relative shadow-md sm:rounded-lg flex-1">
  <header class="px-5 py-4 border-b border-gray-100">
    <h2 class="font-semibold text-gray-800">Destination Table</h2>
  <table id="destination_table" class="w-full text-sm text-left text-gray-500 border-separate border-spacing-0">
    <thead class="text-xs text-gray-700 uppercase bg-gray-100 border">
        <th scope="col" class="p-4 w-4">
          <div class="flex items-center" >
            <input phx-click="checkAll" phx-update="ignore" id="destination_tcheckbox_all" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-0 ">
        <th scope="col" class="flex-[8_8_0%] justify-center px-6 border w-60">
          Warehouse ID
        <th scope="col" class="flex-[8_8_0%] justify-center px-6 border w-60">
          Warehouse Name
        <th scope="col" class="flex-1 border w-20">
          <svg  xmlns="" fill="none" viewBox="0 0 24 24" stroke-width="1.5" height="1.5rem" stroke="black" class="block mx-auto">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
    <tbody id="destination_tbody">
      <%= for warehouse <- @warehouse_id_name do %>
          <%= form_for :warehouse, "#form_#{}", [phx_submit: "update", phx_value_id: "#{}", id: "form_#{}"], fn f -> %>
          <% visibility = if in @visibility, do: {true, false}, else: {false, true} %>
          <tr id={"#{} row"} class="bg-white border"  phx-update="replace">
            <td class="w-4 p-4 border">
              <div class="flex items-center">
                <% checked = if in @toggle_ids, do: [checked: "checked"], else: [] %>
                <input name={"checkbox"} type="checkbox" phx-click="table_data_checkboxes" phx-value-toggle-id={} {checked} class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-0" />
            <th scope='row' class="focus-within:border-2 focus-within:border-gray-300 focus-within:shadow-sm border">
              <div class="flex flex-row items-center">
                <div class="flex-[8_8_0%]">
                  <%= select(f, :warehouse_id, warehouse.warehouse_id , disabled: !, class: "appearance-none disabled:text-gray-900 w-full font-normal leading-loose border-none text-gray-900 text-sm focus:ring-0 focus:outline-none block overflow-hidden bg-none", "phx-click": "select_change", id: "#{} select", "phx-update": "ignore", required: true) %>
            <td class =" border focus-within:border-2 focus-within:border-gray-300 focus-within:shadow-sm">
              <%= text_input(f, :name, disabled: elem(visibility,1) , name: "warehouse_name", class: "bg-white border-none text-gray-900 text-sm  focus:ring-0 block w-full disabled:text-gray-500", placeholder: "Warehouse Name", value: warehouse.warehouse_name, id: "#{} input", required: true) %>
            <td class="border focus-within:border-2 focus-within:border-gray-300 focus-within:shadow-sm">
              <div hidden={elem(visibility,0)}>
                <svg phx-click="pencilClick" phx-value-id={"#{}"} xmlns="" class="block mx-auto hover:drop-shadow-lg hover:border-white hover:border-b-2" height="1.5em" viewBox="0 0 24 24"><path d="M18.308 0l-16.87 16.873-1.436 7.127 7.125-1.437 16.872-16.875-5.691-5.688zm-15.751 21.444l.723-3.585 12.239-12.241 2.861 2.862-12.239 12.241-3.584.723zm17.237-14.378l-2.861-2.862 1.377-1.377 2.861 2.861-1.377 1.378z"/></svg>
              <div hidden={elem(visibility,1)}>
                <div class="flex flex-row">
                  <label class="block mr-1.5 ml-auto">
                    <button type="submit" id={"#{} submit"} ><svg  xmlns="" class=" hover:drop-shadow-lg hover:border-white hover:border-b-2" stroke-width="2" fill="green" height="1.4em" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></button>
                  <svg  phx-click="reset" id={"#{warehouse.primary_key}"} phx-value-id={"#{}"} xmlns="" class="block ml-1.5 mr-auto hover:drop-shadow-lg hover:border-white hover:border-b-2" fill="red" height="1.4em" viewBox="0 0 384 512"> <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
        <% end %>
      <% end %>
<div class="pt-4">
  <button phx-click="addRow" type="button" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-green-600 focus:z-10 focus:ring-4 focus:ring-gray-200 ">Add Row</button>
  <button phx-click="deleteRow" type="button" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-red-600 focus:z-10 focus:ring-4 focus:ring-gray-200 ">Delete Row</button>
  1. page_live.eex
  def handle_event("update", %{"warehouse_name" => warehouse_name, "id" => id, "warehouse_id" => warehouse_id}, socket) do
    id = String.to_integer(id)
    warehouse_id_name = Warehouse.get_warehouse_id_name!(id)

    with {:ok, %Warehouse.Warehouse_id_name{} = warehouse_id_name} <- Warehouse.update_warehouse_id_name(warehouse_id_name, %{"warehouse_id_name": warehouse_name, "warehouse_id": warehouse_id_name.warehouse_id}) do
      visibility = Enum.reject(socket.assigns.visibility, & &1 == id)
      warehouse_id_names =, fn warehouse -> if == id, do: %{"warehouse_name": warehouse_name} |> Enum.into(warehouse), else: warehouse end)
      {:noreply, assign(socket, %{visibility:  visibility, warehouse_id_name: warehouse_id_names})}
  def handle_event("addRow",  %{"value" => value}, socket) do
    warehouse_id_name = socket.assigns.warehouse_id_name
    if (warehouse_id_name != [] and List.last(warehouse_id_name).new) do
      {:noreply, put_flash(socket, :info, "New Row Already Exists. Fill that first to proceed")}
      warehouse_ids_not_used = [ [key: "Warehouse ID", value: "new", hidden: true, selected: true] | Warehouse.list_warehouse_id_not_used() |> warehouse -> [key: warehouse.name_id, value:] end)]
      warehouse_id_name = warehouse_id_name ++ [%{warehouse_id: warehouse_ids_not_used, warehouse_name: "", id: "new", primary_key: "new", toggle: false, new: true}]
      visibility = [ "new" | socket.assigns.visibility]
      {:noreply, assign(socket, warehouse_id_name: warehouse_id_name, visibility: visibility)}

Hey @keerthan44 welcome! One potential issue here is that a <form> inside a <table> isn’t valid HTML html - Form inside a table - Stack Overflow. This may contribute to odd behavior.