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: stackoverflow.com/a/5059391/594235 — Sparky
– Sparky, Commented Mar 16, 2014 at 16:17

Joshua Terrill · Accepted Answer · 2014-03-16 04:24:46Z

1

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

answered Mar 16, 2014 at 4:24

Joshua Terrill

2,0175 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Javascript to call up a modal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related