Grow your CSS skills. Land your dream job.

Problem with Validating and Ajax Submission

  • # June 1, 2009 at 4:38 pm

    Am having a very silly problem with Ajax Form Submission after validation of the form is complete… when I remove the ajax form submission, the email works fine, but when i do it, it doesn’t :|
    Here is a live example of my form :arrow: Contact Form

    Code:
    $(function() {
    //find all form with class jqtransform and apply the plugin
    $(‘#contactForm’).validate({
    submitHandler: function(form){
    $(form).ajaxSubmit({
    success: function() {
    $(‘#contactForm’).slideUp(1000);
    $(‘#page-wrap’).append(“

    Thanks, message sent successfully!
    We will get back to you as soon as possible.

    “);
    return false;
    }
    });
    }
    });
    });

    The live example works fine and displays a thank you message but the actual email doesn’t go :(

    # June 2, 2009 at 8:23 am

    no one? :|

    # June 3, 2009 at 3:20 am

    Hello friends,
    I was having some problem in validating and submitting the form via AJAX as mentioned above, hence I got it working by setting the options for the ajaxForm() method. In the ‘beforeSubmit’ option I checked for the validation of the code and in the success option I just printed the thank you message..

    Code:
    $(function() {
    var options = {
    beforeSubmit: function(){
    return $(‘#contactForm’).validate().form();
    },
    success: function(){
    $(‘#contactForm’).slideUp(1000);
    $(‘#page-wrap’).append(“

    Thanks, message sent successfully! We will get back to you as soon as possible.

    “);
    }

    // other available options:
    //url: url // override for form’s ‘action’ attribute
    //type: type // ‘get’ or ‘post’, override for form’s ‘method’ attribute
    //dataType: null // ‘xml’, ‘script’, or ‘json’ (expected server response type)
    //clearForm: true // clear all form fields after successful submit
    //resetForm: true // reset the form after successful submit
    // $.ajax options can be used here too, for example:
    //timeout: 3000
    };
    $(‘#contactForm’).ajaxForm(options);
    $(‘#contactForm’).validate();
    });

    # June 4, 2009 at 2:26 am

    So the problem here is the e-mail not going out? Could you post some PHP?

    # June 4, 2009 at 10:41 am

    Hello hugo,
    Well, the php code works just fine, but the problem I was facing was that I was unable to submit the form using AJAX, when I would call it from the call back function of the validation method. Just like Chris did it in one of his form tutorials. But I solved it by setting the options parameter of the ajaxForm() method, and its now working fine :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".