SharePoint 2013 Show/Hide Form Fields

Question

I'm seeking help with an OOTB SharePoint 2013 list form. Disclaimer, I'm not a developer or programmer by any means, however I do understand how/where to apply code. And I can follow simple instructions...

All I'm looking to accomplish is hiding certain fields on my form until a specific value has been input. I can use either a checkbox field or a choice field. I will only need to display the additional fields when a specific value is selected or checkbox is checked. Once that field is populated with the appropriate value I want to display the other fields.

I know this isn't a difficult task but I have attempted to get this done with out luck. Any suggestions will be greatly appreciated.

Answer 1

Yes you can show and hide theses fields on demand based on your choice field selected value via Jquery without using SharePoint Designer by doing the following :

• Open your new form via the browser.
• Edit Page .

• Add web Part > Add Script Editor .

Add the following code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

$(document).ready(function(){
//Show/hide columns based on Choice Field Selection
$("select[title='Field1']").change(function() {
if ($("select[title='Field1']").val() != "Yes")
{
$('nobr:contains("Field2")').closest('tr').hide();
}
else
{
$('nobr:contains("Field2")').closest('tr').show();
}
});
});

</script>

• Replace Field1 in [title='Field1'] with your choice field name
• Replace Field2 in $('nobr:contains("Field2")').closest('tr').show(); with the your field name that you need to hide based on your selection.

For step by step guide for New/ Edit / Display Form check Show / Hide fields based on choice field selection using JQuery in SharePoint

Answer 2

Unless you really want to load a 90K library and jump through complex jQuery hoops...

You can use the Native JavaScript TreeWalker API, available since IE9

You need 10 lines of standard JavaScript code, extracting the <!-- ---> comments from the HTML

Execute this code after a Form is displayed
note: does not work on Modern Experiences, as the Form is no longer a Table with TRs

var formCSI = new function (form){
    var tree = document.createTreeWalker(form,128);//standard since IE9, get COMMENTS
    while (TR=tree.nextNode()) {//loop all found <!-- comments -->
        eval(TR.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
        while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR
        this[CSI_InternalName]=TR;
    }
}(document.querySelector('.ms-formtable'));
formCSI.Title.style.background='blue';
formCSI.Title.style.display='table-row';// 'none' to hide
//console.table(formCSI);//list all felds in console

Use CSI_Name instead CSI_InternalName to reference by DisplayName, but those can have spaces so you then need to use fields['Title'].style( ) notation

iJS iForm