CODEWITHSUNDEEP
jquerycss
abcid d
abcid d

Reputation: 2953

JQuery Lower Case Text

I have many fields containing data from the database. The text is all cap!

I have tried text-transform: capitalize; The first letter is already uppercase and this CSS cannot lower the rest of letters. Then I add 1 more class text-transform: lowercase;, it will take either one.

I am planing to use JQuery to lower all the text and then use CSS to do capitalize.

Somehow my JQuery syntax doesn't work out. Please help. LIVE CODE

JS

$(document).ready(
    function(){
$('#tester').val($(this).val().toLowerCase());
    });

Upvotes: 0

Views: 1697

Answers (5)

JayB
JayB

Reputation: 1601

Replace "$(this)" with "$('#tester')"

$(document).ready(
    function(){
$('#tester').val($('#tester').val().toLowerCase());
    });

In that context, "this" doesn't refer to '#tester'

Upvotes: 0

charlietfl
charlietfl

Reputation: 171700

Your problem is this is actually the window. Also val() is used for form controls to set/get value

You can use text(function) to do it:

$('#tester').text(function(_, val){
    return val.toLowerCase();
});

DEMO

Upvotes: 0

Leonardo Delfino
Leonardo Delfino

Reputation: 1498

Your problem is with this scope that reference window.

Try this:

var $tester = $('#tester');    
$tester.text($tester.text().toLowerCase());
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>

<div id="tester">HTHT HTHTRH HTH RTGHWS HTHT NBGB S</div>

Upvotes: 2

Jacob G
Jacob G

Reputation: 14172

A <div> does not have a value, therefore you cannot use .val()! Use html(), or text() instead: 

$(function() {
var test = $('#tester')
test.html(test.html().toLowerCase());
});

JSFiddle

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22998

You don't need jQuery to convert the text to lowercase, use JavaScript.

var tester = document.getElementById('tester');
tester.innerHTML = tester.innerHTML.toLowerCase();
<div id="tester">HTHT HTHTRH HTH RTGHWS HTHT NBGB S</div>

Upvotes: 2

Related Questions