Загрузка формы в диалоговом окне jquery приводит к пустой сериализации()

Question

Я создаю опрос клиентов, используя диалог jQuery UI. Я загружаю внешний html-файл (/survey/survey.htm), который имеет форму, содержащую два раздела (# part1 и # part2). Каждый раздел отображается в том же диалоге (#CustomerSurvey ")

$("#CustomerSurvey") 
    .load("Survey/survey.htm #intro") 
    .dialog({ 
     title: "Customer Satisfaction Survey", 
     width: 400, 
     open: function() { $(".ui-dialog-titlebar-close").hide(); }, 
     closeOnEscape: false, 
     buttons: { 
      "Yes": function() { 
       //part1 
       $(this) 
       .dialog("destroy") 
       .load("Survey/survey.htm #part1") 
       .dialog({ 
        open: function() { $(".ui-dialog-titlebar-close").hide(); }, 
        closeOnEscape: false, 
        title: "Customer Satisfaction Survey (1/2)", 
        width: 700, 
        height: 600, 
        buttons: { 
         "Next >>": function() { 
          //validate 
          count = validateSurvey("part1"); 
          if (count > 0) { 
           SetFeedback("error", "Please answer all questions before continuing."); 
          } 
          else { 
           //part2 
           $(this) 
           .hide() 
           .load("Survey/survey.htm #part2") 
           .dialog({ 
            open: function() { $(".ui-dialog-titlebar-close").hide(); }, 
            closeOnEscape: false, 
            title: "Customer Satisfaction Survey (2/2)", 
            buttons: { 
             "Submit": function() { 
              //validate 
              count = validateSurvey("part2"); 
              if (count > 0) { 
               SetFeedback("error", "Please answer all questions before continuing."); 
              } 
              else { 
               //save results. 
               var surveyData = $("#surveyData").serialize(); 
               alert(surveyData);              
               //$(this).dialog("close"); 
               //SetFeedback("success", "Thank you for <b>completing our survey!</b>."); 
              } 
             } 
            } 
           }) 
           .fadeIn(); 
          } 
         } 
        } 
       }); 
      }, 
      "No": function() { 
       //dont ask again? 
       var no_survey = $("input[name=f_survey]").is(':checked'); 
       if (no_survey) { 
        $.ajax({ 
         type: "POST", 
         url: "fmMenu.aspx/SetSurveyStatus", 
         data: "{'surveyStatus':1}", 
         contentType: "application/json; charset=utf-8", 
         dataType: "json" 
        }); 
       } 
       $(this).dialog("close"); 
       hdnNoSurvey.remove(); 
      } 
     } 
    }); 

Когда я сериализовать форму (#surveyData), строка всегда пусто. Любые идеи, почему? Я уже пытался закомментировав dialog.destroy() и dialog.hide() команды, но это не помогло

заранее спасибо Стейн

EDIT:.! #surveyData является элементом формы и является уникальным
EDIT: а вот HTML

<form id="surveyData"> 
<div id="part1">   

    <p class="inline info"> 
     Thank you for taking the time to complete this survey. Your feedback is very important to us and will help us 
     shape our product. Please complete all questions below by indicating the level of satisfaction. 
    </p> 

    <table> 
     <tr> 
      <td></td> 
      <td>Very satisfied</td> 
      <td>Somewhat satisfied</td> 
      <td>Somewhat dissatisfied</td> 
      <td>Very dissatisfied</td> 
     </tr> 
     <tr> 
      <th>1. Responsiveness</th> 
      <td> 
       <input type="radio" name="f_responsive" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_responsive" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_responsive" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_responsive" value="0" /> 
      </td> 
     </tr>    
     <tr> 
      <th>2. Professionalism</th> 
      <td> 
       <input type="radio" name="f_professional" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_professional" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_professional" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_professional" value="0" /> 
      </td> 
     </tr>    
     <tr> 
      <th>3. Understanding business knowledge</th> 
      <td> 
       <input type="radio" name="f_business" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_business" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_business" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_business" value="0" /> 
      </td> 
     </tr>    
     <tr> 
      <th>4. Quality of deliverable</th> 
      <td> 
       <input type="radio" name="f_deliverable" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_deliverable" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_deliverable" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_deliverable" value="0" /> 
      </td> 
     </tr>    
     <tr> 
      <th>5. Technical expertise</th> 
      <td> 
       <input type="radio" name="f_expertise" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_expertise" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_expertise" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_expertise" value="0" /> 
      </td> 
     </tr>    
     <tr> 
      <th>6. Product satisfaction</th> 
      <td> 
       <input type="radio" name="f_product" value="100" /> 
      </td> 
      <td> 
       <input type="radio" name="f_product" value="50" /> 
      </td> 
      <td> 
       <input type="radio" name="f_product" value="25" /> 
      </td> 
      <td> 
       <input type="radio" name="f_product" value="0" /> 
      </td> 
     </tr>          
    </table> 
    <br /> 

    <span>7. Would you recommend e-capture.net to colleagues or contacts within your industry?</span> 
    <input type="radio" name="f_recommend" value="100" />Definitely 
    <input type="radio" name="f_recommend" value="75" />Probably 
    <input type="radio" name="f_recommend" value="50" />Not sure 
    <input type="radio" name="f_recommend" value="25" />Probably not 
    <input type="radio" name="f_recommend" value="0" />Definitely not 

    <br /> 
    <span>8. How would you compare e-capture.net to similar products?</span> 
    <input type="radio" name="f_compare" value="100" />Significantly better 
    <input type="radio" name="f_compare" value="75" />Somewhat better 
    <input type="radio" name="f_compare" value="50" />About the same 
    <input type="radio" name="f_compare" value="25" />Somewhat worse 
    <input type="radio" name="f_compare" value="0" />Indecisive       
</div> 



<div id="part2">        
    <span>9. Please rate the following characteristics of e-capture.net</span> 
    <table> 
     <tr> 
      <td></td> 
      <td>Very satisfied</td> 
      <td>Somewhat satisfied</td> 
      <td>Neither satisfied or dissatisfied</td> 
      <td>Somewhat dissatisfied</td> 
      <td>Very dissatisfied</td> 
     </tr> 
     <tr> 
      <th>Quality</th> 
      <td> 
       <input type="radio" name="f_quality" value="100" />       
      </td> 
      <td> 
       <input type="radio" name="f_quality" value="75" />       
      </td> 
      <td> 
       <input type="radio" name="f_quality" value="50" />       
      </td> 
      <td> 
       <input type="radio" name="f_quality" value="25" />       
      </td> 
      <td> 
       <input type="radio" name="f_quality" value="0" />       
      </td> 
     </tr> 
     <tr> 
      <th>Ease of use</th> 
      <td> 
       <input type="radio" name="f_easeofuse" value="100" />       
      </td> 
      <td> 
       <input type="radio" name="f_easeofuse" value="75" />       
      </td> 
      <td> 
       <input type="radio" name="f_easeofuse" value="50" />       
      </td> 
      <td> 
       <input type="radio" name="f_easeofuse" value="25" />       
      </td> 
      <td> 
       <input type="radio" name="f_easeofuse" value="0" />       
      </td> 
     </tr> 
     <tr> 
      <th>Performance (speed)</th> 
      <td> 
       <input type="radio" name="f_performance" value="100" />       
      </td> 
      <td> 
       <input type="radio" name="f_performance" value="75" />       
      </td> 
      <td> 
       <input type="radio" name="f_performance" value="50" />       
      </td> 
      <td> 
       <input type="radio" name="f_performance" value="25" />       
      </td> 
      <td> 
       <input type="radio" name="f_performance" value="0" />       
      </td> 
     </tr> 

     <tr> 
      <th>Overall satisfaction</th> 
      <td> 
       <input type="radio" name="f_overall" value="100" />       
      </td> 
      <td> 
       <input type="radio" name="f_overall" value="75" />       
      </td> 
      <td> 
       <input type="radio" name="f_overall" value="50" />       
      </td> 
      <td> 
       <input type="radio" name="f_overall" value="25" />       
      </td> 
      <td> 
       <input type="radio" name="f_overall" value="0" />       
      </td> 
     </tr>        
    </table>          

    <br /><br /> 
    <span>10. Any additional comments or suggestions?</span> 
    <textarea rows="5" cols="100" name="f_comments"></textarea>    
</div>   
</form> 

Answer 1

Я понял это сам.

Тег формы охватывает # part1 и # part2 divs. Поскольку я использую функцию $ .load, чтобы показывать только # part1 или # part2, тег формы никогда полностью не загружается (от начала тега до конца), поэтому я не смог бы сериализовать его

Answer 2

Самая распространенная ошибка, которую люди совершают с помощью serialize(), заключается в том, что они не добавляют атрибут «name» в теги html. Недостаточно иметь «id» во входном теге - вам также нужно добавить «имя».

Было бы хорошо, если бы вы делили html, а также не могли видеть ошибки с помощью js.

Другое дело, чтобы проверить, правильно ли загружена форма «surveyData», и jQuery может достигнуть ее. Например, что вы получаете, когда вы это делаете:

alert($("input, textarea", "#surveyData").length);