halfmoon icon indicating copy to clipboard operation
halfmoon copied to clipboard

Close modal on form submit

Open Bruno-Marley opened this issue 4 years ago • 3 comments

I don't know if there is already a way to do this with this framework, but I have a button that opens a modal that contains a form and when I submit that form it was supposed to open on the same page but with the modal closed, but when I redirect on the backend when the page loads the modal is always open.

Is there anything I can do to make him close the modal whenever I submit the form?

Bruno-Marley avatar Dec 15 '20 15:12 Bruno-Marley

I had such issue also. Try redirecting as usual but change the internal link.

Let's say the original link when you open the modal is www.test.com/#modal-1

You can then redirect to something like www.test.com/#none

This will work normally without opening the modal again.

Note that #none should not be an id in your html

opensaucerer avatar Dec 24 '20 13:12 opensaucerer

Sorry for the late response, but are you using CSS modals or the ones that use JavaScript methods? In each case, you can do the following:

  • Change the anchor tag in the URL to close the modal (for CSS modals)
  • Call the halfmoon.toggleModal({modalId}) method when the form submit button is clicked.

There is no built-in way to do this as of right now.

halfmoonui avatar Feb 06 '21 17:02 halfmoonui

@halfmoonui i have my modal in the root of the react project, when I try to toggle it, it does not toggle.

halfmoon.toggleModal('login-modal');

<div className="modal" id="login-modal" tabIndex="-1" role="dialog">

Any other solutions?

timbogdanov avatar Jan 02 '22 23:01 timbogdanov