Search code examples
javascriptsharepoint-2010show-hide

Hide field based on drop down selection in sharepoint new item


I am new to sharepoint.

I have created a list. In the new item window, i would like display or hide fields based on drop down selection value. I know it can be done using jquery as it is shown in below link. but i dont know where to place the code.

https://sharepoint.stackexchange.com/questions/88064/hide-show-field-on-list-form-based-on-value-from-another-field

thanks


Solution

  • Go to your list main page then

    List Tools>List>Form Web Parts>Default New Form
    

    Then click on Add a Web Part and under Categories select Media and Content > Content Editor. Click Add to add it to the page.
    On the left side of the Content Editor, you will see an arrow. Click on it and choose Edit Web Part. Under Content Link click on the button to open the Text Editor. Add the URL of your aspx page.
    For instance if the page is stored in the Site Assets library and is called newform.aspx the url is [url path to site assets]/SiteAssets/newform.aspx.Go to the where you stored the script and copy the link displayed by the browser: copy until /SiteAssets/ or /[library internal name]/ for another library. Then append the scrpt name. You can notice that the relative URL is sufficient and it starts at /sites/.
    However the newform.aspx has to be edited this way:

            <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
                <SharePoint:ScriptLink Name="sp.ribbon.js" runat="server" OnDemand="true" Localizable="false" />
                <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false" />
    
                <script type="text/javascript">
                    /*Your script here*/
                    /*examples*/
                    myFunction1()
                    {}
                    myFunction2()
                    {}
                     jQuery(document).ready(function ($) 
                     {                           
                            ExecuteOrDelayUntilScriptLoaded(myFunction1, "sp.js");          //if the function operates on the form
                            ExecuteOrDelayUntilScriptLoaded(myFunction2, "sp.ribbon.js");   //if the function operates on the ribbon
                    });
    
                </script> 
    
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                 <html xmlns="http://www.w3.org/1999/xhtml">
                        <head>
                            <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
                            <title>Page</title>
                        </head>
                        <body>
    
                        </body>
    
                </html>
    
        </asp:Content>
    

    1. Ask the server to load sp.js and sp.ribbon.js by adding the necessary tags at the top of the page if you want to work on the form and/or the ribbon
    2. You can add custom html : remove otherwise
    3. Save as .aspx