November 30, 2011

SharePoint: How to clear Metadata and People Editor fields using jQuery

Challenge:

NewForm and EditForm of a custom SharePoint list contain Managed Metadata field and People Editor fields. I need to be able to clear the field values dynamically based on what selections the user makes when filling the form.

Just hiding the fields is not good as I don't want to include an additional column only for storing the value of the radiobutton selection.

image

image

Solution:

This is possible by using few Javascript tricks, and as I'm most familiar with jQuery I decided to use it to accomplish the goal. There are few hidden fields you need to modify in addition to the visible elements.

First you need to surround the fields with DIV's so that it is easier to reference the correct elements.

<asp:RadioButton runat="server" id="presenterSisainen" Text="Sisäinen" GroupName="presenter" />
<div id="presenterUserDiv" style="display:none;">
<SharePoint:FormField ... />
<SharePoint:FieldDescription ... />
</div>
<asp:RadioButton runat="server" id="presenterAsiakas" Text="Asiakas" GroupName="presenter" />
<div id="presenterMetadataDiv" style="display:none;">
<SharePoint:FormField ... />
<SharePoint:FieldDescription ... />
</div>

To clear Metadata field, do this:

jQuery("#presenterMetadataDiv > span > span > input[type='hidden']").val("");
jQuery("div[title='DISPLAYNAMEOFMETADATAFIELD'] > div > span[class$='valid-text']").replaceWith("&#8203;");
jQuery("#presenterMetadataDiv > span span.ms-formvalidation[role='alert']").html("");
jQuery("#presenterMetadataDiv > span > br").remove();

Note: 'DISPLAYNAMEOFMETADATAFIELD' needs to be the display name of the metadata field in question. It can contain spaces, etc. If it contains special characters such as umlauts, remember to save your .js file using UTF-8.

To clear People Editor field, do this:

j("#presenterUserDiv input[id$='HiddenUserFieldValue']").val("");
j("#presenterUserDiv span[id$='UserField']").attr("editoroldvalue", "");
j("#presenterUserDiv input[id$='UserField_hiddenSpanData']").val("");
j("#presenterUserDiv div[name='upLevelDiv']").html("");
j("#presenterUserDiv span[id$='UserField_errorLabel']").html("");

Note: You can use different jQuery selectors to achieve the same result, so above is not the only truth.

3 comments:

  1. Hello,

    The above lines worked me with a few changes:
    $("input[id$='UserField_HiddenUserFieldValue']").val("");
    $("span[id$='_UserField']").attr("editoroldvalue", "");
    $("input[id$='_UserField_hiddenSpanData']").val("");
    $("div[name='upLevelDiv']").html("");
    $("span[id$='UserField_errorLabel']").html("");

    Happy Scripting...

    ReplyDelete
  2. Hello Jussi,

    Great, just the code I was looking for.

    I need to empty a managed metadata field from the client. Your jQuery example works, but replaces the field value with a semicolon. Is there a way to make the field completely empty? (The field itself is not a required field).

    Thanks, Jeroen.

    ReplyDelete
    Replies
    1. I found a solution that works without the semicolon. Try this:
      jQuery("#presenterMetadataDiv > span > span > input[type='hidden']").removeAttr("value");
      jQuery("div[title='DISPLAYNAMEOFMETADATAFIELD'] > div > span[class$='valid-text']").remove();
      jQuery("#presenterMetadataDiv > span span.ms-formvalidation[role='alert']").html("");

      Jeroen.

      Delete