# Titlecase in Fields

**URL:** <https://forums.knack.com/t/titlecase-in-fields/14600>\
**Category:** Get Answers\
**Created:** [July 14, 2023, 10:51pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600 "2023-07-14T22:51:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [July 14, 2023, 10:51pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600/1 "2023-07-14T22:51:50Z")

</div>

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;
});

```

});  
});  
\*/

---

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [July 17, 2023, 5:22am UTC](https://forums.knack.com/t/titlecase-in-fields/14600/2 "2023-07-17T05:22:14Z")

</div>

Hi @PhilWesley67576, here’s what you need:

```auto
$(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](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/2/2ef714b42c7f506695a54186a80eabb0b5870b49.gif)

Hope that helps!

---

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [July 17, 2023, 7:51pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600/3 "2023-07-17T19:51:56Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [July 17, 2023, 8:00pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600/4 "2023-07-17T20:00:40Z")

</div>

Heck… I so over thought this LOL ermm simply CSS

```auto
    input {
      text-transform: capitalize;
    }
 

```

---

<div class="post-metadata">

**Author:** ![Irfan](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@Irfan](https://forums.knack.com/u/Irfan)\
**Post date:** [February 6, 2024, 8:26pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600/5 "2024-02-06T20:26:41Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [February 6, 2024, 8:51pm UTC](https://forums.knack.com/t/titlecase-in-fields/14600/6 "2024-02-06T20:51:41Z")

</div>

Hi @PhilWesley67576 you can change the trigger to this:

```auto
$(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