rennz555

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.

21 comments

/phoenix #learning-elixir

0 9948 21

2023-02-17 07:17:55 UTC

First Post!

NobbZ

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.

Post #1

Most Liked

lucaong

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.

Post #8

lucaong

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.

Post #4

peerreynders

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.

Post #12

Last Post!

kihikasamuel

You can have a in your changesets the text field as required.
Then on the button you want to disable check if the changeset is valid like this
<button type="" disabled={!@changeset.valid?}>Your Button</button>

Post #21