All Buttons in an EditForm behave like a submit button

[Frangoudes Panikos]

<EditForm EditContext="_editContext" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">

                   

      <SfButton Type="submit" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="Submit" Disabled="@(!InEdit)"></SfButton>

      <SfButton               CssClass="e-flat" IsToggle="false " IsPrimary="false" Content="Cancel" OnClick="@CLoseDialog"></SfButton>

</EditForm

All Buttons in an EditForm behaves like a submit button.

For example having the above 2 SfButtons in an EditForm, if the Cancel button is clicked then the form will proceed with OnValidSubmit, therefore when cancelling the form executes the submit validation.

Is there any way that the button (Cancel) will follow only the OnClick event  without submitting the form ?

Please advice

Thank you in advance

Panikos  Frangoudes

[Handi]

Hi Panikos,

You have to add HtmlAttribute in your SfButton. Submit Button should have type=submit and the others using type=button.

Just like this :

<div class="row d-flex justify-content-end">

    <SfButton Content="Save"

              @onclick="@onclick_simpan"

              HtmlAttributes="@saveAttr"

              IconCss="e-icons e-simpan-icon" />

    <SfButton Content="Cancel"

              @onclick="@onclick_cancel"

              HtmlAttributes="@cancelAttr"

              IconCss="e-icons e-kembali-icon" />

</div>

@code {

    private Dictionary<string, object> saveAttr = new Dictionary<string, object>()

   {

        {"title","Save Data" },

        {"type","submit" }

    };

    private Dictionary<string, object> cancelAttr = new Dictionary<string, object>()

   {

        {"title","cancel" },

        {"type","button" }

    };

}

I hope this help.

Regards,

Handi Rusli

[Saranya Dhayalan]

Hi Frangoudes, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported issue , you can resolve this issue by setting the cancel button type as “button”. Please check the above code snippet: 

 

<SfButton Type="submit" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="Submit" Disabled="true"></SfButton> 

    <SfButton Type="button" CssClass="e-flat" IsToggle="false " IsPrimary="false" Content="Cancel" OnClick="@CLoseDialog"></SfButton> 

  

Please check the above code snippet and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D 

[Frangoudes Panikos]

Good day Saranya,

Thank you very much for your prompt reply.

It works like a charm !!!

Best regards

Panikos Frangoudes

[Saranya Dhayalan]

Hi Frangoudes, 

 

Most welcome… 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

  

Regards, 

Saranya D 

[George Gambill II]

Am I the only one that thinks the default behavior should be to not submit unless the button specifically calls that out?

[Mohan Kumar Ramasamy]

Hi George, 

 

We would like to let you know that submit is the default action for button component when it is inside the form. This default action can be changed by specifying 'type' property. 

 

Regards, 

Mohankumar R 

[Mike Chafin]

I agree. It should be type="button" as the default.

[Mike Chafin]

There does not appear to be a property of Type.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#properties

[Mohan Kumar Ramasamy]

Hi Mike, 

 

We have checked your reported query. We would like to let you know that submit is the default action for button component when it is inside the form. This default action can be changed by specifying 'type' property.  For example, Add button Type as button and Submit button as default Type as submit. Please refer the below highlighted code snippets. 

 

 

@using Syncfusion.Blazor.Buttons 

<form> 

<SfButton Content="Add" HtmlAttributes="htmlAttr"></SfButton> 

<SfButton Content="Edit" HtmlAttributes="htmlAttr"></SfButton> 

<SfButton Content="Delete" HtmlAttributes="htmlAttr"></SfButton> 

    <br /><br /> 

<SfButton Content="Submit" ></SfButton> 

    </form> 

 

@code { 

 

    private Dictionary<string, object> htmlAttr = new Dictionary<string, object>() 

    { 

        { "type", "button" } 

    }; 

} 

 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/154565/ze/ButtonType-1966522373  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Mohan Kumar Ramasamy]

Hi Mike, 

 

We can achieve your requirement using Type property, you can set Type as “button”. Please refer below code snippets. 

 

 

@using Syncfusion.Blazor.Buttons 

<form> 

    <SfButton Content="Add" Type="button"></SfButton> 

    <SfButton Content="Edit" Type="button"></SfButton> 

    <SfButton Content="Delete" Type="button"></SfButton> 

    <br /><br /> 

    <SfButton Content="Submit"></SfButton> 

</form> 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Szoke]

Dear Support ,

does it seem that the SfButton component does not currently have a Type property? Is using Dictionary the only solution?

[YuvanShankar Arunagiri]

Hi Szoke,

Query: does it seem that the SfButton component does not currently have a Type property?

We have checked your reported query and button does not have Type property (both old and new version). If we set Type property to button like below, then we consider it has HTML Attributes and set to button component.

<SfButton Content="Add" Type="button"></SfButton> 

Query: Is using Dictionary the only solution?

We can use both solution (directly set Type property like above and using dictionary).

Please get back to us, if you need any further assistance on this.

Regards, 

YuvanShankar A