How to make first letter in a persons...

User 2902462 Photo


Registered User
45 posts

When someone fills out a form with their name and they don't use a capital letter. How can I change it to a capital letter as they type? This is in the Web Form Builder.
David Doyle
User 187934 Photo


Senior Advisor
20,181 posts

Hi David,
I did a quick search and found some code on Stack overflow that should work for ya.
http://jsfiddle.net/9zPTA/31/
I altered it to make it work correctly with the formbuilder so you can use the code in a html element. The only thing to do is to change the text1 to the name of your input.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jQ = $.noConflict(true);
// version 1
jQ(document).ready(function () {
jQ('input[name="text1"]').on('keydown', function(event) {
if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
var jQt = jQ(this);
event.preventDefault();
var char = String.fromCharCode(event.keyCode);
jQt.val(char + jQt.val().slice(this.selectionEnd));
this.setSelectionRange(1,1);
}
});

});
</script>

Here you can see it working.
http://progrower.coffeecup.com/forms/capitalize-first-letter/?action=confirmation
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2902462 Photo


Registered User
45 posts

I put the code in and it worked just fine for the first name. My input has a first and last name in one field. Also I have 4 name input fields. Can one script be made to address each of the four and the first and last name in the same field?
Thank you for all of your help.
David Doyle
User 187934 Photo


Senior Advisor
20,181 posts

Version II
Change the text1 and text2 to match your input names
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jQ = $.noConflict(true);
// version 2
function Cap_Words(str)
{
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

}

jQ(document).ready(function () {
jQ('input[name="text1"],input[name="text2"]').on('keydown', function(event) {
if(jQ('input[name="text1"]').val()!=''){
jQ('input[name="text1"]').val(Cap_Words(jQ('input[name="text1"]').val()));
}
if(jQ('input[name="text2"]').val()!=''){
jQ('input[name="text2"]').val(Cap_Words(jQ('input[name="text2"]').val()));
}
});

});

</script>

Working here.
http://progrower.coffeecup.com/forms/ca … st-letter/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2902462 Photo


Registered User
45 posts

Thank you for your help. I made some additions to your script. I have 4 names on my form. This works
P1-F first name
P1-L last name
I thought maybe you could make this script a lot cleaner. Could you put variables in so that I only have to change a name in one location.
Attachments:
David Doyle
User 187934 Photo


Senior Advisor
20,181 posts

Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jQ = $.noConflict(true);
// version 3
function Cap_Words(str)
{
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
jQ(document).ready(function () {
jQ('input[name^="P"]').on('keydown', function(event) {
jQ('input[name^="P"]').each(function(){
if(jQ(this).val()!=''){
jQ(this).val(Cap_Words(jQ(this).val()));
}
});
});
});
</script>

Working here.
http://progrower.coffeecup.com/forms/ca … st-letter/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2902462 Photo


Registered User
45 posts

Eric you wrote a script for me to change the first letter of the first and last name capital. I'm trying to use From Designer. I tried to use the script in that program but does not work. My input field is ( Name ). Any ideas?
David Doyle
User 187934 Photo


Senior Advisor
20,181 posts

Where did you place he script? Can you share a link to the form?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.