CSS property not visible by jQuery

Question

I am making a form for my project. All input field have the same class assigned. In css file i capitalize every word and that is working just fine.

But when i try to get the value of the field with jQuery .val() the word is not capitalized

var name = $('input[name=name').val();
var lastName = $('input[name=lastName]').val();

console.log(name + " " + lastName);

.MyForm {
  text-transform: capitalize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><br>
  <label>Name</label><input class="MyForm" name="name"><br>
  <label>Last Name</label><input class="MyForm" name="lastName"><br>
</form>

In the input field i see John and Smith

and the console prints john smith

CSS just changes the way things are displayed, it doesn't actually change the data. — Barmar, Sep 09 '19 at 21:28
Thanks for the answer. I will make a function that will capitalize my every word in the input field. — Namir Džilić, Sep 09 '19 at 21:35

Quentin · Answer 1 · 2019-09-09T21:41:41.397

0

The value is the value, and when you ask for the value, that is what you get.

CSS describes the look and feel of the content when it is rendered in that element.

Since you are taking the value out of the element and looking at it elsewhere, that CSS doesn't apply.

If you want to transform the actual value (rather than the way the input looks) then you'll need to change it with JavaScript.

edited Sep 09 '19 at 21:41

answered Sep 09 '19 at 21:28

Quentin

914,110
126
1,211
1,335

score 0 · Answer 2 · answered Sep 09 '19 at 21:38

Hello Namir css is just css. That means it only affects Style. The background value of your fields will remains be the same. Try tro use javascript instead.

string.charAt(0).toUpperCase() There is no Capitalize method in js but you can capitalize the first letter of a string.

CSS property not visible by jQuery

2 Answers2