How can I enable/disable a button based on input text Blazor Server app. RSS

• • Reply
  Greg P

  None

  0 Points

  1 Post

  How can I enable/disable a button based on input text Blazor Server app.

  May 25, 2020 07:55 PM|Greg P|LINK

  I have a simple Blazor Server app and would like to enable a button when there is text in an input, and disable the button if there is no text in the input. I have looked at and tried numerous examples, and have not come up with a working solution yet. This is for a page with a search button, which requires valid text before the search button becomes enabled.

  So, when as a user enters a character in the text input, button is enable. If the user deletes all the text in the input, button is disabled.

  If JavaScript is needed to solve this issue, I can deal with that, but please provide all required steps.

  The code below does not work because the value of myInputText.Length is always zero. 

  Note: if you run the code below in the debugger, the value of myInputText.Length is not always zero, but the the value is always one number behind, ex, first time EnableButton() is executed the value is zero, then one.  

  Any help is greatly appreciated. 

  Here is the simplified code:

  @page "/InputExample"
  
  <h3>Input Example</h3>
  
  <input type="text" @onkeyup="@(e => EnableButton(e))" @bind="myInputText" />
  
  @if (disableState == true)
  {
      <input type="button" value="I'm disabled" disabled="@buttonState">
  }
  else
  {
      <input type="button" value="I'm not disabled">
  }
  
  @code 
  {
      private string buttonState = "disabled";
      private string myInputText = "";
      bool disableState = true;
  
      public void EnableButton(EventArgs args)
      {
          if (myInputText.Length == 0)
          {
              disableState = true;
          }
          else
          {
              disableState = false;
          }
      }
  
  }

• • Reply
  bruce (sqlwo...

  All-Star

  58254 Points

  15681 Posts

  Re: How can I enable/disable a button based on input text Blazor Server app.

  May 25, 2020 10:48 PM|bruce (sqlwork.com)|LINK

  see this thread:

  https://github.com/dotnet/aspnetcore/issues/15635

  bruce (sqlwork.com)
• • Reply
  Evern

  Member

  80 Points

  32 Posts

  Re: How can I enable/disable a button based on input text Blazor Server app.

  May 26, 2020 02:31 AM|Evern|LINK

  Hi,

  You can manipulate this keystroke and input box by using JavaScript to create a new directory file, wwwroot->js->textbox.js, and insert the following code into this js file.

  function inputchange() {
      var value = document.getElementById('myInputText').value;
      console.log(value);
      var btn = document.getElementById('mybtn');
      if (value.length != 0) {
          btn.disabled = false;
          btn.value = 'not disabled'
      } else {
          btn.disabled = true;
          btn.value=' disabled'
      }
      return value;
  }

  In the InputExample component, you can change this in a few places.

  @page "/InputExample"
  @inject IJSRuntime JSRuntime;
  <h3>Input Example</h3>
  
  <input type="text" id="myInputText" @onkeyup="Getinput"/>
  @myInputText.Length||@myInputText
  <input type="button" value="I'm disabled" id="mybtn" disabled>
  
  @code
  {
      private string buttonState = "disabled";
      private string myInputText = "";
      bool disableState = true;
  
      private async Task Getinput()
      {
          var text =
              await JSRuntime.InvokeAsync<string>("inputchange");
          myInputText = text;
      }
  
  }

  Then, you need to insert this code in _Host.cshtml. 

  <script src="~/js/textbox.js"></script>

  Regards,

  Evern

• • Reply
  gechao

  None

  0 Points

  1 Post

  Re: How can I enable/disable a button based on input text Blazor Server app.

  May 26, 2020 02:51 AM|gechao|LINK

  Hi, Greg, you can just change 

  <input type="text" @onkeyup="@(e => EnableButton(e))" @bind="myInputText" />

  to

  <input type="text" @onfocusout="@(e => EnableButton(e))" @bind="myInputText" />