CODEWITHSUNDEEP
blazorblazor-webassembly
Patrick
Patrick

Reputation: 445

Why does Blazor call OnValidSubmit without pressing a button with type submit?

I have an edit form and everytime I click a button even though it is not of type submit, Blazor calls OnValidSubmit but I don't know why. Below there is a simplified excerpt of my code (split in two blocks for better syntax highlighting in Stackoverflow, in reality it is one file):

@page "/BaseConfiguration"
@using TeslaSolarCharger.Shared.Dtos.BaseConfiguration
@inject HttpClient HttpClient

@if (_dtoBaseConfiguration == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <EditForm Model="@_dtoBaseConfiguration" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        @*Next line is the button I am talking about*@
        <p><button class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button></p>

        <button type="submit" class="btn btn-primary">Submit</button>
    </EditForm>
}

@code {
    private DtoBaseConfiguration? _dtoBaseConfiguration;

    protected override async Task OnInitializedAsync()
    {
        _dtoBaseConfiguration = await HttpClient.GetFromJsonAsync<DtoBaseConfiguration>("/api/BaseConfiguration/GetBaseConfiguration");
    }

    private void AddNewGridHeader()
    {
    }

    private async Task HandleValidSubmit()
    {
        await HttpClient.PutAsJsonAsync($"api/BaseConfiguration/UpdateBaseConfiguration", _dtoBaseConfiguration);
    }
}

When I press the button Add new header The HandleValidSubmit method is called and my Blazor app sends the put request. Why is that the case? How can I avoid that issue?

Upvotes: 0

Views: 1030

Answers (1)

fuzzybear
fuzzybear

Reputation: 2405

Change

<button class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button>

to type "button"

<button type="button" class="btn btn-success" @onclick="AddNewGridHeader">Add new header</button>

If you don't specify the button type, it defaults to submit.

  • submit — Submits the current form data. (This is default.)
  • reset — Resets data in the current form.
  • button — Just a button. Its effects must be controlled by something else

submit - Default reset - used to reset forms button - events must be handled manually

Upvotes: 6

Related Questions