What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Capitalize the first letter of the input?Asked by mgcaledonian13 on December 18, 2016 at 05:10 PM
I am just another lover of JotForm, Deeply in love in fact!!
But could you please see if you can bring forward my request for Capitalisation of names etc on the Notifications, Responses and reports its a pain having to edit them for reports especially the Grid Listing that we add to our webpage, looks unprofessional. iin
This is a re-post of a comment on Year in Review -- A Look Back at 2016
Thank you for your continued support in our product :)
I see that you already have a thread about the capitalization of inputs on this thread link: https://www.jotform.com/answers/764937. The feature is already forwarded to our developers side, unfortunately, it seems like it won't be implemented anytime soon. Rest assure that they are already aware of this request and we will update you on that link if we get any news. Apologies.
However, I see you mentioned if there's a script that you can use. If you are using the form's full source code, then that is possible to capitalize the first letter of the first word on the input text box. Here's an example form and script that I have: https://shots.jotform.com/charlie/upper_case.html
You can see that when you enter a text in the name field, the first letter becomes capitalize.
This is possible by using this script:
function capitalize(str_input, id)
var str_input = str_input.value; //input of the user
var new_str = str_input.toUpperCase() + str_input.slice(1); //capitalize the first letter and append the remaining text string
document.getElementById(id).value = new_str; //insert the new text string in the input text box
I added comments on each line of the code to better explain how it works.
To use the function, you need to add this attribute inside the input element.
This is the input text box element of the First Name field
<input class="form-textbox" type="text" size="10" name="q3_name[first]" id="first_3" />
I then added the new attribute that will trigger the function, this is how it looks like:
<input class="form-textbox" type="text" size="10" name="q3_name[first]" id="first_3" onchange="capitalize(this, this.id);" />
So basically, what that part do is whenever a change is made on the text box input field, it will trigger the function capitalize, "this" refers to the value of the input while "this.id" gets the element ID.
The script I made is somewhat rough, so you might need to further test if it works as expected on your end. The script will basically changed the actual data before submission, so the changed will display in your submissions, reports, notifications, etc...
I hope that helps.