Question

I have an requirement where i need to fetch the form values. i’m able to fetch the values fine in IE 7 & IE 8. Below is the form

using serializearray() i’m fetching the form values in IE 8 i could get the values see the image below:

but in IE 9 the same line of code is not fetching the values see the image below:

Some one please help. I’m stuck. Moreover, at this point of time i can’t change this serializearray() function because lot of code has been already written. if this needs to be changed. the total work would go for a toss

generated html:

<form action="/SDLCMClassic/questionaire/questionairelist?projectArtifactId=53678&amp;ppmFlag=N&amp;level=Project" method="post">    <div class="body-container clearfix">
       <div class="information-body clearfix" id="tblHeader">
        <div class="information-header">
            Assesment
        </div> 
        <div class="form-align-div">
           <label>PPM ID </label>
        </div> 
        <div class="form-align-div-large">
        182944
        </div> 
        <div class="form-align-div">
           <label>App Portfolio ID </label>
        </div> 
        <div class="form-align-div-large">
        116368
        </div> 
        <div class="form-align-div">
           <label>PPM Project Name </label>
        </div> 
        <div class="form-align-div-large">
        ITSVC FY11 SOIT ITSM HPSM uCMDB Integration
        </div>
        <div class="form-align-div">
           <label>APP CIName </label>
        </div> 
        <div class="form-align-div-large">
        HPSM IT
        </div>
       </div>
</div> 
<div class="clear-both" id="QuestionaireDiv">
<div class="parent_divqn"  style="background-color:#fff;color:#000;">
    <table id="tblSdlc" width="100%">
        <tr>
            <td width="2%">
                1
            </td>
            <td width="50%">
                List of authentication methods
            </td>
            <td width="48%">
                <input type="hidden" value='DECISION' name='15' title='ListBox' />
                    <input type="hidden" id='hdnselectright' name='15' title='DECISION' />
                    <table width="45%">
                        <tr>
                            <td>
                                <label class="lable">
                                    Available</label>
                                <select id="sourcelist-15" multiple="multiple" data-mandatory='Y' data-datatype='string' data-qindex='1' class="saral-select" style="width: 269px;">
                                                <option value='1'>Active Directory</option>            
                                                <option value='2'>Enterprise Directory</option>            
                                                <option value='3'>DigitalBadge</option>            
                                                <option value='4'>SiteMinder</option>            
                                                <option value='5'>HP Passport</option>            
                                                <option value='6'>Cybersafe (SAP)</option>            
                                                <option value='7'>OATH</option>            
                                                <option value='8'>Non-Leveraged Authentication Infrastructure</option>            
                                                <option value='9'>Pending</option>            
                                </select>
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <img id="MoveRight-15" src="/Content/Images/arrowRight.png" alt="Move Right"  onclick='javascript:togglelistdata(this,&#39;15&#39;,&#39;1&#39;,&#39;/SDLCMClassic/Questionaire/GetQuestionaireList&#39;)' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img id="MoveLeft-15" src="/Content/Images/arrowLeft.png" alt="Move Left" onclick='javascript:togglelistdata(this,&#39;15&#39;,&#39;1&#39;,&#39;/SDLCMClassic/Questionaire/GetQuestionaireList&#39;)'/>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <label class="lable">
                                    Selected</label>
                                <select id="destlist-15" multiple="multiple" class="saral-select" data-mandatory='Y' data-datatype='string' data-qindex='1' name="rightlist-DECISION" style="width: 269px;">

                                </select>
                            </td>
                        </tr>
                    </table>
            </td>
        </tr>
    </table>
</div> 
    <div class="clear-both" id="container">
    </div>
</div>
<input type="hidden" id="hdnAnsweredArray" />
<input type="hidden" id="hdninputcountArray" />
<input type="hidden" id="hdninput" />
<input type="hidden" id="hdnlistboxid" />

Answer 1

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.

From the HTML above, you have 2 hidden fields with the same name (15), one select element with a name (rightlist-DECISION). Nothing else qualifies as a ‘successful’ control, so the serializeArray method will not work as well as you desire.

Use this jQuery to test it out:

var objects = ​$("form").serializeArray();
for(var i = 0; i < objects.length; i++) {
  $("#container").append(objects[i].name);
}