I have a form...

        <form id="imageUploader1" action="upload-image.php" method="post"
enctype="multipart/form-data">

                <input name="photoNumber" type="hidden" value="1">

                <input name="sourceFile" type="file" size="20" style="font-size:
8pt;">

                <br><input type="submit" value="Upload Photo #1" 
style="margin-top:
2pt; font-size:8pt;">

        </form>

... that is gets processed by AjaxForm on submit...

        // Set Ajax options
        var options = {success: respondToUpload};

        // Register forms
        $('#imageUploader1').ajaxForm(options);

        // Display uploaded photo
        function respondToUpload(responseText){
                var response = eval('(' + responseText + ')');
                parent.client.document.getElementById("uploadedPhoto" +
response.photoNumber).src = "../surveys/photos/" + response.surveyID +
".jpg";
        }

The form is programmatically generated by JavaScript after the
document is loaded, which is why it's explicitly registered (as shown
above).

Everything works perfectly (thanks to a lot of help from Brian) when
the Submit button is clicked -- that is, the form is submitted, the
photo that was specified in file-input is uploaded, the PHP script
generates a unique file name, the json_encoded array (containing the
new file name) is sent back to the JavaScript, and a respondToUpload
function consistently executes without a hitch and without a page
refresh.

Next, I'd like to enhance the form by removing the Submit button and
automatically submitting the form based on an onchange event in the
file-input field. In other words, I want to change the input-file
field from...

                <input name="sourceFile" type="file" size="20" style="font-size:
8pt;">

... to....
                <input name="sourceFile" type="file" size="20" style="font-size:
8pt;" onchange="document.getElementById('imageUploader').submit();">

Unfortunately, when the form gets submitted by the input-file's
onchange event, the page refreshes. If I remove the onchange event,
and leave everything else the same, clicking the Submit button does
not refresh the page.

Does anyone know why this is happening and how I can get around it?
The UI is so much nicer without the Submit button.

Thanks.

Reply via email to