New item entry form: how to hide 2 fields with a code in SP designer NewForm.aspx

Question

I need to hide 2 fields from NewForm.aspx (the edit and view can stay the same). I have seen around tutorials on how to do it with Infopath and linking it to the permission of the user and I would like to avoid it. Is there a simple code to add to the file? Please also state where to place the eventual code.

Answer 1

You can hide theses fields 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

$('nobr:contains("Field1")').closest('tr').hide();

$('nobr:contains("Field2")').closest('tr').hide();
});

</script>

• Replace Field1 ,Field2 with your fields name

If you need to hide fields based on choice field check Show / Hide fields based on choice field selection using JQuery in SharePoint

See also Show / Hide fields based on a dropdown selection using SPUtility.js

Answer 2

• jQuery solutions are so 2016... since IE9 everything can be done as easily with JavaScript

• When you do not have to support pre IE9 browsers you can use vanilla JavaScript
  You have to copy/paste 5 more lines of code compared to the jQuery approach,
  but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

1. Find Field by definition in (green) <!-- comment -->
2. 'walk up the DOM' to its TR
3. Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = function (form){

function getComments(element) {
    function acceptNode() {     // IE *requires* this argument where other browsers don't.
        return NodeFilter.FILTER_ACCEPT;
    }

    var safeFilter = acceptNode;// IE *requires* this argument where other browsers don't.
    safeFilter.acceptNode = acceptNode;
    return document.createTreeWalker(element, NodeFilter.SHOW_COMMENT, safeFilter, false);
}

  var tree=getComments(form);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  return this;//return formCSI as object
}(document.querySelector('.ms-formtable'));//IIFE execute function immediatly

//formCSI now is an object referencing all Form Row TR elements
formCSI.Title.style.background='pink';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

• How to place "Description" field in List under the field name itself?