Loading form in jquery dialog results in empty serialize()

Question

Hi all,

I'm creating a customer survey using a jQuery UI dialog. I'm loading an external html file (/survey/survey.htm) which has a form that contains two sections (#part1 and #part2). Each section is shown in the same dialog (#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();
            }
        }
    });

When I serialize the form (#surveyData), the string is always empty. Any ideas why? I already tried commenting out the dialog.destroy() and dialog.hide() commands but that didn't help.

Thanks in advance! Stijn

EDIT: #surveyData is a form element and is unique
EDIT: And here's the 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

the most common mistake people make with serialize() is that they don't add the "name" attribute in the html tags. Having the "id" in the input tag is not enough- you need to add the "name" as well.

It would be good if you share the html as well as I cannot see mistakes with your js.

The other thing is to check if the "surveyData" form is getting loaded correctly and jquery can reach it. For example, what do you get when you do this:

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

Answer 2

I figured it out myself.

The form tag spans the #part1 and #part2 divs. Since I use the $.load function to only show either #part1 or #part2, the form tag is never completely loaded (from begin tag to end tag), hence I couldn't serialize it