Search code examples
csspostcapitalize

Css capitalize won't affect in http-post

I noticed that when I capitalize with css text-transform:capitalize; and send this input with an http-post to another page, it won't affect the value for this form-element.

  1. Why ?
  2. Is there a workaround for it without using php's ucwords() ?
Solution

  • The answers, in brief:

    1. Because CSS changes only the presentation of the data, not the underlying data itself.

    2. Not that I can think of. Unless you're willing to use JavaScript to capitalize individual words prior to form submission?

    If, however, you're willing to use JavaScript:

    var form = document.getElementById('form'),
    input = form.getElementById('input');

function capitalizeInput(elem){
    var inputString = elem.value;
    var capitalizedString = inputString.replace(/(\b[a-z])/g, function(char){return char.toUpperCase();});
    return capitalizedString;
}

form.onsubmit = function(){
    this.value = capitalizeInput(input);
    return false;
};

    JS Fiddle demo.

    This is, obviously, a much simplified demonstration of the capabilities, but is, I think, enough to get you started, albeit only if you intend to go this route. And, if you do, remember that you must validate on the server-side too.

    References: