Using Javascript to call up a modal

Question

I'm trying to use the Foundation Reveal plugin to trigger a modal with javascript so that "onsubmit" the modal appears.

I am using a hidden iframe to send the content of the form to Mailchimp without the page redirecting to the Mailchimp form.

I am also using a validation script (noted in the top of the Js in the JSfiddle) that I think holds the key to my answer, but I have not been able to find it.

The rest of the Javascript is in the JSfiddle because it is just the reveal.js code.

In case you can't find the Reveal.js in Foundation, the site is here

JSFiddle

HTML:

<form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform"   class="myform" method="POST" name="myform" target="hidden-form">
<div class="row" id="form">
  <div class="small-11 medium-8 large-7 small-centered columns">
      <div class="form-field columns">
        <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
        <input type="hidden" name="id" value="3674d50bfa">
        <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
      </div>
      <div class="form-button columns">
        <input class="button postfix" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Sign Up">
        <input class="button postfix1" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Go">
      </div>
    </div>
</div>
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>

Javascript:

/* FOR jQuery WITH THE BUTTON I THINK IT IS EITHER THIS ------------ */


$("#modalLauncher").click(function (e) {
$('#myModal').foundation('reveal', 'open');
});


/* OR THIS ---------------*/

$('a.reveal-modal').trigger('onsubmit');




/*VALIDATION SCRIPT -- I think this is what can help me ----------------------------- */
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 5
            },
        },
        submitHandler: function (form) { 
            $('#myModal').foundation('reveal', 'open'); /* My attempt at deploying the modal so far */
            return false; 

        },
        messages:{ email: "please enter valid email"}

    });
})

FYI: You don't need a hidden `iframe` to submit data to MailChimp. Just use the MailChimp API: http://stackoverflow.com/a/5059391/594235 — Sparky, Mar 16 '14 at 16:17

score 1 · Answer 1 · answered Mar 16 '14 at 04:24

You have in your fiddle

$('a[data-reveal-id]').live('click', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('data-reveal-id');
        $('#'+modalLocation).reveal($(this).data());
    });

Changing it to

$('input[data-reveal-id]').live('click', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('data-reveal-id');
        $('#'+modalLocation).reveal($(this).data());
    });

seems to work

Using Javascript to call up a modal

1 Answers1