Menu icon Foundation
Reveal should stay open onsubmit of form

Hi

I have a form inside a reveal modal (Foundation 5). By default the modal closes when the form is submitted. I would like the modal to stay open when the form is submitted or show error messages. I thought this would be the solution, but it doesn't work:

<input id="fscf_submit1" class="fscf-button-submit" value="Submit" onsubmit="$('#myModal').foundation('reveal', 'open');" type="submit">

The page can be viewed here:
http://hearables.co.za/ click on "Send us a message"

There are a number of forum post on this issue, but I didn't find a solution (AJAX is Greek to me though) - apologies if I'm double posting.

Thanks

revealformsubmit

Hi

I have a form inside a reveal modal (Foundation 5). By default the modal closes when the form is submitted. I would like the modal to stay open when the form is submitted or show error messages. I thought this would be the solution, but it doesn't work:

<input id="fscf_submit1" class="fscf-button-submit" value="Submit" onsubmit="$('#myModal').foundation('reveal', 'open');" type="submit">

The page can be viewed here:
http://hearables.co.za/ click on "Send us a message"

There are a number of forum post on this issue, but I didn't find a solution (AJAX is Greek to me though) - apologies if I'm double posting.

Thanks

Andy Wallace over 3 years ago

Hi Arie,

When you click a submit button on a regular form in a reveal modal, the form is POSTing just like it would when not in a modal - so it behaves in the same way (the browser navigates away from the page, to the form action URL - it doesn't care that it's in a UI modal).

What you need to do is submit your form using AJAX instead. I'm not going to give you a tutorial here, but if you do a bit of Googling you'll find that it's not too hard!

Andy

Arie Olivier over 3 years ago

Thanks Andy, makes sense. Will see what I can find.