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, Sep 17 '19 at 07:24
Have you got the `onSubmit` inside `render()` or outside `render()`? Can you show the full function, please? — Praveen Kumar Purushothaman, Sep 17 '19 at 07:25
Move the onSubmit={this.onSubmit} to the button's onClick handler, does it invoke then? — rrd, Sep 17 '19 at 07:26
Your form has a lot of issues: Example, `id=myForm"` doesn't have a starting `"`. — Praveen Kumar Purushothaman, Sep 17 '19 at 07:27
https://stackoverflow.com/questions/52577141/how-to-submit-form-from-a-button-outside-that-component-in-react look this answer — Dostonbek Oripjonov, Sep 17 '19 at 08:11
@DostonbekOripjonov just checked it,, But what is the purpose usage of the form? it's hacky way! — Khaled Ramadan, Sep 17 '19 at 08:22
The way you want use is also hacky bro. Officially, submit button should be located between form tags — Dostonbek Oripjonov, Sep 17 '19 at 08:25

score 0 · Answer 1 · answered Jul 09 '21 at 01:07

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.

ravibagul91 · Answer 2 · 2019-09-17T07:29:30.407

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>

My purpose is how to submit a form bu outside button, is it possible? — Khaled Ramadan, Sep 17 '19 at 07:35

score -1 · Answer 3 · answered Sep 17 '19 at 08:06

-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 '19 at 08:06

Abhijit Padhy

142
9

Form is not submitting from an outer button using react

3 Answers3