0

I would like to know how can I hide / disable an information panel. when you click the Shortlanded on Radio Box Image2 will appear and Image3 will hide or disable and if offloaded was select on radio button Image2 hide or disable and Image 3 appear

radio box

shortlanded panel

offloaded panel

1 Answer 1

0

We can accomplish this by creating a CustomNewForm.aspx in designer (classic view) and adding few lines of JQUERY code.

Here are the steps:

  1. Create a custom new form in Designer and open it in Advanced Mode
  2. As you have already noticed, each SP Field is rendered within a table in <tr>. The goal is to organize the form so that the related fields stays next to each other.
  3. Once you have finalize the groups (panels), add dumpy css class to each group of <tr>

For example, in my sample code, I have two groups: businessInfo and addressinfo, so I've added classes businessInfo and addressInfo to the corresponding <tr>s. These classes have been referenced in Jquery to show and hide the panels.

<!--Business Name Group-->

<tr class="businessInfo">
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Business Name<span class="ms-formvalidation"> *</span>
                                </nobr>
                            </H3>
                        </td>
                        <td width="400px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
                            <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
                        </td>
                    </tr>

<!--Address Info Group -->

<tr class="addressInfo">
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Address</nobr>
                            </H3>
                        </td>
                        <td width="400px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Address" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Address')}"/>
                            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Address" ControlMode="New"/>
                        </td>
                    </tr>


  1. Find ContentPlaceHolderId PlaceHolderAdditionalPageHead and add Sample JQUERY. Please note that for the sample code, JQUERY library is referencing to the [SiteAssets] library.
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/javascript" src="../../SiteAssets/jquery.min.js"></script>


<script language="javascript" type="text/javascript">


 $(document).ready(function () {
 
    $(".addressInfo").hide(); //by default hide address info
 
   $("input[type=radio]").change(function() {
   
       //alert("radio value " + this.val());
       
       var valueOfClickedItem= $("input[type=radio]:checked ~ label").text();
       
      // alert("radio text: " + valueOfClickedItem);

       if(valueOfClickedItem =="ShowBusinessName")
       {
           $(".businessInfo").show();
           $(".addressInfo").hide();

       }
       else
       {
         $(".businessInfo").hide();
         $(".addressInfo").show();       
       }

     });
 
 });



</script>




    <SharePoint:DelegateControl runat="server" ControlId="FormCustomRedirectControl" AllowMultipleControls="true"/>
    <SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
        <SharePoint:CssRegistration Name="forms.css" runat="server"/>
    </ContentTemplate></SharePoint:UIVersionedContent>
</asp:Content>


enter image description here


enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.