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;
});
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.
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”
$(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.