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

  • Question

  • User1333174808 posted

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

    Monday, May 25, 2020 7:55 PM

All replies

  • User-474980206 posted

    see this thread:

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

    Monday, May 25, 2020 10:48 PM
  • User2078676645 posted

    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

    Tuesday, May 26, 2020 2:31 AM
  • User-375607281 posted

    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" /> 

    Tuesday, May 26, 2020 2:51 AM