Set a FormField value in SharePoint

Question

I currently have the following:

    <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField runat="server" id="ff16{$Pos}" ControlMode="New" FieldName="Dept_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff16',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Vessel_x0020_Name')}" Visible="False"/>
    <SharePoint:FieldDescription runat="server" id="ff16description{$Pos}" FieldName="Dept_x0020_Name" ControlMode="New"/>
    </td>

What I want to be able to do is hide the entry on a new item form. I can hide it via the properties and visible to false; but I want to set the value (single line text) e.g. Department 429, independent from the user.

I have tried setting the value option but I just can't set it - currently I am setting the field using the Default value option entered, but this is very crude and I do not wish to continue doing so.

Ideally I'd do this with javascript, but I have found many things saying jQuery may work instead but I just cannot make it work - so can someone assist and tell me how I convert this field into what I want it to be rather than what the user may enter?

Answer 1

I would add a content-editor or script webpart ("edit page" => add webpart) and than hide it via Javascript/jQuery.

$(#domId).hide();

You can still set values to hidden fields

$(#'DOM_ID_OF_THE_FORM_FIELD').val('your new value');

jQuery actually IS Javascript. It is a framework to manipulate html. To use it in Sharepoint you have to include it. You can also do this in the webpart (although it is not optimal).

It could look like this:

<script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script language="Javascript" type="text/javascript">
    $(#'DOM_ID_OF_THE_FORM_FIELD');
    $(#'DOM_ID_OF_THE_FORM_FIELD').val('your new value');
</script>

The best way to add a webpart is to create a new html file and store it in a central library and than just link the path in the webpart (but you can also just add the code). Also you better download jQuery and store it in the library as well instead of linking to google

Answer 2

This worked in my test case for a field called 'field1' - it set the value while hiding the field. It's better not to put in specific DOM IDs if you can avoid it but grab them dynamically. The nobr approach will work on the display form as well

<script src="<whereever>/jQuery_3.2.1.js" type="text/javascript"></script>
<script>

$( document ).ready(function() {
    console.log( "ready!" );
    alert('hi'); 

     $("input[title^='Field1']").val("dept xxx");

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


</script>

Answer 3

When you use ASP controls or SharePoint controls with attributes ID="something" and runat="server", the control ID on DOM changes as it appends all the parent controls id along with an underscore into the ID. May be because of this you are not able to run your JS code. In such situation, always use web browser developer tools to inspect your control and check the ID.

Also note that there is an attribute available which stops this auto appending parents controls ID. The attribute is known as "ClientIDMode" and the property is "Static". So the code will be following:

<SharePoint:FormField runat="server" id="myField" ClientIDMode="Static" />

Now using ClientIDMode="Static" you'll always get the same ID in DOM, as you specified on control. Now you can use JS/JQ to work on this control.

Using JS:

// Hide the control using using following statement.
document.getElementById("myField").style.display = "none";
// Set the value of control.
document.getElementById("myField").value = "your_value";

Using jQuery (JQ):

$("#myField").hide();
$("#myFeild").val("your_value");