spellcheck button inside form element

[Doug Colpitts]

Trying out the spell check control:

If I place the spellcheck button within the <form></form> elements, clicking on it triggers the Submit button - see example below.

How can I place the button ( <ej-button id="CheckButton" width="200px" height="25px" text="Spell check" click="checkErrors" /> ) inside the form elements?

Thanks.

@model Testchecker.ViewModels.CBaseViewModel

<div>
    <ej-spell-check id="SpellCheck" controls-to-validate="textarea"  is-responsive="true">
        <e-dictionary-settings custom-dictionary-url="http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary" dictionary-url="http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords">
        </e-dictionary-settings>

    </ej-spell-check>
</div>

<script type="text/javascript">
    function checkErrors() {
        var spellObj = $("#SpellCheck").data("ejSpellCheck");
        spellObj.showInDialog();
    }
</script>

<h1>Comment Base</h1>
<div class="container">
    <form asp-controller="App" asp-action="Comments" method="post">

        <table class="table table-sm table-bordered">

            <tbody style="font-size: 14px;">
                <tr>
                    <td>
                        <textarea asp-for="C01">@Model.C01</textarea>
                    </td>
                    <td>
                        <textarea asp-for="C02">@Model.C02</textarea>
                    </td>
                    <td>
                        <textarea asp-for="C03">@Model.C03</textarea>
                    </td>
                </tr>
              

            </tbody>
        </table>
        <ej-button id="CheckButton" width="200px" height="25px" text="Spell check" click="checkErrors" />
        <button type="submit" class="btn btn-info">Save Changes</button>
    </form>

          @* outside the form the spell checking works fine*@
         @*<ej-button id="CheckButton" width="200px" height="25px" text="Spell check" click="checkErrors" />
</div>

[Keerthana Rajendran]

Hi Doug,   

                    

Thanks for contacting Syncfusion Support.   

   

You can specify the type as “button” for ejButton so that this will not work as Submit button. Please refer to the below given code.   

   

@model CoreApplication1.Controllers.CBaseViewModel   

   

<div>   

    <ej-spell-check id="SpellCheck" controls-to-validate="textarea" is-responsive="true">   

        <e-dictionary-settings custom-dictionary-url="http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary" dictionary-url="http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords">   

        </e-dictionary-settings>   

    </ej-spell-check>   

</div>   

   

<script type="text/javascript">   

    function checkErrors() {   

        var spellObj = $("#SpellCheck").data("ejSpellCheck");   

        spellObj.showInDialog();   

    }   

</script>   

   

<h1>Comment Base</h1>   

<div class="container">   

    <form asp-controller="App" asp-action="Comments" method="post">   

        <table class="table table-sm table-bordered">   

            <tbody style="font-size: 14px;">   

                <tr>   

                    <td>   

                        <textarea asp-for="C01">@Model.C01</textarea>   

                    </td>   

                    <td>   

                        <textarea asp-for="C02">@Model.C02</textarea>   

                    </td>   

                    <td>   

                        <textarea asp-for="C03">@Model.C03</textarea>   

                    </td>   

                </tr>   

   

            </tbody>   

        </table>   

        <ej-button id="CheckButton" width="200px" height="25px" text="Spell check" type="Button" click="checkErrors" />   

        <button type="submit" class="btn btn-info">Save Changes</button>   

    </form>   

   

   

We have prepared a sample based on your code. Please download the sample from the following link.   

   

http://www.syncfusion.com/downloads/support/forum/136998/ze/SpellCheck32447127   

   

   

UG: http://www.syncfusion.com/downloads/support/forum/136998/ze/SpellCheck32447127   

   

   

Regards,                                                                        

Keerthana.   

 

[Doug Colpitts]

Thank you.  Adding type="Button" resolves it nicely.

[Keerthana Rajendran]

Hi Doug, 

 

Most Welcome. We are glad that your issue has been resolved. Please get back to us if you require any further assistance on this. We will be happy to assist you. 

 

Regards, 

Keerthana.