How do I disable a button in Elixir?

Hello,

I’m working on a practice project of mine in Elixir/Phoenix, but wanted to find out how to disable a button in Elixir?

For example, my application requires two text fields before a user can click “submit”. If one or both text fields are empty, then it throws them an error saying they’re missing. But in my case, I wanted to change it up and to not get the user to that point.

I want to “disable” the button if the text field is NOT filled in.
Whenever they choose an option or fill in the field, then would I want to “enable” the button to be clicked.

Please give some advice/tips on how I can go on about this.

As with every other server side framework as well, you’ll have to use JavaScript for that.

The script is probably identical to one you would use for ruby on rails or one for Django…

Well, maybe you could use live view as well, but I think that would overcomplicate things.

So there’s really no way to disable search buttons until input is selected using elixir in the template?

That’s what you can do with live view, but either way, none of the versions work when JS is disabled on the client.

Elixir, like other server side languages, can render the page’s HTML and send it to the browser, but once the page “leaves the server” and gets to the browser, Elixir has no control anymore (one exception to this is LiveView, but I doubt it is the right solution to your problem). Thus, Elixir can render the button as disabled (e.g. by rendering it as <button disabled>...</button>) but it cannot observe the user interaction with the browser to re-enable it when necessary. The language that runs in the browser and can do that is JavaScript. You would set an event listener on the search input, and toggle the “disabled” attribute on the button depending on whether the input value is blank or not.

2 Likes

Can you give an example on how I can do it in live view?

persay,

<%= if text_field == nil do %> 
      <%= submit "Search" %>
<% end %>

Sorry, I’m a beginner in Elixir/Phoenix.

I see. I totally understand now. Thanks for your help.

In this case, I can use JS in an Elixir/Phoenix Project?

I’m a total beginner at using this language and framework so sorry for questions.

1 Like

Sorry, I have not used live view yet.

Yes, the easiest us to just inline it into the page you are rendering, for such a thing probably the easiest solution.

The other way is to put it I to your app.js and let brunch do the packaging stuff…

1 Like

Hi @rennz555, no need to be sorry for your questions. It’s awesome that you’re moving your steps into Elixir :slight_smile: we all asked our fair share of beginner questions

Yes, you can definitely use JavaScript with Elixir and Phoenix. As a matter of fact, any web framework eventually produces HTML, CSS and JavaScript, as those three are the only languages understood by the browser. You can either add JavaScript “inline” in your templates with a <script> tag, or place your JavaScript files in the assets folder and require it in your templates.

3 Likes

If you craft your forms well you can use CSS to require the preceeding inputs or form itself to be in a valid state before it even is visible or something (can swap with another disabled button that is then hidden when the form is valid), all with no JS or live_view or anything. ^.^

Hey lucaong, (this is just a theoretical question.)

So what if it’s not a text area input, but rather a drop down category list? Once a user chooses a category, the button will remain “enabled”, but initially the button is “disabled”. Rather than getting an event listener to keep track of the search input checking whether the input value is blank or not.

Main concern is since having a category drop down menu, it will never go blank again and the only other choice is to choose a category if you want to switch it.

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.

1 Like

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.

2 Likes

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
2 Likes

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:

  • As you type in the input, validate the input by handling a phx-change event. In this example, the validation simply updates the current value of the input into the socket.assigns
  • When the input is validated, the input becomes enabled by removing the disabled parameter from the HTML input element
  • You can either add some logic inside the leex 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 validation

In 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:

  1. Use schemaless changesets to check if inputs in the text fields are valid?
  2. Assign initial state of button in a variable (lets call is disabled: true) in mount function
  3. Use <%= submit “Send Promo”, disabled: @disabled %> while rending html code in your render function or in template
  4. implement a handle_event function for phx_change: event, change the state of disabled: to false if changeset is valid.

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.

1 Like

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 :slight_smile: