Bootstrap modal opens automatically on page load, but how to disable if form is submitted

user_14975336 0
Viewed 641

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?

Javascript:

<script type="text/javascript">
    $(window).on('load', function() {
        $('#newsletter-modal').modal('show');
    });
</script>

HTML Modal Code:

<div class="modal fade" id="newsletter-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content primary-modal">
          <div class="modal-header">
              <h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body primary-modal-body">
          <form method="post" action="">
            <div class="col-sm-12">
                <div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
                    <label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
                    <input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
                  </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
                    <label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
                    <input type="email" class="form-control" placeholder="johndoe123@gmail.com" name="newsletter_email">
                  </div>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
            </div>
          </form>
        </div>
      </div>
  </div>
</div>
modal-dialog php javascript
2 Answers
user_106090060

By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.

Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.

On the page PHP

if (isset($_POST['newsletter_email'])) {
   //you subscribe stuff here
   $_SESSION['subscribed']=true;
}

then wrap your modal js in

if (!isset($_SESSION['subscribed']))  {
    ///output your onload js.
}
user_10231040
Related