Question

I have a script I wrote to toggle some SharePoint formfields. I’ve gotten them to hide when the page loads, but I am unable to get them to show because I don’t know how to pin down what the ids of the formfield controls are going to be.

I had thought about adding an id to the Request Type row, but I doubt that would do any good as it’s the control itself, and not the tr that it occupies that changes. Any suggestions?

Actually, if I could figure out a way to get the fieldname attribute of the SharePoint:FormField, that would be my preferred method.

<script type="text/javascript">
$(document).ready(function(){

  $("tr.anon").hide();
  $("tr.reqDet").hide();

  $("#ff5{$Pos}").change(function(){
     $(".anon").toggle();
  });

  $("#ff3{$Pos}").change(function(){
     $("#ff4{$Pos}").toggle();

  });
});
</script>

<tr>
    <td width="190px" valign="top" class="ms-formlabel">
        <H3 class="ms-standardheader">
            <nobr>Request Type<span class="ms-formvalidation"> *</span></nobr>
        </H3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="requestType" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@requestType')}"/>
        <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="requestType" ControlMode="New"/>
    </td>
</tr>
<tr class="reqDet">
    <td width="190px" valign="top" class="ms-formlabel">
        <H3 class="ms-standardheader">
            <nobr>Request Details</nobr>
        </H3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="requestDetails" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@requestDetails')}"/>
        <SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="requestDetails" ControlMode="New"/>
    </td>
</tr>

Many thanks!

Answer 1

Those are some funky looking IDs, are you sure they are valid? If they are then you will need to use this method to access the FormField control (or any Server side control) from javascript/jQuery:

var myFormField = $("#<%= #ff5{$Pos}.ClientID %>");