Name and value in form submit in EJ2 TypeScript Check box control

10 May 20234 minutes to read

The name attribute of the CheckBox is used to group Checkboxes. When the Checkboxes are grouped in form, the checked items value attribute will post to the server on form submit that can be retrieved through the name. The disabled and unchecked CheckBox value will not be sent to the server on form submit.

In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled state and Basketball is in unchecked state. Now, the value that is in checked state only be sent on form submit.

import { CheckBox, Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//Name and Value attribute in form submit.
let checkbox: CheckBox = new CheckBox({ name: 'Sport',  value: 'Cricket', label: 'Cricket', checked: true });
checkbox.appendTo('#checkbox1');

checkbox = new CheckBox({ name: 'Sport',  value: 'Hockey', label: 'Hockey', checked: true });
checkbox.appendTo('#checkbox2');

checkbox = new CheckBox({ name: 'Sport',  value: 'Tennis', label: 'Tennis', disabled: true });
checkbox.appendTo('#checkbox3');

checkbox = new CheckBox({ name: 'Sport',  value: 'Basketball', label: 'Basketball' });
checkbox.appendTo('#checkbox4');

let button: Button = new Button({ isPrimary: true });
button.appendTo('#btnElement');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <form>
            <ul>
                <li><input type="checkbox" id="checkbox1" /></li>
                <li><input type="checkbox" id="checkbox2" /></li>
                <li><input type="checkbox" id="checkbox3" /></li>
                <li><input type="checkbox" id="checkbox4" /></li>
                <li><button id="btnElement">Submit</button></li>
            </ul>
        </form>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.e-checkbox-wrapper {
  margin-top: 18px;
}

button {
  margin: 20px 0 0 5px;
}

li {
  list-style: none;
}