Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to disable <ENTER> key for form submit in react-bootstrap

In the following snippet, I have a number of input forms that are type text. If the user hits , it seems I am getting the same synthetic event as if they press the submit button. I want to ignore the as a form submit, and only allow one to press the SUBMIT button. (I deleted some of the Form Groups to cut down on the example).

In all cases (button or ENTER key)

e.key is undefined
e.which is undefined
e.type is submit
e.target is the submit button 

(this is a synthetic event)

const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'

const Configuration = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath }) => {
    const buttonAction = (e) => {
        e.preventDefault();
        alert(e.target.innerHTML)
    }
    return (
        <Form horizontal>
            <FormGroup controlId="serverPortBox">
                <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                        <FormControl type="number" min="1024" max="65535" placeholder={ServerPort} />
                    </OverlayTrigger>
                </Col>
            </FormGroup>
            <FormGroup controlId="dbPortBox">
                <Col componentClass={ControlLabel} sm={2}>Database Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt3">TCP port for PostGreSql DB</Tooltip>)}>
                        <FormControl type="number" min="1024" max="65535" placeholder={PortNumber} />
                    </OverlayTrigger>
                </Col>
            </FormGroup>
            <Button type="submit" bsStyle="primary" block onClick={(e) => buttonAction(e)}>Update Configuration</Button>
        </Form>
    )
}

export default Configuration
like image 939
Dr.YSG Avatar asked May 03 '17 18:05

Dr.YSG


People also ask

How do I disable enter in form?

Disabling enter key for the form keyCode === 13 || e. which === 13) { e. preventDefault(); return false; } }); If you want to prevent Enter key for a specific textbox then use inline JS code.

How do you prevent a form from clearing fields on submit React?

To prevent basic React form submit from refreshing the entire page, we call e. preventDefault . in the submit event handler. to create the onSubmit function that's set as the value of the onSubmit prop.


2 Answers

Maybe should insert button with type "button" instead "submit"? and then just handle onClick for this button?

like image 170
Vitalii Andrusishyn Avatar answered Oct 13 '22 13:10

Vitalii Andrusishyn


The easiest solution would be to just use type="button" instead of type="submit".

like image 21
nem035 Avatar answered Oct 13 '22 11:10

nem035