How do I disable a button in Elixir?

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.

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.

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…

Hi @rennz555, no need to be sorry for your questions. It’s awesome that you’re moving your steps into Elixir 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.

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.