Submit Form using Button in Parent Component in React

Question

So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. How can I submit the form using the button in the parent component. I am using React Semantic-UI react as my UI framework.

I think if I can hide the button in the form and trigger it using JavaScript. I think this might be achieved via getElementById, but is there a react way of doing it?

My current Modal looks like this:

<Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}>
    <Modal.Header> Edit Activity {this.props.name} </Modal.Header>
    <Modal.Content>
      <ActivityInfoForm/>
    </Modal.Content>
    <Modal.Actions>
        <Button negative onClick={this.props.onClose}>
            Cancel
        </Button>
        <Button positive
                content='Submit'
                onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} />
    </Modal.Actions>
</Modal>

My form code looks like this:

<Form>
    <Form.Group widths='equal'>
        <Form.Input label='Activity Name' placeholder='eg. CIS 422' />
        <Form.Input label='Activity End Date' placeholder='Pick a Date' />
    </Form.Group>
    <Form.Group widths='equal'>
        <Form.Input label='Total Capacity' placeholder='eg. 30' />
        <Form.Input label='Team Capacity' placeholder='eg. 3' />
    </Form.Group>
</Form>

if you want to do it the react way, you should store the input values somewhere(e.g state,redux-form) so you can get them later. — QoP
– QoP, Commented May 19, 2017 at 5:35

Pavlo Kyrylenko · Accepted Answer · 2018-12-01 18:15:46Z

35

The simplest solution would be to use HTML form Attribute

Add "id" attribute to your form: id='my-form'

<Form id='my-form'>
                    <Form.Group widths='equal'>
                        <Form.Input label='Activity Name' placeholder='eg. CIS 422' />
                        <Form.Input label='Activity End Date' placeholder='Pick a Date' />
                    </Form.Group>
                    <Form.Group widths='equal'>
                        <Form.Input label='Total Capacity' placeholder='eg. 30' />
                        <Form.Input label='Team Capacity' placeholder='eg. 3' />
                    </Form.Group>
                </Form>

Add the appropriate "form" attribute to the needed button outside of the form: form='my-form'

<Button positive form='my-form' content='Submit' value='Submit'  />

answered Dec 1, 2018 at 18:15

Pavlo Kyrylenko

2,7232 gold badges23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark Steggles Over a year ago

Nice elegant solution +1

TrieuNomad Over a year ago

I had to set button type='submit' for this to work, nice find!

Adam Cooper Over a year ago

Best solution IMO

zaibil Over a year ago

The owner should accept this answer as the right one. Thanks Pavlo!

Nayte Over a year ago

I was wondering: what is the 'positive' attribute in the Button component ?

|

thinhvo0108 · Accepted Answer · 2017-05-19 07:48:17Z

7

What does your makeActivityInfoUpdateHandler function look like?

I assume you did it by the following way, and just continue adding more code to make it work for you:

1/ Add ref to your Form, then you can access the Form in the parent (Modal):

<Modal>

    <Modal.Content>
        <ActivityInfoForm ref="activityForm" />
    </Modal.Content>

</Modal>

2/ Then in the makeActivityInfoUpdateHandler function:

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.refs.activityForm.getWrappedInstance().submit();
    // ...

}

The above code is the way you should do, please post here some more details in case this doesn't work yet!

=========== EDITED VERSION BELOW: (after discussion with the author, and we together found a good way around!):

The idea now is put the ref on a button (this button has type="submit", and it belongs to the form), then when the button outside is clicked, we just need to call the "click()" function of the ref button [which is a smart thinking from the author himself]

(Actually, component from semantic-ui is a modified and improved version, no longer the standard form, so my previous way above may not work when it tries to submit the form, however, the below way will work)

The code will now look like:

1/ Add ref to the button on the form:

<Form onSubmit={ this.handleSubmit} >
    <button style={{}} type='submit' ref={ (button) => { this.activityFormButton = button } } >Submit</button>
</Form>

2/ Then in the makeActivityInfoUpdateHandler function, trigger click() of the above button:

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.activityFormButton.click();
    // ...

}

edited May 19, 2017 at 7:48

answered May 19, 2017 at 5:38

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

5 Comments

Rui Over a year ago

That function is really just a skeleton function awaiting to be filled.

Rui Over a year ago

that does not seem to be working, does not give me any errors either, they <Form> is actually a component in Semantic UI React can be found here react.semantic-ui.com/collections/form#form-example-form

thinhvo0108 Over a year ago

Seems so..actually I guess Semantic UI React handle their form differently, I will try another way and update the previous answer shortly, please hold on

thinhvo0108 Over a year ago

However, which action will be executed when the form is submitted? Do you have handleSubmit() function for your Form component? If yes, can you console.log and see some values in your submitted form?

thinhvo0108 Over a year ago

Let us continue this discussion in chat.

Daneesha · Accepted Answer · 2019-08-13 03:40:51Z

2

The selected answer was useful. But the method in it doesn't seem to work any longer. Here's how I went about it.

You can give a ref to the child component when it is being created.

<ChildComponent ref={this.childComponent}/>

And use it in the button's onClick method. (This is the code for the button)

<Button variant= "light" onClick={this.onClick}>  
    Submit
</Button>

(This is the onClick method)

onClick = (event) => {
    this.childComponent.current.handleSubmit(event);
}

I'm calling a method in the child component called handleSubmit. It can look like this.

handleSubmit = (event)=> {
    event.preventDefault();

    //Your code here. For example,
    alert("Form submitted");  
}

edited Aug 13, 2019 at 3:40

answered Aug 13, 2019 at 3:35

Daneesha

4457 silver badges11 bronze badges

1 Comment

MisterLexisDev Over a year ago

That's smart but I add a detail : Don't forget in constructor this.childComponent = React.createRef(); if you use a class component.

Collectives™ on Stack Overflow

Submit Form using Button in Parent Component in React

3 Answers 3

7 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related