Hello everyone, Today I am writing this blog to tell you how we can hide/show SharePoint new/edit forms fields using on JQuery.

I am new be to JQuery, but with the help of google I have figured out something at last so thought of sharing with you all.

Following are the steps which you can execute to achieve the above

1. Once your list is created or already existing than go to List Settings -> Advance Settings -> (Scroll at the bottom of the page) Under dialog section -> Set Launch form in a dialog as No

2. Once you have done with it, create your fields in list. I have created as follows

Title – Single Line of Text (By default)

Offered – Checkbox (Yes/No)

Offered By Whom – People and Group

Offered To Whom – People and Group

3. Scenario: I have a new form page where I have 2 fields as “Offered By Whom” and “Offered To Whom” which will be by default hidden (on page load). I will use the above fields where, when user checks “Offered” both the fields “Offered By Whom” and “Offered To Whom” will be visible. Once unchecked they will be again hidden.

By default, “Offered By Whom” and “Offered To Whom” fields are hidden

After checking the check box, fields are visible

4. Implementation

1. Go to you new form page (newform.aspx)
2. Edit it in design mode (add query string in URL like this newform.aspx?displaymode=design)
3. Add below script in content editor web-part on the page (You can use this nice article http://sympmarc.com/2011/03/29/adding-script-into-a-content-editor-web-part-cewp-in-sharepoint-2010/ which explains to add script in CEWP on the SharePoint page)

Below is the script that needs to be added

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

</script>

<script type="text/javascript">

$(document).ready(function()

{

    //alert('onload');

    //Hides Field on load

    $("nobr:contains('Offered By Whom')").parent('h3').parent('td').parent('tr').hide();

    $("nobr:contains('Offered To Whom')").parent('h3').parent('td').parent('tr').hide();

   

    //Get the checkbox value weather checked or not

    $("input[title$='Offered']").click(function()

    {

        //If checkbox is checked then hide the fields

        if (this.checked)

        {

            //alert('inside show for offered');

            $("nobr:contains('Offered By Whom')").parent('h3').parent('td').parent('tr').show();

            $("nobr:contains('Offered To Whom')").parent('h3').parent('td').parent('tr').show();

        }

        else

        {

            //alert('inside hide for offered');

            $("nobr:contains('Offered By Whom')").parent('h3').parent('td').parent('tr').hide();

            $("nobr:contains('Offered To Whom')").parent('h3').parent('td').parent('tr').hide();

        }

    });

   

});

</script>

Note: Replace my fields (Offered, Offered By Whom, Offered To Whom) with your field names. The field names would be simply title name what you see in SharePoint form.

Script Explanation:

The script does nothing but checks if checkbox is checked and than hide necessary fields.

The $("nobr:contains('Offered By Whom')").parent('h3').parent('td').parent('tr').hide comes from the HTML element where JQuery tries to find the parent element from’nobr’ which contains the keyword ‘'Offered By Whom’ till ‘tr’ and hides the entire ‘tr’

4. Lastly save and test the page

Please correct me if am wrong somewhere as I am new to Jquery. There could be possibility that I have missed something or there could be more optimized way to implement the same so please share if you know optimized code.

Also above functionality can be achieved using SharePoint designer and InfoPath form.

Thanks.