Form is not submitting from an outer button using react

Question

 class Index extends React.Component {
    state = {isLoading: false}

    onSubmit = (event) => {
       console.log('here we go');
       event.preventDefault();
       // this.checkEmailExistance();
    };

    render() {
      return (
       <>
         <form id="myForm" onSubmit={this.onSubmit} noValidate>
            <CredentialsInputs />
         </form>
         <footer>
            <Button type="submit" form="myForm" isPrimary isDisabled={!isValid}>   
               Continue
            </Button>
          </footer>
        </>
     )}
 }

onSubmit function is not invoked

Note: the props (type and form) was passed well and check using the console elements

Is the problem something related to react?

@rrd You don't need to bind as it's a fat arrow function. Also, logging to console doesn't need binding. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Sep 17, 2019 at 7:24
Have you got the onSubmit inside render() or outside render()? Can you show the full function, please? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Sep 17, 2019 at 7:25
Move the onSubmit={this.onSubmit} to the button's onClick handler, does it invoke then? — rrd
– rrd, Commented Sep 17, 2019 at 7:26
The way you want use is also hacky bro. Officially, submit button should be located between form tags — Dostonbek Oripjonov
– Dostonbek Oripjonov, Commented Sep 17, 2019 at 8:25

Broda Noel · Accepted Answer · 2021-07-09 01:07:42Z

0

You can set a ref to the form, and then in the "Button onClick", you do ref.submit().

In that situation, you set an id to the form... So, if you want to make a really really ugly implementation, you could do something like document.getElementByid('myForm').submit()

If you want to do something better, you should do something like...

<form ref={ref => this.formRef = ref} ...

<button onClick={() => this.formRef.submit()}

Still... not super beautiful. I would recommend Hooks + useRef.

answered Jul 9, 2021 at 1:07

Broda Noel

2,0931 gold badge27 silver badges40 bronze badges

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

Comments

ravibagul91 · Accepted Answer · 2019-09-17 07:29:30Z

-1

You have written you submit button outside of form. You should move your submit button inside of form,

<form id="myForm" onSubmit={this.onSubmit} noValidate>
     <CredentialsInputs />
     <footer>
         <Button type="submit" form="myForm" isPrimary isDisabled={!isValid}>
           Continue
         </Button>
     </footer>    
</form>

If you don't want to move footer inside of form, then you should have onClick on your Button

<form id="myForm" noValidate>
     <CredentialsInputs />
</form> 

<footer>
    <Button type="submit" form="myForm" isPrimary isDisabled={!isValid} onClick={this.onSubmit}>
        Continue
    </Button>
</footer>

edited Sep 17, 2019 at 7:29

answered Sep 17, 2019 at 7:26

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

1 Comment

Khaled Ramadan Over a year ago

My purpose is how to submit a form bu outside button, is it possible?

Abhijit Padhy · Accepted Answer · 2019-09-17 08:06:37Z

-1

Put the button inside form. it will work.

You should always include a button element inside form to trigger onSubmit method automatic, Else you can call the method manually with onClick event of the button.

answered Sep 17, 2019 at 8:06

Abhijit Padhy

1429 bronze badges

Collectives™ on Stack Overflow

Form is not submitting from an outer button using react

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related