jQuery ajax Form Submit - как?

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 форма Plugin

и здесь, как я инициализировать образуют

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

Проблема заключается в том, когда я отправить форму он не принимает все значения от входов и whe n Я вставляю входные данные непосредственно после тега формы, который требуется для всех.

Итак, как я могу это сделать с входами внутри разных div?

Answer 1

Ваш <form> элемент охватывает несколько элементов, и это не закрыта должным образом. Браузер попытки исправить HTML, закрыв <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> 

Вы должны обернуть все ваши входы с одним <form> элемента вместо этого, то есть, перемещая <form> несколько уровней вверх ваш DOM дерево так, чтобы все входы, значения которых вы хотите представить, обернуты внутри.

Другими словами:

<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> 

Кроме того, так как .ajaxSubmit() (из плагина Jquery jQuery Form) заменит по умолчанию представить действия, вы должны prevent default submission action from being followed through:

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

... или .. .

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