Sharepoint custom list: Hiding and showing column based on drop down dependancy

Question

I'm trying to add javascript to the dispform.aspx page of my form to hide certain columns/fields based on a dropdown menu. When I add the code to the CEWP it simply adds text above the fields; the javascript/jquery completely doesnt work. Even when I saved the code as a text file and tried using it as a content link it just added text above the form containing the code and now I cant get ride of it. Here's the code:

<script src="/sites/Newsite1/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function() {
    //Define which columns to show/hide by default
    $('nobr:contains("stuff1")').closest('tr').hide();
    $('nobr:contains("stuff2")').closest('tr').hide();

    //Show/hide columns based on Drop Down Selection 
    $("select[title='test']").change(function() {
        if ($("select[title='test']").val() == "none") {
            $('nobr:contains("stuff1")').closest('tr').hide();
            $('nobr:contains("stuff2")').closest('tr').hide();

        } else if ($("select[title='test']").val() == "hide") {
            $('nobr:contains("stuff1")').closest('tr').show();
            $('nobr:contains("stuff2")').closest('tr').hide();
            $('nobr:contains("stuff3")').closest('tr').hide();

        } else($("select[title='test']").val() == "show") {
            $('nobr:contains("stuff1")').closest('tr').show();
            $('nobr:contains("stuff2")').closest('tr').show();
            $('nobr:contains("stuff2")').closest('tr').show();

        }
    });
});
</script>

Answer 1

Make sure that src="/sites/Newsite1/SiteAssets/jquery-1.9.0.min.js" is a correct path or replace it with src="https://code.jquery.com/jquery-1.9.1.min.js"

Also, you can upload Jquery file to style library of your site collection and create a new folder like js then upload the file inside it then use the following URL

/Style%20Library/js/jquery-1.9.0.min.js

You can also check full steps at Show / Hide fields based on choice field selection using Jquery in SharePoint

Hope it helps you

Answer 2

Create seprate .js file for your javascript code and give reference of that .js file in your content editor webpart along with "jquery-1.9.0.min.js" reference like:

<script src="/sites/Newsite1/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script> 

<script src="/sites/Newsite1/SiteAssets/Test.js" type="text/javascript"></script>

Answer 3

Use Script Editor Web part to insert script inside a page.
Insert your javascript/jquery code inside <script type='text/javascript'></script> tag.
Now it will not render the script as text in the page.

Answer 4

Instead of adding code in Content Editor WebPart add in Script Editor WebPart. In Script Editor WebPart add following code. Create formaction.js file and add your js code in this file.

1. Add script editor WebPart after your display form WebPart.
2. Give reference of jQuery plugin
3. Create formaction.js file give reference of that file after jQuery reference.

Another way you can do it by giving reference of both .js files on your page. Add both jquery.js and formaction.js file reference inside

<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script type="javascript/text" src="[Path of jquery]"></script>
<script type="javascript/text" src="[Path of formaction.js]"></script>
</asp:Content>