How to produce a modal on form submit instead of a page redirect

Question

To give a little background, I am using the Mailchimp API to add email addresses from the form on my site to my Mailchimp email list. I found an example / snippet here (modified slightly in my code) that passes the emails to my list, but instead of having a page redirect once the form is submitted, I want a modal to pop up (i.e. AJAX-ify it).

Here's what I'm starting with:

HTML:

                     <form role="form" id="signup" class="formee form-inline" action="subscribe.php" method="post">
                        <div class="form-group">
                            <label class="sr-only" for="email-input">Email address
                            </label>
                            <div class="email-input-wrapper">
                                <input type="text" id="email" name="email" class="form-control input-lg" placeholder="[email protected]" size="40" value="">
                            </div>
                        </div>
                        <div class="form-group">
                           <button class="btn btn-lg" id="request-invite-btn" type="submit" title="Send" value="Send"> Request Invite </button> 
                        </div>
                    </form>

Javascript:

        <script type="text/javascript">
        $(document).ready(function() {
        // jQuery Validation
        $("#signup").validate({
            // if valid, post data via AJAX
            submitHandler: function(form) {
                $.post("subscribe.php", { email: $("#email").val() }, function(data) {
                    $('#response').html(data);
                });
            },
            // all fields are required
            rules: {
                email: {
                    required: true,
                    email: true
                }
            }
        });
    });
    </script>

Subscribe.php:

<?php   
require_once 'inc/MCAPI.class.php';
$api = new MCAPI('************************');

// Submit subscriber data to MailChimp
// For parameters doc, refer to: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php
$retval = $api->listSubscribe( '********', $_POST["email"], $merge_vars, 'html', false, true );

if ($api->errorCode){
    echo "<h4>Please try again.</h4>";
} else {
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
}

?>

Modal HTML (I'm using Bootstrap):

     <div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Success!</h4>
          </div>
          <div class="modal-body">
            <p> 
            Thanks for your interest!
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>

I also used the MCAPI.class.php doc from the site at the top.

I'm very new to this, so I apologize for posting any unnecessary code. Any direction would be much appreciated. Thanks!

Answer 1

if you just want to display your modal when you server respond you can just do the following :

Doc : http://getbootstrap.com/javascript/#via-javascript

<script type="text/javascript">
        $(document).ready(function() {
        // Handle submission event
        $("#signup").submit(function(event){
            event.preventDefault();
        });
        // jQuery Validation
        $("#signup").validate({
            // if valid, post data via AJAX
            submitHandler: function(form) {
                $.post("subscribe.php", { email: $("#email").val() }, function(data) {
                    //$('#response').html(data);
                    $('#emailModal').modal();                        
                });
            },
            // all fields are required
            rules: {
                email: {
                    required: true,
                    email: true
                }
            }
        });
    });
</script>

This code just trigger the modal on server response for the example, feel free to improve it for your needs :)

Apparently, this post deal with redirecting and validate jQuery plugin Stackoverflow post.

So you can bind an event on form submission and just prevent default.