Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Button in EditForm Not Reacting to Changes - Onchange/oninput

$
0
0

I am working on a Blazor project where I have a form inside a pop-up modal to edit a game in my database. I want the submit button to dynamically enable or disable based on user input changes. However, the button does not react to the changes as expected. Below are the relevant snippets:

EditForm of my Popup Modal:

<div id="myModal2" class="modal" style="display:@(showModal2 ? "center" : "none")"><div class="modal-content"><span class="close" @onclick="HideModal2">&times;</span><p class="newGameHeader">עריכתהמשחק</p><EditForm Model="gameToEdit" OnValidSubmit="EditGame" id="EditGameForm"><DataAnnotationsValidator /><p>שםהמשחק</p><InputText class="textInForm" @bind-Value="gameToEdit.GameName" @oninput="CheckForChanges" /><ValidationMessage For="@(() => gameToEdit.GameName)" /><div><p>זמןלשאלה</p><InputRadioGroup @bind-Value="gameToEdit.questionTime" class="radio-group" @onchange="CheckForChanges"><div style="display:inline-block"><InputRadio Value="20" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "20" } })" /></div><div style="display:inline-block"><InputRadio Value="30" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "30" } })"  /></div><div style="display:inline-block"><InputRadio Value="60" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "60" } })"  /></div><div style="display:inline-block"><InputRadio Value="90" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "90" } })"  /></div><div style="display:inline-block;"><InputRadio Value="@int.MaxValue" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "ללאהגבלה" } })" id="lastButton" /></div></InputRadioGroup><ValidationMessage For="@(() => gameToEdit.questionTime)" /></div><input type="button" value="ביטול" class="buttons" id="cancelButton2" @onclick="HideModal2" /><input type="submit" disabled="@isSubmitButtonDisabled" value="עדכוןמשחק" class="buttons" id="orangeButtonCreate2" /></EditForm></div></div>

Code handling the onchange method:

private void CheckForChanges()    {        var originalGame = MyGamesList.FirstOrDefault(g => g.ID == gameToEdit.ID);        if (originalGame != null)        {            if (gameToEdit.GameName == originalGame.GameName && gameToEdit.questionTime == originalGame.questionTime)            {                isSubmitButtonDisabled = true; // Disable the submit button            }            else            {                isSubmitButtonDisabled = false; // Enable the submit button            }            Console.WriteLine(originalGame.GameName + gameToEdit.GameName);            Console.WriteLine("the button is " + isSubmitButtonDisabled);        }    }

DTO:

using System;using System.Collections.Generic;using System.ComponentModel;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Runtime.CompilerServices;using System.Text;using System.Threading.Tasks;namespace template.Shared.Models.Classes{    public class EditGameDTO    {        public int ID { get; set; }        [Required(ErrorMessage = "שדהחובה")]        [MinLength(2, ErrorMessage = "ישלהזיןלפחותשניתווים")]        [MaxLength(30, ErrorMessage = "שםהמשחקחייבלהכילמקסימום 30 תווים.")]        public string GameName { get; set; }        [Required(ErrorMessage = "שדהחובה")]        public int questionTime { get; set; }    }}

I tried using the code as mentioned above.What happened is when I first type inside the InputText nothing happens. The second time I type - the button is changing.

When I delete the added Chars and the value goes back to being the same as it initiated with, the button is not going back to disabled.

What I'm trying to achieve is the dynamic change of the Button, so when ever another name shows up a user can press it, and when it stays the same / goes back to the first value it first initiated with, it will be back to disabled as changes are only available with different Values. ***This should also be implied to the RadioInputGroup values.

Any help would be greatly appreciated.


Viewing all articles
Browse latest Browse all 4839

Trending Articles