Create dictionary that stores field input control at SharePoint NewForm/EditForm pages (jQuery required)

sp-formfieldinputdict.js

/**
 * sp-formfieldinputdict.js
 *
 * (c) 2018 koohq. Licensed under CC0.
 * https://creativecommons.org/publicdomain/zero/1.0/legalcode
 */

var formFieldInputDict = {};

// Promise that indicates assigning ID completed
var formFieldInputDictReady;

(function initFormFieldInputDictIfSatisfied() {
  var fileName = location.pathname.split('/').pop().toLowerCase();
  switch (fileName) {
    case 'newform.aspx':
    case 'editform.aspx':
      init();
    default:
      break;
  }

  function init() {
    formFieldInputDictReady = new Promise(function(resolve, reject) {
      try {
        ExecuteOrDelayUntilScriptLoaded(function() {
          var renderedFieldCount = 0;
          var fieldSchemas = [];
          SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            OnPostRender: function(renderCtx) {
              renderedFieldCount++;
              fieldSchemas.push(renderCtx.ListSchema.Field[0]);
              if (renderedFieldCount === Object.keys(renderCtx.Templates.Fields).length) {
                fieldSchemas.forEach(storeFormFieldInput);
                resolve();
              }
            }
          });
        }, 'clienttemplates.js');
      } catch (e) {
        reject();
      }
    });
  }

  function storeFormFieldInput(fieldSchema) {
    var dict = formFieldInputDict;
    var fld = fieldSchema;

    var fieldControlIdPrefix = fld.Name + '_' + fld.Id + '_';
    var fieldInputElementDefaultId = fieldControlIdPrefix + '$' + fld.Type + 'Field';
    var fieldSelectBoxElementId = fieldControlIdPrefix + '$DropDownChoice';

    var fillInRadioId;
    var fillInTextId;

    switch (fld.Type) {
      case 'Text':
      case 'Number':
      case 'Currency':
      case 'Boolean':
        // input[type="text"] or input[type="checkbox"]
        dict[fld.Name] = $(document.getElementById(fieldInputElementDefaultId));
        break;
      case 'Note':
        switch (fld.RichTextMode) {
          // RichTextPlain or RichTextCompatible
          case 0:
            // textarea
            var textAreaId = fieldControlIdPrefix + '$TextField';
            dict[fld.Name] = $(document.getElementById(textAreaId));
            break;
          // RichTextFullHtml
          case 1:
            // div[role="textbox"]
            var textboxDivId = fieldControlIdPrefix + '$TextField_inplacerte_label';
            dict[fld.Name] = $(document.getElementById(textboxDivId));
            break;
          default:
            dict[fld.Name] = $();
            break;
        }
        break;
      case 'Choice':
        switch (fld.FormatType) {
          // DropDownChoice
          case 0:
            if (fld.FillInChoice) {
              dict[fld.Name] = {};

              // input[type="radio"]
              var dropDownButtonId = fieldControlIdPrefix + 'DropDownButton';
              dict[fld.Name].DropDownButton = $(document.getElementById(dropDownButtonId));

              // select
              dict[fld.Name].DropDownChoice = $(document.getElementById(fieldSelectBoxElementId));

              // input[type="radio"]
              var fillInButtonId = fieldControlIdPrefix + 'FillInButton';
              dict[fld.Name].FillInButton = $(document.getElementById(fillInButtonId));

              // input[type="text"]
              var fillInChoiceId = fieldControlIdPrefix + '$FillInChoice';
              dict[fld.Name].FillInChoice = $(document.getElementById(fillInChoiceId));
            } else {
              // select
              dict[fld.Name] = $(document.getElementById(fieldSelectBoxElementId));
            }
            break;
          // RadioButtonChoice
          case 1:
            var radioTableId = fieldControlIdPrefix + 'ChoiceRadioTable';

            if (fld.FillInChoice) {
              dict[fld.Name] = {};

              var $radioTable = $(document.getElementById(radioTableId));
              var radioButtonChoiceFieldIdPrefix = fieldControlIdPrefix + '$RadioButtonChoiceField';

              // input[type="radio"]
              dict[fld.Name].RadioButtonChoice = $radioTable.find('input[id^="' + radioButtonChoiceFieldIdPrefix + '"]')
                .filter(function(i, e) {
                  return isFinite($(e).prop('id').replace(radioButtonChoiceFieldIdPrefix, ''));
                });

              // input[type="radio"]
              fillInRadioId = radioButtonChoiceFieldIdPrefix + 'FillInRadio';
              dict[fld.Name].FillInRadio = $(document.getElementById(fillInRadioId));

              // input[type="text"]
              fillInTextId = radioButtonChoiceFieldIdPrefix + 'FillInText';
              dict[fld.Name].FillInText = $(document.getElementById(fillInTextId));
            } else {
              // input[type="radio"]
              dict[fld.Name] = $(document.getElementById(radioTableId)).find('input[type="radio"]');
            }
            break;
          default:
            dic[fld.Name] = $();
            break;
        }
        break;
      case 'MultiChoice':
        var multiChoiceTableId = fieldControlIdPrefix + 'MultiChoiceTable';
        if (fld.FillInChoice) {
          dict[fld.Name] = {};

          var $multiChoiceTable = $(document.getElementById(multiChoiceTableId));
          var multiChoiceOptionIdPrefix = fieldControlIdPrefix + 'MultiChoiceOption_';

          // input[type="checkbox"]
          var multiChoiceOptionIdPrefix = fieldControlIdPrefix + 'MultiChoiceOption_';
          dict[fld.Name].MultiChoiceOption = $multiChoiceTable.find('input[id^="' + multiChoiceOptionIdPrefix + '"]');

          var multiChoiceFillInPrefix = fieldControlIdPrefix.slice(0, -1) + 'FillIn';

          // input[type="checkbox"]
          fillInRadioId = multiChoiceFillInPrefix + 'Radio';
          dict[fld.Name].FillInRadio = $(document.getElementById(fillInRadioId));

          // input[type="text"]
          fillInTextId = multiChoiceFillInPrefix + 'Text';
          dict[fld.Name].FillInText = $(document.getElementById(fillInTextId));
        } else {
          // input[type="checkbox"]
          dict[fld.Name] = $(document.getElementById(multiChoiceTableId)).find('input[type="checkbox"]');
        }
        break;
      case 'DateTime':

        var dateInputId = fieldInputElementDefaultId  + 'Date';

        switch (fld.DisplayFormat) {
          case 0:
            // input[type="text"]
            dict[fld.Name] = $(document.getElementById(dateInputId));
            break;
          case 1:
            var dateTimeFieldInputElementId = {
              Date: dateInputId,
              Hours: dateInputId  + 'Hours',
              Minutes: dateInputId + 'Minutes'
            };

            dict[fld.Name] = {};
            // input[type="text"]
            dict[fld.Name].Date = $(document.getElementById(dateTimeFieldInputElementId.Date));
            // input[type="text"]
            dict[fld.Name].Hours = $(document.getElementById(dateTimeFieldInputElementId.Hours));
            // input[type="text"]
            dict[fld.Name].Minutes = $(document.getElementById(dateTimeFieldInputElementId.Minutes));
            break;
          default:
            dict[fld.Name] = $();
            break;
        }
        break;
      case 'Lookup':
        if (fld.AllowMultipleValues) {
          dict[fld.Name] = {};

          // select
          var selectCandidateId = fieldControlIdPrefix + 'SelectCandidate';
          dict[fld.Name].SelectCandidate = $(document.getElementById(selectCandidateId));

          // input[type="button"]
          var addButtonId = fieldControlIdPrefix + 'AddButton';
          dict[fld.Name].AddButton = $(document.getElementById(addButtonId));

          // input[type="button"]
          var removeButonId = fieldControlIdPrefix + 'RemoveButton';
          dict[fld.Name].RemoveButton = $(document.getElementById(removeButonId));

          // select
          var selectResultId = fieldControlIdPrefix + 'SelectResult';
          dict[fld.Name].SelectResult = $(document.getElementById(selectResultId));
        } else {
          // select
          dict[fld.Name] = $(document.getElementById(fieldInputElementDefaultId));
        }
        break;
      case 'User':
      case 'UserMulti':
        // div.sp-peoplepicker-topLevel
        var clientPeoplePickerId = fieldControlIdPrefix + '$ClientPeoplePicker';
        dict[fld.Name] = $(document.getElementById(clientPeoplePickerId));
        break;
      case 'URL':
        // Not URL but Url
        var urlFieldIdPrefix = fieldControlIdPrefix + '$UrlField';

        var urlFieldInputElementId = {
          Url: urlFieldIdPrefix + 'Url',
          Description: urlFieldIdPrefix + 'Description'
        };
        dict[fld.Name] = {};
        // input[type="text"]
        dict[fld.Name].Url = $(document.getElementById(urlFieldInputElementId.Url));
        // input[type="text"]
        dict[fld.Name].Description = $(document.getElementById(urlFieldInputElementId.Description));
        break;
      case 'OutcomeChoice':
        // select
        dict[fld.Name] = $(document.getElementById(fieldSelectBoxElementId));
        break;
      default:
        dict[fld.Name] = $();
        break;
    }
  }
})();