Form submit in React Button group component

2 Mar 20264 minutes to read

The name attribute groups radio and checkbox type buttons in a form. When the form submits, the value of the checked button is sent to the server and can be retrieved using the name attribute. Disabled buttons do not send their values on form submission.

The following example demonstrates a radio type ButtonGroup with the “Male” option initially checked. When the form is submitted, the checked button’s value is sent to the server:

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup in form.
function App() {
    function componentDidMount() {
        document.getElementById('female').checked = true;
    }
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));

app.tsx

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

// To render ButtonGroup in form.
function App() {
  function componentDidMount(): void {
    (document.getElementById('female') as HTMLInputElement).checked = true;
  }
  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>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));