jQuery 아약스 양식 제출 - 방법?

Question

<div class="full_popup"> 
<section class="left_sec"> 
    <div class="img_holder"> 
     <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload"> 
     <input type="file" id="file" name="file"> //input file 
    </div> 
</section> 
<section class="right_sec"> 
<div class="body"> 

자세한 사항 입력은

<ul class="details"> 
    <li class="loc"><input type="text" id="geo" placeholder="place photo taked in"></li> 
    <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li> 
</ul> 
</div> 
<div class="footer"> 
    <button class="popup_post" type="submit">Post</button> //submit 
    </form> //ending form 
</div> 
</section> 
</div> 

나는 JQuery와 양식 플러그인을

를 사용하고 여기 내가이 양식을 제출하면 문제가 양식을

$('#upload').submit(function() { 
    $(this).ajaxSubmit() 
}); 

를 초기화하는 방법입니다 입력 값인 에서 모든 값을 가져 오지는 않습니다. n 모든 것을 취하는 양식 태그 바로 뒤에 입력을 넣습니다.

그래서 어떻게 다른 div 안에있는 입력으로 할 수 있습니까?

Answer 1

귀하의 <form> 요소는 여러 요소에 걸쳐하고 제대로 폐쇄 아닙니다.

이

<section class="left_sec"> 
    <div class="img_holder"> 
     <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload"> 
     <input type="file" id="file" name="file" /> 
     </form><!-- likely to be inserted by the browser to fix lack of closing tag --> 
    </div> 
</section> 

대신, 모든 그래서 당신의 DOM 트리를 <form> 여러 수준을 이동하여, 즉 하나의 <form> 요소와 모든 사용자의 입력을 포장한다 : 브라우저는 시도은 조기 <form> 요소를 폐쇄하여 HTML을 수정하는 것입니다 값을 제출하려는 입력은 내부에 랩핑됩니다. 즉

:

$('#upload').submit(function() { 
    $(this).ajaxSubmit() 
    return false; 
}); 

을 ... 나 .. :

또한

<form action="do_up.php" enctype="multipart/form-data" method="post" id="upload"> 
    <div class="full_popup"> 
     <section class="left_sec"> 
      <div class="img_holder"> 
       <input type="file" id="file" name="file" /> 
      </div> 
     </section> 
     <section class="right_sec">     
      <div class="body"> 
       <ul class="details"> 
        <li class="loc"><input type="text" id="geo" placeholder="place photo taked in" /></li>  
        <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li> 
       </ul> 
      </div> 
      <div class="footer"> 
       <button class="popup_post" type="submit">Post</button>  
      </div> 
     </section> 
    </div> 
</form> 

,합니다 (jQuery 플러그인 jQuery Form)에서 .ajaxSubmit()부터 기본 동작을 제출 대체합니다, 당신은 prevent default submission action from being followed through해야 .

$('#upload').submit(function(e) { 
    $(this).ajaxSubmit() 
    e.preventDefault(); 
}); 

---

p/s : <!-- ... -->이 아닌 //을 사용하면 HTML에서 주석을 이스케이프 처리해야합니다.

Answer 2

// You can do it like this... 
$("#upload").submit(function() { 

      var theData = null; 
      // This will capture all form data 
      theData = $(this).serialize(); 

      var uploadDetails = { 
       type:  "POST", 
       dataType: "json", 
       url:  "do_up.php", 
       data:  theData, 
       success: responseHandlerFunctionNameWithoutBrackets 
      }; 
      $.ajax(uploadDetails); 
     });