Contents
jQuery Snippet
Here's a handy little snippet to help you capitalize the first letter of a form's text field.
Usage
To use this with Formidable Forms, rename the #field_xxxxxx to the ID of the field you want to apply this to.
If you want to apply this code to more than one field as in the working example below, separate the field IDs with a comma like this:
$("#field_qh4icy2, #field_ocfup12").keydown(function () {Then, copy the code into the After Fields area on the form's Customize HTML page.
Hi Victor, many thanks for this. It works great on a my text fields but not if they are in a repeater. Is there additional code needed to capitalise the first letter of a text field within a repeater?
Glad to hear it’s working for you Phil!
As for the repeater, this is a common issue. I suggest you read this article: https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/.
The bottom line has to do with how repeaters add/delete rows using AJAX. The HTML Document Object Model (DOM) is built in it’s entirety when the web page is loaded. For jQuery to interact with any element on a page, the element has to be registered in the DOM. Rows added through AJAX are not registered in the DOM even though they appear on the page. This means you have to manually trigger an initialization process for every row added to a repeater so the jQuery can interact with it’s elements.
For the Capitalization script, the trick is going to be addressing the new row field programmatically, since it has a dynamically generated name. You’ll have to use wild cards, CSS class, or some other means to address the field and make sure the code is working on the correct element.
Very many thanks, Victor.
As an interim measure, I am using a css class plus a function to change the displayed letter case. But it doesn’t modify the stored value as yours does.
It will do for the time being!
Thanks again,
Phil.
When you use a class as the trigger, you’re only changing the field cosmetically. There’s some additional code that needs to be used to determine the field id that is actually being changed. SOmething like this should work:
var field_id = $(this).closest(“.my-trigger-class”).attr(“id”);
$(field_id).val(_txt);
Is it possible to capitalize 2 words in the same field EG
david costin becomes David Costin
Hi David,
Yes, it’s possible, but it’s much easier if you separate first and last name into separate fields as in this post’s example. If you have first and last name in a single field, see this solution on StackOverflow: https://stackoverflow.com/questions/4878756/how-to-capitalize-first-letter-of-each-word-like-a-2-word-city
Many thanks for your prompt reply and excellent advice