Issue with using jQuery to get hidden form field value in Firefox

Question

I have the following form and I am trying to get the value of the hidden form field "kpiValueType" when I click the next button.

<script type="text/javascript">
    function getGivenFieldValue()
    {
        var searchFieldVal = jQuery('input:hidden[name="activities[0].kpiList[0].kpiValueType"]').val();
        alert(searchFieldVal);
    }
</script>

<h:form id="fundRequestForm" action="" method="post">
    <ui:repeat value="#{fundRequestBean.requestActivityList}" var="activity" varStatus="stat">
        <table width="100%" class="tablesorter">
            <thead class="fixedHeader">
                <tr>
                    <th width="418px">
                            <input type="checkbox" checked="checked" name="activities[#{stat.index}].check" />
                        #{activity.activityName}
                    </th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <ui:repeat value="#{activity.kpiList}" var="kpi" varStatus="status">
                    <tr>
                        <td>#{kpi.kpiName}<ui:fragment rendered="#{kpi.required=='true'}">
                                <label style="color: red">*</label>
                            </ui:fragment>
                        </td>
                        <td><div style="text-align: left; padding-top: 5px; padding-bottom: 5px; float: left;">
                                <input type="text" name="activities[#{stat.index}].kpiList[#{status.index}].kpiValueString"
                                        value="#{kpi.kpiValueString}" size="60" maxlength="50" />
                        </td>
                    </tr>
                    <input type="hidden" name="activities[#{stat.index}].kpiList[#{status.index}].kpiValueType"
                        value="#{kpi.kpiValueType}" />
                </ui:repeat>
            </tbody>
        </table>
    </ui:repeat>

    <table width="100%" border="0" bordercolor="#CCCCCC" rules="none" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="3" align="center">&#160;&#160;&#160;&#160;</td>
        </tr>
        <tr>
            <td>&#160;&#160;&#160;&#160;</td>
            <td>&#160;&#160;&#160;&#160;</td>
            <td align="right"><div id="nextButtonDiv" style="float: right;">
                    <h:commandButton
                        onclick="getGivenFieldValue()"
                        actionListener="#{fundRequestBean.saveFundRequest}" action="#{fundRequestBean.getPreviewFundRequestData}"
                        value="#{msg.nextLbl}">
                    </h:commandButton>
                </div>&#160;&#160;&#160;&#160;&#160;&#160;&#160;</td>
        </tr>
        <tr>
            <td colspan="3" align="center">&#160;&#160;&#160;&#160;</td>
        </tr>
    </table>
</h:form>

From the page source I saw the name of the hidden field kpiValueType as

<input type="hidden" name="activities[0].kpiList[0].kpiValueType" value="N" />

The alert gives me undefined. Could you please tell me whats wrong here? I am using jQuery 1.7 and Firefox 13.0.1

Answer 1

You need to escape the . characters in the selector:

var searchFieldVal = jQuery('input:hidden[name="activities[0]\\.kpiList[0]\\.kpiValueType"]').val();
alert(searchFieldVal);

Here's a working example.