jquery - 在 jquery 对话框中加载表单会导致空的 serialize()

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()命令，但这没有帮助。

提前致谢!斯泰恩

编辑:#surveyData 是一个表单元素并且是唯一的
编辑:这是 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 div。由于我使用 $.load 函数仅显示 #part1 或 #part2，因此表单标签永远不会完全加载(从开始标签到结束标签)，因此我无法序列化它