Titlecase in Fields

Ask the Community Get Answers
1

I have a multichoice field with option selected to add a new option. However often user enter lower case option and I want Titlecase data. I’ve played around with some JS to make this happen without luck.

Any ideas? Its also in a modal. Below is one attempt.

$(document).on(‘knack-scene-render.scene_36’, function(event, scene, record) {
// Get the input field element
// Function to convert input to title case
// Function to convert input to title case
function convertToTitleCase(input) {
// Split the input into an array of words
const words = input.toLowerCase().split(" ");

// Convert the first character of each word to uppercase and join them back
const titleCaseText = words.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");

return titleCaseText;

}

// Get all input fields on the webpage
const inputFields = document.querySelectorAll(“#kn-add-option .kn-input input[type=‘text’]”);

// Attach event listener to each input field
inputFields.forEach(inputField => {
inputField.addEventListener(“input”, function() {
// Get the current input value
const inputValue = inputField.value;

  // Convert the input value to title case
  const titleCaseValue = convertToTitleCase(inputValue);

  // Update the input field value with the title case value
  inputField.value = titleCaseValue;
});

});
});
*/

2

Hi @PhilWesley67576, here’s what you need:

$(document).on('knack-view-render.any', function (event, view, data) {

  /*Replace field_XX with your field ID*/
  $('#field_XX').keyup(function() {
    var inputValue = $(this).val();
    var formattedValue = toTitleCase(inputValue);
    $(this).val(formattedValue);
  });

});

function toTitleCase(str) {
  return str.toLowerCase().replace(/(?:^|\s)\w/g, function(match) {
    return match.toUpperCase();
  });
}

This will result in the following, where I am only using lowercase letters.
convertToTitleCase

Hope that helps!

3

Hi Stephen

Thanks for this, and excellent solution. However in this case is a modal popup with an input in a form as below, so no field, might try using the “Input” element.

<form>
<div class="kn-input"><input type="text" autocomplete="off"></div>
<div class="kn-submit"><input type="submit" value="Submit"></div>
</form>
4

Heck… I so over thought this LOL ermm simply CSS

    input {
      text-transform: capitalize;
    }
5

While that will change how is looks, it doesnt actually change the real text being pushed through a form. If you enter “hello” it will look like “Hello” on screen, but in the database its still going to go in as “hello”

6

Hi @PhilWesley67576 you can change the trigger to this:

$(document).on('keyup', '#field_123, #field_456', function () {
      /*Replace field_XX with your field ID*/
  $('#field_XX').keyup(function() {
    var inputValue = $(this).val();
    var formattedValue = toTitleCase(inputValue);
    $(this).val(formattedValue);
  });
});

Replace field_123 with relevant fields this should work on registration forms as well.

Craig