CODEWITHSUNDEEP
reactjsreact-bootstrap
Skaranjit
Skaranjit

Reputation: 794

OnSubmit not working in form

I have the following component being returned by render function:

<form onSubmit={(e) => this.filter(e)}>
            <Modal className='side-modal' show={this.props.show} onHide={this.props.hide}>
                <Scrollbars autoHide>
                    <Modal.Header closeButton>
                        <Modal.Title>Filter</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <FormGroup>
                            <ControlLabel>Search Based On Keywords</ControlLabel>
                            <FormControl value={this.state.searchInput} type='text' placeholder='Legal Entity Name, DBA Name, Email or Processor Submerchant ID' onChange={this.setInputSearchText} />
                        </FormGroup>
                        <FormGroup>
                            <ControlLabel>Account Status</ControlLabel>
                            <CustomSelect
                                selectID={'accountStatus'}
                                hasListIcon={true}
                                listItemDetails={this.state.itemList}
                                defaultItemObj={this.state.defaultItem}
                                isReset={this.state.isReset}
                                setValue={this.setAccountStatusValue}
                            />
                        </FormGroup>
                    </Modal.Body>
                </Scrollbars>
                <Modal.Footer>
                    <Button bsStyle='primary' type='submit'>
                        <span className='icon ion-checkmark icon--inner'></span> Apply
        </Button>
                    <Button type='reset' onClick={this.resetFilter}>
                        <span className='icon ion-android-refresh icon--inner'></span> Reset
        </Button>
                </Modal.Footer>
            </Modal>
        </form>

I wanted the form to call filter function on clicking 'Enter' from keyboard but it doesn't seem to work, even onSubmit isnot called when clicked on Apply. What might be the problem here? Thank you in advance. Here is my filter function:

filter = (e: any) => {
    e.preventDefault();
    this.getSomeReults();
    this.props.hide();
}

Upvotes: 2

Views: 1006

Answers (1)

Yash Thakur
Yash Thakur

Reputation: 1201

I guess you are using this plugin for modal and as per what i can see each component i.e. Modal Header, Modal Body, Modal Footer are separate. So your code i.e. 

<form onSubmit={ e => this.filter(e) } >
</form>

should come inside 

<ModalBody>
//Form code here
</ModalBody>

Upvotes: 1

Related Questions