Search results

Form submit in React ButtonGroup component

15 Oct 2021 / 1 minute to read

The name attribute of the input element is used to group the radio/checkbox type ButtonGroup. When the radio/checkbox type are grouped in the form, the checked items value attribute will be posted to the server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

Source
Preview
app.tsx
index.html
app.jsx
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup in form.
class App extends React.Component<{}, {}> {
  public componentDidMount(): void {
    (document.getElementById('female') as HTMLInputElement).checked = true;
  }
  public render() {
    return (
      <div>
        <form>
          <div className='e-btn-group'>
            <input type="radio" id="male" name="gender" value="male"/>
            <label className="e-btn" htmlFor="male">Male</label>
            <input type="radio" id="female" name="gender" value="female"/>
            <label className="e-btn" htmlFor="female">Female</label>
            <input type="radio" id="transgender" name="gender" value="transgender"/>
            <label className="e-btn" htmlFor="transgender">Transgender</label>
          </div>
          <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
        </form>
      </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup in form.
class App extends React.Component {
    componentDidMount() {
        document.getElementById('female').checked = true;
    }
    render() {
        return (<div>
        <form>
          <div className='e-btn-group'>
            <input type="radio" id="male" name="gender" value="male"/>
            <label className="e-btn" htmlFor="male">Male</label>
            <input type="radio" id="female" name="gender" value="female"/>
            <label className="e-btn" htmlFor="female">Female</label>
            <input type="radio" id="transgender" name="gender" value="transgender"/>
            <label className="e-btn" htmlFor="transgender">Transgender</label>
          </div>
          <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
        </form>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('buttongroup'));