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; } } }