Mistalis Mistalis - 1 month ago 19
CSS Question

Capitalize fields in a form

I want to capitalize/uppercase some fields in a HTML form.

HTML

<form role="form" ng-submit="submit()">
<input type="text" class="capitalize" id="firstname" ng-model="first"/>
<input type="text" class="uppercase" id="lastname" ng-model="last"/>
<button type="submit"></button><
</form>


CSS

.uppercase {
text-transform: uppercase;
}

.capitalize {
text-transform: capitalize;
}


When I enter data on the fields it works well, but when
form
is submitted, capitalization is not preserved.

I use an Angular controller/service to send data to my server. Should I edit data on my controller, or could I keep the CSS capitalization ?

Thanks! :)

Answer

Here is a solution. Add to your controller those 2 new functions:

/**
 * Capitalize the first letter of the passed string
 * @param String to be upper cased 
 */
function upperCase(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

/**
 * Capitalize the whole string passed
 * @param String to be capitalize
 */
function capitalize(string) {
    return string.toUpperCase();    
}

In $scope.submit(), You can transform the firstname/lastname as follow:

$scope.submit = function() {
    ...
    $scope.firstname = upperCase($scope.firstname);    
    $scope.lastname = capitalize($scope.lastname);
}
Comments