Name and value in form submit in React Check box component

2 Mar 20263 minutes to read

The name attribute groups CheckBoxes in a form. When the form submits, only the values of checked CheckBoxes are sent to the server and can be retrieved using the name attribute. Disabled and unchecked CheckBox values are not sent on form submission.

The following example demonstrates form submission with CheckBox values. Cricket and Hockey are checked, Tennis is disabled, and Basketball is unchecked. Only the checked values are sent on form submit:

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
function App() {
    return (<form>
      <ul>
          <li><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true}/></li>

          <li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball"/></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// Name and Value attribute in form submit.
function App() {
  return (
    <form>
      <ul>
          <li><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true} /></li>

          <li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball" /></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));