CODEWITHSUNDEEP
javascriptjqueryformspopup
Dawid
Dawid

Reputation: 83

Form doesn't work on popup

I have exit popup on my website, there is code of this exit popup:

<script type="text/javascript">
      bioEp.init({
        html: '<div id="bio_ep_content">' +
        '<img src="/static/newsletter.png" alt="Newsletter" />' +
        '<span>Zapisz się do newslettera</span>' +
        '<span>Chcesz być na bieżąco z tym, co dzieje się w branży budowlanej? Zapisz się do naszego newslettera! Co 2 tygodnie otrzymasz wiadomość o najnowszych artykułach i inspiracjach!</span>' +
        '<form id="newsletter" class="newsletter exitpopup">' +
        '<input type="text" name="email" placeholder="Email" /> <input type="submit" value="Zapisz się" />' +
        '<span class="info error"></span>' +
        '<span class="info success"></span>' +
        '</form>' +
        '</div>',
        cookieExp: 0
    });
    </script>

The code for newsletter form is exact to noraml form, which is fully working:

 <form id="newsletter">

        <input type="text" name="email" placeholder="Email" /> <input type="submit" value="Zapisz się" />
        <span class="info error"></span>
        <span class="info success"></span>
    </form>

<script>
    $('form#newsletter').on('submit', function() {
        var form = this;
        var data = form_fields(form, [ 'email' ]);
        form_post('/newsletter', data, false, function(ctx) {
            if(ctx['error']) {
                $(form).children('.info.error').html(ctx['error']);
                $(form).children('.info.success').html('');
            } else if(ctx['success']) {
                $(form).children('.info.error').html('');
                $(form).children('.info.success').html(ctx['success']);
            }
        });
        return false;
    });
</script>

But when I type something in this form in popup and submit this, then page reload and nothing happens. Normal form fully working, so how I can fix this popup form?

Upvotes: 1

Views: 76

Answers (1)

Jai
Jai

Reputation: 74738

You have to delegate the event to the parent element as the form is generated after page load, so event didn't bound on it: 

$(document).on('submit', 'form#newsletter', function() {

Here $(document) can be replaced with the closest static parent element. That can be any other wrapper element which contains the form but should have to be loaded when dom ready event happened.

Upvotes: 1

Related Questions