CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Problem with jQuery Form and Validate plugins (http://www.codingforums.com/showthread.php?t=167830)

SupremelyMatt90 06-02-2009 02:41 AM

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.

Fumigator 06-02-2009 06:48 PM

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!).

SupremelyMatt90 06-03-2009 11:08 PM

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.


All times are GMT +1. The time now is 09:45 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.