양식 내부 양식 문제가 발생했습니다

Question

두 번째 양식에서 첫 번째 양식의 결과가 필요하므로 다른 양식 내부에서 양식을 제출하려고합니다. 양식을 사용하여 다른 스레드에서 권고대로 serialize 해 보았습니다. 문제는 여기서 오류가 발생하지 않지만 작동하지 않습니다.

<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? 프로세스 = 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

. JQuery는 양식 필드를 직렬화하여 AJAX를 사용하여 서버에 게시 할 수 있지만 JQuery는이를 파일 필드로 보낼 수 없습니다.

서버에 게시 된 파일을 얻는 유일한 방법은 일반적인 Form Post를 사용하는 것이며 실제로는 여러 부분 인코딩을 사용해야합니다.

Answer 2

div에 $().serialize()을 사용하는 대신 $.param()을 호출하고 양식 요소 배열을 전달하십시오. 같은 :

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

는 그런 다음 업로드 버튼이 같은 이벤트 핸들러를 첨부 할 수 있습니다

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(); 
} 

편집 : 흠. 다른 대답을 살펴보면 첫 번째 요청이 파일을 업로드한다고 가정 한 내용을 놓친 것입니다. 이것은 폼이 매개 변수가있는 폼의 간단한 부분 게시를 수행하는 다른 응용 프로그램에 유용 할 것입니다.

Answer 3

귀하의 문제는 약간 다른,하지만 문제가 중첩 된 형태를 serialising 경우 (크롬에서 지원하지만, 파이어 폭스에서 지원되지 않습니다 - HTML가 무효이기 때문에) 당신이 주변에 작업 사용할 수 있습니다

$('#yourFormId, #yourFormId form').serialize(); 

을 양식 및 하위 양식을 선택한 다음 전체 세트를 직렬화하십시오.