Still you would need a JavaScript event listener on the dropdown to observe when its value changes and enable the button.
The principle would be the same: observing when the input (a <select> tag in this case) changes, check if the value is blank, and toggle the “disabled” attribute of the button.
Some example HTML/JS:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable/Disable Example - select</title>
<style>
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
padding: .2em 1.4em .2em .8em;
border: 1px solid #aaa;
border-radius: .5em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url.
You can also swap in a different svg icon or an external image reference
*/
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
select:required:invalid {
color: gray;
}
option[value=""][disabled] {
display: none;
}
option {
color: black;
}
</style>
</head>
<body>
<form action="http://www.example.com/" method="">
<p>
Select:
<select id="select-field" size="1" required>
<option value="" selected disabled>Please choose...</option>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</p>
<p>
<input type="submit" value="Search" disabled>
<input type="reset" value="Reset">
</p>
</form>
<script>
// IIFE
(function () {
function isInputEmpty(input) {
return input.value.trim() === ""
}
function initialize(_event) {
let form = document.querySelector('form')
let submit = document.querySelector('input[type="submit"]')
let selectField = document.getElementById('select-field')
const syncSubmit = function (_event) {
submit.disabled = isInputEmpty(selectField)
}
const resetListener = function(_event) {
// run after reset event is complete
setTimeout(syncSubmit, 0)
}
syncSubmit()
selectField.addEventListener('change', syncSubmit)
form.addEventListener('reset', resetListener)
}
if (document.readyState === 'loading') {
// Loading hasn't finished yet - initialize when ready
document.addEventListener('DOMContentLoaded', initialize, {once: true})
} else {
// 'DOMContentLoaded' has already fired
initialize(null);
}
}())
</script>
</body>
</html>
Plain HTML may already do enough for you
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable/Disable Example Plain-HTML</title>
</style>
</head>
<body>
<form action="http://www.example.com/" method="">
<label for="text-field">Label:</label>
<input type="text" name="sometext" id="text-field" required>
<input type="submit" value="Search">
<input type="reset" value="Reset">
</form>
</body>
</html>
By marking the input as required a Please fill out this field tooltip will appear on the empty field when the submit button is clicked (and form submission is stopped).
With CSS you can fake disabling the submit button to some degree:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enable/Disable Example CSS-based</title>
<style>
input:required:invalid ~ input[type="submit"] {
pointer-events: none;
opacity: .5;
}
</style>
</head>
<body>
<form action="http://www.example.com/" method="">
<label for="text-field">Label:</label>
<input type="text" name="sometext" id="text-field" required>
<input type="submit" value="Search">
<input type="reset" value="Reset">
</form>
</body>
</html>
… though the markup / styling can be a bit challenging and fragile.
Here is the simplest way to achieve it with AlpineJS and Surface, though you can use standard Phoenix eex.
defmodule Components.MyButton do
use Surface.Component
property active, :boolean, default: true
def render(assigns) do
~H"""
<span x-data="{ disable: {{not @active}} }">
<button
x-bind:disabled="disable"
phx-disable-with="Saving...">
{{ @inner_content.([]) }}
</button>
</span>
"""
end
This may work
<button type="button" class="inline-flex justify-center"
phx-click = "open_delete_modal"
phx-value-provider_name = <%= provider.name %>
phx-value-provider_id = <%= provider.id %>
<%= if @user.provider.id == provider.id do %>
disabled
<% end %>
>
<i class="fas fa-trash"></i>Delete
</button>
You can do what you are requesting with Phoenix LiveView, as follows:
phx-change event. In this example, the validation simply updates the current value of the input into the socket.assignsdisabled parameter from the HTML input elementleex file like the disable until non-blank example, to examine a socket.assigns parameter value or you can call a function that performs more complex input validationIn your LiveView leex file, as an example, pushing the current value of the input into socket.assigns.reply allows for checking for a non-blank input
<form class="query__form" phx-submit="submit_reply" phx-change="validate_reply">
<div class="input-group">
<label class="query__replylabel" for="reply">
Hey <%= @handle %>, post your reply!
</label>
</div>
<div class="post_send">
<input id="reply" class="reply_input" type="text" name="reply" maxlength="90" />
<button class="post_send_button" type="submit" name="submit" <%= if @reply == "" do %>disabled="disabled"<% end %>>Submit</button>
</div>
</form>
To use a function to validate the input value, you can call the function like:
<button class="post_send_button" type = "submit" name = "submit" value = "this_submit" <%= if me_disabled?(@socket_param1, @socket_param2) do %>disabled="disabled"<% end %>>Submit</button>
Then, add the associated function in your supporting view module, to return a true/false value:
def me_disabled?(my_server, me) do
client = MyServer.get_client_by_id(my_server, me)
# IO.puts "MyServerView me_disabled? client: #{inspect client}"
result =
if client !== nil do
if client.muted == true && client.id == me do
true
else
false
end
else
false
end
result
end
Yes, you can do this by simply putting disabled: true macro in the submit tag of the template.
<%= submit “Send Promo”, disabled: @disabled %>
In live views, follow these steps to achieve the results:
Consider example below:
Module:
defmodule PentoWeb.PromoLive do
use PentoWeb, :live_view
alias Pento.Promo
alias Pento.Promo.Recipient
def mount(_params, _session, socket) do
{:ok,
socket
|> assign_recipient()
|> assign_changeset()
|> assign(disabled: true)}
end
def handle_event(
"validate",
%{"recipient" => recipient_params},
%{assigns: %{recipient: recipient}} = socket
) do
changeset =
recipient
|> Promo.change_recipient(recipient_params)
|> Map.put(:action, :validate)
{:noreply,
socket
|> assign(:changeset, changeset)
|> assign(disabled: !changeset.valid?)}
end
def handle_event(
"send",
%{"recipient" => recipient_params},
socket
) do
# Call email service and email code
case Promo.send_promo(recipient_params) do
{:ok, _} ->
{:noreply,
socket
|> put_flash(:info, "Promo sent successfully")
|> push_redirect(to: socket.assigns.return_to)}
else
{:noreply,
socket
|> put_flash(:error, "Error sending promo")}
end
end
def assign_recipient(socket) do
socket
|> assign(:recipient, %Recipient{})
end
def assign_changeset(%{assigns: %{recipient: recipient}} = socket) do
socket
|> assign(:changeset, Promo.change_recipient(recipient))
end
end
and template:
<%= f = form_for @changeset, "#",
id: "promo-form",
phx_change: "validate",
phx_submit: "send" %>
<%= label f, :first_name %>
<%= text_input f, :first_name %>
<%= error_tag f, :first_name %>
<%= label f, :email %>
<%= text_input f, :email%>
<%= error_tag f, :email %>
<%= submit "Send Promo", phx_disable_with: "Sending promo...", disabled: @disabled %>
</form>
Stumbled upon this question via Google, sorry for bumping an old thread, but for disabling phx-click events, this actually works for ~L templates:
phx-click="<%= if item.price <= @user.money do %>buy_item<% end %>"
Maybe not the prettiest, but simple and seems to work.
It seems that you can use directly assign the HTML.disabled tag and with a boolean coming from the assigns in a render(). The following worked without JS.
<button phx-click="stop" disabled={!@run}>Stop</button>
<button phx-click="start" disabled={@run}>Start</button>
In fact, with any boolean value, it does not need to be in the assigns, and could be a function 
Hi @sajid
I was reading your “send” event handler as I’m going through the Phoenix LiveView book too, and note it’s not the right way to use “case”:
def handle_event(
"save",
%{"recipient" => recipient_params},
socket
) do
# Call email service and email code
case Promo.send_promo(recipient_params, socket) do
{:ok, _} ->
{:noreply,
socket
|> put_flash(:info, "Promo code sent successfully!")
|> assign(:recipient, %Recipient{})}
{_, _} ->
{:noreply,
socket
|> put_flash(:error, "Error sending promo code!")}
end
end
This works, but I’m not sure how to wipe the input fields of the Promo Sending code form (first_name and email)
Thanks,
Gavin.