form inside form serialize problem

Question

I am trying to submit a form inside another form because I will need first form's outcome in the second form. I tried using form serialize as advised in some other threads. Problem here is, I dont receive an error but it does not function either.

    <script type="text/javascript">
    $(document).ready(function(){
        $("[id='video-submit']").click(function() { 
      $.ajax({
       type: "POST",
       data: $("#VideoForm").serialize(),
       url: "cp.asp?Process=UploadVideo",
       success: function(output) {
        $("#output").html(output);
       },
       error: function(output) {
        $("#output").html(output);
       }
      }); //close $.ajax(
     });
    });
    </script>
  <div id="form">
        <form method="post" action="?Section=controlpanel&Process=AddVideo">
            <fieldset>
                <div class="required" id="VideoForm">                
                    <label for="VideoURL">Video File</label>
                    <input type="file" size="23" name="VideoFile">
                    <input type="button" name="Submit" id="video-submit" value="Upload" />
                </div>
                <div id="output">
                </div>
            </fieldset>
            <fieldset>
                <div class="required">
                <label for="VideoName">Video Name</label>
                <input type="text" name="VideoName" id="form-text<%=VideoNAME_ERR%>" />
                </div>
                <div class="required">                
                    <label for="VideoDuration">Video Duration</label>
                    <input type="text" name="VideoDuration" id="form-text<%=VIDEODURATION_ERR%>"/>
                </div>
      <div class="required">                
                <label for="VideoShortDesc">Video Short Desc</label>
                <textarea rows="5" cols="30" name="VideoShortDesc" id="form-text<%=VideoSHORTDESC_ERR%>" ></textarea>
                </div>
                <div class="required">       
                    <label for="Publish?">Publish?</label>
                    <select size="1" name="Active" id="form-text">
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
      </fieldset>
            <fieldset>
                <input type="submit" name="Submit" id="form-submit" value="Submit" />
            </fieldset>
        </form>
    </div>

cp.asp?Process=UploadVideo :::

 Case "UploadVideo"

Path = "/media/videos"

Set Upload = Server.CreateObject("Persits.Upload" ) 
Upload.IgnoreNoPost = True 
Upload.OverwriteFiles = False 
Upload.SetMaxSize 104850 ' Truncate files above 10MB
Upload.SaveVirtual(Path)

For Each File in Upload.Files 
 If File.ImageType = "UNKNOWN" Then 
 Response.Write "You cannot upload an unknown format." 
 File.Delete 
 Response.End 
 Else 

 Response.Write "Video successfully attached!"
 Response.Write "<input type=""hidden"" name=""VideoURL"" value=""/media/videos/" & Server.HTMLEncode(File.OriginalPath) &""" />"

 End If
Next

Answer 1

That just isn't going work. Whilst JQuery can serialise form fields and post them to the server using AJAX it can't do that to a File field.

The only way you going to get a file posted to the server is by using a normal Form post and you really ought to use multipart encoding.

Answer 2

Instead of using $().serialize() on the div try calling $.param() and passing it an array of form elements. like so:

$.param($('input[type!="button"][type!="submit"], textarea, select', '#VideoForm'))

Then you can attach an event handler like this to the upload button:

uploadFile = function(event)  
{  
  params = $.param($('input[type!="button"][type!="submit"]', '#VideoForm'));

  // do something to submit your request using ajax

  // prevent the button from causing a form submit
  event.preventDefault();  
}

EDIT: Hmm. Looking at the other answers I don't know how I missed that the first request was supposed to upload a file. This would be useful I suppose for other applications where the the form is doing a simple partial post of a form with parameters.