Button types

Toggle Button is used as normal click able button, submitting form data, resetting the form data to its initial value. According to the usage of button, you can render the Toggle Button in the following three types by using the type property.

Toggle Button Types

Button Type Description
button The button is a click able button
submit The button is a submit button (submits form-data)
reset The button is a reset button (resets the form-data to its initial values)

The following steps explains you the details about rendering the Toggle Button with above mentioned types.

In the HTML page, add the following button elements to configure Toggle Button widget.

  • html
  • <table>
        <tr>
            <td class="btnsht">
                <input type="checkbox" id="type_button" />
            </td>
        </tr>
        <tr>
            <td class="btnsht">
                <input type="checkbox" id="type_submit" />
            </td>
        </tr>
        <tr>
            <td class="btnsht">
                <input type="checkbox" id="type_mini" />
            </td>
        </tr>
    </table>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module ToggleButtonComponent {
        $(function () {
            var button = new ej.ToggleButton($("#type_button"), {
                  size: "large",
                  type: "button",
                  showRoundedCorner: true,
                  defaultText: "Play",
                  activeText: "Next",
    
              });
           var button1 = new ej.ToggleButton($("#type_submit"), {
                  size: "large",
                  type: "submit",
                  showRoundedCorner: true,
                  defaultText: "submit",
                  activeText: "submitted",
              });
           var button2 = new ej.ToggleButton($("#type_mini"), {
                  size: "large",
                  type: "reset",
                  showRoundedCorner: true,
                  defaultText: "reset",
                  activeText: "reseted",
              });
    
          });
    }

    Execute the above code to render the following output.