<form id="nameForm" class="w-50 mx-auto my-3" action="javascript:void(0);">
  <div class="input-group w-50 mb-3 mx-auto">
    <div class="input-group-prepend input-group-text">%</div>
    <input id="namePrefix" type="text" class="form-control" value="N" placeholder="PREFIX">
    <input id="nameMaxLen" class="form-control" type="number" value="12" min="1">
  </div>
  <input id="nameInput" type="text" class="form-control" placeholder="Name">
</form>
<p><code id="nameOutput"></code></p>

p {
  font-size: 1.25em;
}

document.forms.nameForm.addEventListener("input", event => {
  console.log(event);
  if (event.target.tagName === "INPUT") updateName();
});

function updateName() {
  let name = Array.from(document.getElementById("nameInput").value),
      prefix = document.getElementById("namePrefix").value.toUpperCase();
  document.getElementById("nameOutput").textContent = name.length ? `IF ${
    name.map((c, i) => `%${prefix}${i} = ${c.charCodeAt()}`).join(" AND ")
  } ${
    name.length < +document.getElementById("nameMaxLen").value ? `AND %${prefix}${name.length} = 0` : ""
  } THEN` : "";
}