LiveVIew's phx_change event is bound to the form validation, causing the setting of input value to become invalid. Checkbox can only select one item

Phoenix Forum Chat / Discussions
,
1

LiveVIew’s phx_change event is bound to the form validation, causing the setting of input value to become invalid. Checkbox can only select one item

<%= f = form_for @changeset, "#",
  id: "invite-form—drm-form",
  phx_change: "validate",
  phx_submit: "save" %>

<div style="margin-left:5%">
        <%= label f, :'Subnet id:'  %>
          <%= for role <- @cluster[:subnet_data] do %>
            <div>
              <input name="recipient[test]" type="checkbox"  >
              <%= role %>
            </div>
          <% end %>
      </div>

def handle_event(
      "validate",
      %{"recipient" => recipient_params},
      %{assigns: %{recipient: recipient}} = socket
    ) do
      IO.inspect("validate")
      template = if(Map.get(recipient_params, "pipeline_template") == "live-drm", do: true, else: false )
      pipeline_template = if(Map.get(recipient_params, "pipeline_template") == "live-drm-pp", do: true, else: false )
    changeset =
      recipient
      |> Invite.change_invitation(recipient_params)
      |> Map.put(:action, :validate)
  {:noreply,
    socket
    |> assign(:changeset, changeset)
    |> assign(:show_text, template)
    |> assign(:show_task, pipeline_template)
    |> assign(:update_value, recipient_params)
  }
  end

I want to pass the selected checkbox parameters as an array to the backend. Currently, I cannot select multiple checkboxes because I am bound to PHX_ Change event.

<%= text_input f, :task_name,  placeholder: "" ,value: @value %>

When I input the next input, the default value set is always restored

2

All of your checkboxes have the same name attribute, so the browser is only going to send the value of the last checked checkbox input (as ordered in the DOM). Note: it’s the browsers that create this behavior, it’s not unique to Phoenix. You will need to set unique name attributes in order for your browser to send each checked input. inputs_for from Phoenix.HTML.Form or inputs_for from Phoenix.Component can help with creating unique input name values, or if you want to build the HTML yourself:

<%= for {role, index} <- Enum.with_index(@cluster[:subnet_data]) do %>
  <div>
    <input name={"recipient[#{index}][test]"} type="checkbox"  >
    <%= role %>
  </div>
<% end %>

Another thing to keep in mind with checkboxes, only checked inputs are sent as part of form submissions. If you want to explicitly include data that signifies that the inputs were unchecked, you will want to have a type="hidden" input with the same name above each checkbox input. Phoenix has a checkbox/3 helper for this, as should your application’s CoreComponents module.