How to submit form on enter without submit button?

Question

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.

Answer 1

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}>
    .
    .
    .

  );
};

Answer 2

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>

Answer 3

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

}

in render func:

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

Answer 4

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>
    );
  }

}

Answer 5

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>

Answer 6

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.

Answer 7

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>