在jquery对话框中加载表单导致空序列化()

时间:2010-10-12 14:24:29

标签: jquery forms dialog serialization

我正在使用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>

2 个答案:

答案 0 :(得分:1)

我自己想出来了。

表单标记跨越#part1和#part2 div。 由于我使用$ .load函数只显示#part1或#part2,因此表单标记永远不会被完全加载(从开始标记到结束标记),因此我无法将其序列化

答案 1 :(得分:0)

人们使用serialize()犯的最常见错误是他们没有在html标签中添加“name”属性。在输入标签中使用“id”是不够的 - 您还需要添加“名称”。

如果你分享html以及我看不到你的js的错误,那将是件好事。

另一件事是检查“surveyData”表单是否正确加载并且jquery可以到达它。例如,当你这样做时你会得到什么:

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