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"> 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.
Before you post, read our: 
