3

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.

2

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 .

enter image description here

  • Add web Part > Add Script Editor .

enter image description here

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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