CODEWITHSUNDEEP
phpjqueryajaxforms
Santiago Baigorria
Santiago Baigorria

Reputation: 696

Final: AJAX/jQuery/PHP Form submission and modal box open on success

Thanks to Samuel Liew and other great helpers, the issue has been fixed.

As putting everything here was a mess, and it was poorly explained in the overall solution, I dediced to make a explanatory in my own web site.

I leave the DEMO for you to see if that's what you're looking for, and I leave the TUTORIAL for you to learn how to do this.

TUTORIAL: http://santz.com.ar/blog/ajax-form-submit-open-modal-box/

DEMO: http://santz.com.ar/files/demos/ajax-form-submit-open-modal-box/

Hope I helped you! Thanks to all the ones that helped me!

@Samuel Liew, and other great helpers. THE ISSUE HAS BEEN FIXED. I'll leave corected code for future guys that need this.

The case: http://santz.net/index.contacto.html (no longer available)

THIS WAS THE PROBLEM:

Target: The "website" must open a dialog/modal box/modal window after successful form submission.

Issue: The form submits successfully but the dialog/modal box/modal window doesn't open (rarely, it does open if you make another click...)

[Try it, that's why I gave you the link. There's no problem, the site is mine and I recieve the messages]

I hope you can help me... the idea is quite simple! When the user submits the form, a dialog popsup instantly!

THANKS A LOT!

Upvotes: 0

Views: 5174

Answers (1)

Samuel Liew
Samuel Liew

Reputation: 79032

In this case, move the dialog function outside of the submit function:

$(function() {
    $('#popup-wrapper').modalPopLite({
        openButton: '#clicker',
        closeButton: '#close-btn'
    });
    $('#contact-form').submit(function() {
        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function() {
                $('#contact-form')[0].reset();
            }
        });
        return false;
    });
});

Upvotes: 1

Related Questions