Загрузка формы в диалоге 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

Я сам понял.

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

Answer 2

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

Было бы хорошо, если вы поделитесь HTML, а я не увижу ошибок с вашими js.

Другое дело - проверить, правильно ли загружается форма surveyData и может ли jquery получить к ней доступ.Например, что вы получаете, когда делаете это:

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