Menu icon Foundation
Reveal Modal should stay open on form submit

Hey,
I've got a strange issue with the Reveal Modal. If I am submitting a form on my website, the Modal should open and stay in this position.

<form action="action.php" method="post" onsubmit="$('#myModal').foundation('reveal', 'open');">
    <input type="text" />
    <input type="submit" />
</form>
            

         

The Modal opens for a few seconds and close himself instantly.

Thank you!

revealmodalopenformsubmiton

Hey,
I've got a strange issue with the Reveal Modal. If I am submitting a form on my website, the Modal should open and stay in this position.

<form action="action.php" method="post" onsubmit="$('#myModal').foundation('reveal', 'open');">
    <input type="text" />
    <input type="submit" />
</form>
            

         

The Modal opens for a few seconds and close himself instantly.

Thank you!

Rafi Benkual almost 4 years ago

I created a demo so people can see what's happening here: http://codepen.io/rafibomb/pen/zvwaYK

Chris Oyler almost 4 years ago

Though I can't say for certain why, the method="post" is the culprit. Take that out and it works just dandy. Perhaps open the modal on a successful callback? Similar to : http://foundation.zurb.com/forum/posts/35394-trigger-reveal-on-form-submit-with-abide-validation

FoundationDeck almost 4 years ago

Hey

The reason why it is not staying is because the page is reloading after a submit. The modal fires first being that it is javascript and immediately after the page reloads/goes to another page. Could you tell us how you want your website to work and we could give other suggestions.

Jonas Marlo Loerken almost 4 years ago

@Chris Oyler
The method="post" is necessary for the submitting of the form. Otherwise it won't work anymore...

@FoundationDeck
This is some of my HTML

<div class="large-10 columns top-nav-wrapper" data-equalizer-watch>
    <ul class="top-nav">
        <li class="search" id="jr5">
                <a href="#"></a>
                <i class="fa fa-search"></i>
                <form method="post" action="<?=$PHP_SELF?>" onsubmit="$('#suchModal').foundation('reveal', 'open');"><input type="text" name="suche"    placeholder="Suchen"/><input type="submit" style="display:none"/></form>
        </li>
        <li id="jr6"><a href="#" data-reveal-id="help-modal"></a><i class="fa fa-question-circle"></i></li>
        <li id="jr7"><a href="#" data-reveal-id="info-modal"></a><i class="fa fa-info-circle"></i></li>
        <li><a href="#"></a>REX_TEMPLATE[2] <i class="fa fa-user"></i></li>
        <li id="jr8"><a href="<?php echo rex_getUrl(7); ?>"></a>Logout <i class="fa fa-sign-out"></i></li>
    </ul>
</div>

<div id="suchModal" class="reveal-modal xlarge" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
     Lorem Ipsum
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Jonas Marlo Loerken almost 4 years ago

The form is something like a search engine. The user types something in and a PHP-Script searches for some goals in my MySQL table. After submitting the form a Reveal Modal should open an display the Results.

The PHP works fine so far.

FoundationDeck almost 4 years ago

You may need to use ajax post to submit the form. This is the best way I can think of to prevent the entire page from reloading.

Jonas Marlo Loerken almost 4 years ago

@FoundationDeck
Thank you! I will try out these solution. I will keep you up to date!