[Forum FAQ] A custom Content Type Picker in NewForm page of SharePoint 2013 list

Question

Scenario:

Add a Drop Down Menu for picking Content Type when in NewForm.aspx page.

Solution:

The example below will show how to add a Drop Down Menu for picking Content Type when in NewForm.aspx page.

1. Download the jQuery API to the "Site Assets" library, then we can reference it in our script like this:

<script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>

2. Create a custom list and add some Content Types into it.

3. This is the complete code in new form page(NewForm.aspx) of this list:

<script type="text/javascript" src="../../SiteAssets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

var listContentTypes = null;

_spBodyOnLoadFunctionNames.push("spReady");

function spReady()
{
  ExecuteOrDelayUntilScriptLoaded(ready, "sp.js");
}

function ready() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getById(_spPageContextInfo.pageListId);

    //get the content types and load the collection
    listContentTypes = oList.get_contentTypes();
    clientContext.load(listContentTypes);
 
    clientContext.executeQueryAsync(Function.createDelegate(this, getContentTypeOfCurrentItemSucceeded), Function.createDelegate(this, onQueryFailed));
}
 
function getContentTypeOfCurrentItemSucceeded(sender, args) 
{    
    var ct_enumerator = listContentTypes.getEnumerator();
    var hAry = {};

    while (ct_enumerator.moveNext()) 
    {
        var ct = ct_enumerator.get_current();
        hAry[ct.get_id().get_stringValue()] = ct.get_name();
    }

    var $t = $("#onetIDListForm");
    createSelectBefore($t, hAry);
}

function onQueryFailed()
{
    console.log("Failed");
}

function createSelectBefore($t, hash)
{
  var sel1 = "<span>Content Type</span><select id='ctp'>";
  var option1 = "<option title='";
  var option2 = "'>";
  var option3 = "</option>";
  var sel2 = "</select><br>";

  var t1 = sel1;
  
  var len = hash.length;
  for(var name in hash)
  {
    t1+=option1+name+option2+hash[name]+option3;
  }
  t1+=sel2;
  $(t1).insertBefore($t);
  
  //selected an option
  var s = location.search;
  
  //if not the default content type
  if(s.indexOf(getParameterByName("ContentTypeId"))>0)
  {
    $("#ctp").val(hash[getParameterByName("ContentTypeId")]);
  }
  //if it is the default content type, get the first result
  else
  {
    $("#ctp").val(hash[first(hash)]);
  }

  //onchange event
  $("#ctp").change(function(){

    //get contenttypeid, redirect
    window.location = _spPageContextInfo.serverRequestPath+"?ContentTypeId="+$(this).find("option:selected").attr('title');

  });
}

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function first(obj) {
    for (var a in obj) return a;
} 

</script>

When in NewForm.aspx page, there will be a Content Type Picker at the head of the form:

Choose an option:

The corresponding fields show up:

Happy coding!

---

Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.