I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly.
However, when I use jQuery's .val() to get the value of the field, it doesn't show in capitalized form.
var firstName = $('input[name=firstName').val();
var lastName = $('input[name=lastName]').val();
console.log(firstName + " " + lastName);.MyForm {
text-transform: capitalize;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><br>
<label>First Name</label><input class="MyForm" name="firstName"><br>
<label>Last Name</label><input class="MyForm" name="lastName"><br>
</form>When I enter "John" and "Smith" in the input fields, I see them capitalized on the form.
However, in the console, it prints "john smith" in lowercase.