I want to submit my form on enter without adding button inside an Antd form. Is there any way to do this in React?

I think about workaround to just hide button, but don't think this will be the best way to do it.

I want to submit my form on enter without adding button inside an Antd form. Is there any way to do this in React?

I think about workaround to just hide button, but don't think this will be the best way to do it.

• javascript
• reactjs
• antd

• 2 In which field you want to press enter there attach an onKeyup event and the keycode like event.keyCode === 13 (for enter I believe) then submit the form. BTW, please share what did you try. – Sajeeb Ahamed Commented Oct 20, 2020 at 6:32
• Please provide your Antd form sample code that you tried – Googlian Commented Oct 20, 2020 at 6:46

7 Answers 7

onSubmit is not available in antd v4. Use onKeyPress instead.

<Form
  form={form}
  onFinish={console.log}
  onKeyPress={(e) => {
    if (e.key === "Enter") {
      form.submit();
    }
  }}
>
    //
</Form>

1. store ref of the antd Form inside your component(for accessing to submit method)
2. add onKeyUp to Form
3. you need to add tabIndex={0} to Form if you want to onKeyUp work on entire Form and not just inputs
4. enter keyCode is 13 so you need to handleKeyUp like this:

const SimpleForm = () => {
  const ref = useRef();

  function handleKeyUp(event) {
    // Enter
    if (event.keyCode === 13) {
      ref.current.submit();
    }
  }

  return (
    <Form ref={ref} onKeyUp={handleKeyUp} tabIndex={0}>
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!"
          }
        ]}
      >
        <Input.Password />
      </Form.Item>
    </Form>
  );
};

or you can listen to keyup event on window like this:

const SimpleForm = () => {
 const ref = useRef();
  function handleKeyUp(event) {
    if (event.keyCode === 13) {
      ref.current.submit();
    }
  }

  useEffect(() => {
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  return (
    <Form ref={ref}>
    .
    .
    .

  );
};

Use onSubmit event handler! if you don't want a button to submit the form. for example

The Submit Function

handleSubmit(e){
e.preventDefault()
// your form submission logic
}

Use onSubmit on form

<form onSubmit={this.handleSubmit}>

</form>

If you want to make it work with Antd this example in reference docs should work.

Since you mentioned React, the code below should submit the form on pressing enter. The trick is to add onSubmit property to the form tag.

export default class Module extends React.Component {

  constructor() {
    super();
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleSubmit(e) {
    e.preventDefault();
    //your code
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        //form code
      </form>
    );
  }

}

export default class Module extends React.Component {
  constructor() {
    super();
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    //your code
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        //form code
        // Hide this button using CSS
       <button type="submit">Submit</button>
      </form>
    );
  }

May be this'll work. By default submit button inside catches enter key press so you don't have to do any radical thing just put a submit button inside form and hide that button, on enter key it'll automatically submit the form.

submitFunction=(event)=>{
console.log('form submitted.')

}

in render func:

 < form onSubmit={this.submitFunction}>
   // input...
 < /form>

you should use the onKeyUp props in your input

const handleSubmit = () => {
// function body for submitting data
}

<input
  onKeyUp={(ev) => {
              if (ev.keyCode === 13) {
                handleSubmit();
              }
            }}
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>