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.
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.
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:
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
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.
In the InputExample component, you can change this in a few places.
Then, you need to insert this code in _Host.cshtml.
Regards,
Evern
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
to
<input type="text" @onfocusout="@(e => EnableButton(e))" @bind="myInputText" />