Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with jQuery Form and Validate plugins

    Ok, this is my last resort, as I've been working on this for a while
    and am completely stumped. I'm probably just doing something stupid
    that I haven't noticed, so maybe a fresh pair of eyes would help.

    Essentially my problem is this: on this website I'm developing, users
    can submit photos for a monthly contest. I'm using the Lightbox plugin
    with prototype and script.aculo.us to display winners from the past
    few months, and the Validate and Form plugins for jQuery to display a
    form where users upload their pictures. Thus, I have this in the head
    of my document:

    Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script>jQuery.noConflict();</script>
    <script type="text/javascript" src="js/lightwindow.js"></script>
    <script type="text/javascript" src="js/ajax_upload.js"></script>
    The ajax_upload file contains the following script:

    Code:
    jQuery(document).ready(function($){
            $("#submitphoto").validate({
                    rules: {
                            firstname: "required",
                            lastname: "required",
                            email: {
                                    required: true,
                                    email: true
                            },
                            upload: {
                                    required: true
                            },
                            message: "required"
                    },
                    messages: {
                            firstname: "Please enter your first name.",
                            lastname: "Please enter your last name.",
                            email: "Please enter a valid email address.",
                            topic: "Please select a photo to upload."
                    },
                    submitHandler: function(form) {
    
                                    options1 = {
                                                    target: '#lowernav_middle',
                                                    iframe: true,
                                                    beforeSubmit: function() { $("#lowernav_middle").html('<img
    src="images/ajax-loader-regular.gif" alt="Loading..." id="loading" /
    >')},
    
                                                    success: function(data) {
                                            var $out = $('#lowernav_middle');
                                            $out.html('Form successfully received: <strong>' +
    data + '</strong>');
                                            },
                                    };
                                    $(form).ajaxSubmit(options1);
    
                            return false;
                    }
            });
    
    });
    and then finally, the form that the user sees:
    Code:
    <form id="submitphoto" action="upload.php" method="POST"
    enctype="multipart/form-data">
                            <fieldset class="pix">
                            <legend>All fields required:</legend>
                            <p><label for="firstname">First Name:</label><br />
                            <input type="text" id="firstname" name="firstname" /></p>
                            <p><label for="lastname">Last Name:</label><br />
                            <input type="text" id="lastname" name="lastname" /></p>
                            <p><label for="email">Email Address:</label><br />
                            <input type="text" id="email" name="email" /></p>
                            <p><label for="upload">Upload Picture:</label><br />
                            <input type="file" id="upload" name="upload" size="12"/></p>
                            <p><label for="caption">Caption (optional):</label><br />
                            <input type="text" id="caption" name="caption" /></p>
                            <p><input name="optout" type="checkbox"
    checked="checked" /><span class="fine">&nbsp;&nbsp;I would like to be
    contacted with future promotions.</span></p>
                            <input type="submit" id="send" name="send"
    value="Submit Picture"/>
                            </fieldset>
                            </form>
    On the server side, upload.php validates the submitted stuff again,
    adds the photo to a directory of uploaded images, and adds the user's
    information to a MySQL database, along with a reference to where the
    corresponding photo is stored. The whole process works fine, except
    when I try to do it with ajaxSubmit. The success function gets fired,
    but the script doesn't display any text response from the server, nor
    is any information added to the database. The server-side script
    (upload.php) is set to echo some sample text no matter how you access
    it, so I don't believe that's the problem.

    Any help on this would be incredibly appreciated. I can provide a link
    to the page too, if necessary.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Can I assume you are using this 3rd party jQuery plugin?

    http://malsup.com/jquery/form/

    I've never used this plugin before but I can see you're not doing things just like their coding examples so I wonder if that's your problem. Their example binds to the form's submit event and calls ajaxSubmit() within that. So mirror the examples on the plugin's website exactly to get it working.

    You should also try using alert() to find out what the value of "data" is in the callback function. But first find out if the ajaxSubmit is even working (you can also stick alert() calls everywhere to find that out too!).

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    According to the author of the Validate plugin, the submitHandler is where to place an Ajax call, so it's essentially doing the same thing as binding the ajaxSubmit() function to the form submit event.

    I do a similar thing with a contact form on a different page of the site, except there's no file upload. That one works just fine, so I don't think using ajaxSubmit() within the validate() function is a problem. Literally EVERYTHING works here too... except for the success callback. I'd give up on this Form plugin, except I don't know how to do the Ajax-like file upload.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •