Working with Combo/Dropdown box

Phoenix Forum Questions / Help
,
1

I have a combo box, when user makes a selection, I want to use the selected value for further processing. The following is what I did but it doesn’t work.

phx-click event is suppose to store the selected value in the socket.
phx-change is expected to use the value in the socket if a new selection is made on the combo box.

Here’s where I am having issues. If I make a selection on the combo box, it would fire phx-change event before the phx-click event. ie, it gets before I can set the value. Hence, phx-change would not get any value as phx-click which is suppose to set the value runs after phx-change. How do I make this work?

<form phx-change="get-selection" phx-value-selection=  {@selected}>
  <label>
    Make Selection
  </label>
  
  <select phx-click="set-selection">
    <option value="Foo">Foo</option>
    <option value="Fighter">Fighter</option>
  </select>                        
</form>

def handle_event("set-selection", params, socket) do
 socket =  assign(socket, :selected, params["value"])
 {:noreply socket}
end

def handle_event("get-selection", _params, socket) do
 IO.inspect socket.assigns.selected, label: "Check value"

 {:noreply, socket}
end
2

I dont think you should have any click events attached to the select field. You should be able to get the value from params in:

handle_event("get-selection", _params, socket)
3

Thanks. I tried this earlier and all I got was

%{“_target” => [“undefined”]}

4

ok I got it working. I need to give give the element a name. Thank you for helping.

  <select phx-click="set-selection" name="selection">
    <option value="Foo">Foo</option>
    <option value="Fighter">Fighter</option>
  </select>
1 Like