Submit button is refreshing the page instead of submitting the form? (ReactJS and react-toastify)

Question

As the title says, I have two buttons that have the exact same format, but one is refreshing the page when clicked instead of submitting the form. I just need it to trigger a toast.

Here's the working button:

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
  <i className="fas fa-search"></i>
</button>

And here is the not working button:

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
    <i className="fas fa-paper-plane"></i>
</button>

The only difference is the first one is wrapped in a Link tag to submit a search, while the other will be submitting an email to subscribe to a newsletter, but it should just trigger a toast for now.

Help?

Also, I've tried event.preventDefault already (didn't work), and both are in the exact same form format as well.

score 1 · Accepted Answer · answered Jun 26 '20 at 22:12

Don't mix button type="submit" and an onClick handler as this will submit the associated form and take any default form submission actions.

Also, I've tried event.preventDefault already (didn't work), and both are in the exact same form format as well.

This didn't work because your onSubmit callback wasn't receiving the event object.

Either change the type to "button" and use the onClick handler to do the form data submission

<button
    type="button" // <-- button type
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={onSubmit}
>
  <i className="fas fa-search"></i>
</button>

Or move the onSubmit handler to the form from the button

<form onSubmit={onSubmit} ...>
  ...

  <button
      type="submit"
      className="btn btn-primary my-2 my-sm-0"
      style={{ marginTop: "10px" }}
  >
    <i className="fas fa-search"></i>
  </button>

  ...

</form>

You need to also attach the onSubmit to either element in a way that it also consumes the event so you can event.preventDefault() on it.

Either

onSubmit={e => onSubmit(e)}
onClick={e => onSubmit(e)}

or

onSubmit={onSubmit}
onClick={onSubmit}

And remember to actually call event.preventDefault()

const onSubmit = e => {
  e.preventDefault();
  ...
}

If you've still further issues because of the link wrapping then you can also invoke event.stopPropgation() in the handler to prevent the event from bubbling up the DOM (virtualDOM in this case because react uses synthetic events).

So neither of those solutions worked unfortunately. The one that it not wrapped in the Link router tag is the one not working properly btw. But I tried all your possible solutions and if I change the type to button and add the event to the onSubmit it doesn't submit at all. If I keep the type as submit and move the onSubmit to the form tag also doesn't submit the form, it's just doesn't do anything, not even an error in the console. — Amber Robertson, Jun 29 '20 at 16:41
@AmberRobertson Hmm, interesting, perhaps there is more/something else interfering with the even propagation. Can you provide a complete code example? — Drew Reese, Jun 29 '20 at 17:28
So I discovered I commented out my toast.configure() line I've got it fixed now lol the solution ended up being type="button" and moving the onSubmit to the form tag. Thanks for your help! — Amber Robertson, Jun 29 '20 at 17:38

Submit button is refreshing the page instead of submitting the form? (ReactJS and react-toastify)

1 Answers1