Change text to UPPERCASE with jQuery

How to convert text to uppercase with jQuery? It is very easy, just follow steps in this brief tutorial. To make things easy this article will provide two demo examples with jQuery code.

jQuery uppercase - change text to uppercase in messagebox

Demo:

Click here to uppercase

In this demo text "To uppercase with jquery!" is changed to uppercase "TO UPPERCASE WITH JQUERY!". When link "Click here to uppercase" is clicked changed text is showed in messagebox.

Explanation for uppercase:

jQuery have toUpperCase method which convert text to UpperCase. Here is a sample code:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<div id="target">
  Click here for uppercase
</div>

<script>
    $('#target').click(function () {
        var strVal = 'To uppercase with jquery!'
        alert(strVal.toUpperCase());
    });
</script>

First line is reference on jQuery library which every page using jQuery must have.

Then we have "Click here for uppercase" link with id target.

Inside script tag we have function which is fired when item with id "target" is clicked. Variable strVal is changed to uppercase with method toUpperCase() and showed in messagebox.

Change text in input textbox to uppercase jQuery

Change to uppercase

 

Above is a link "Change to uppercase" which change text in input text box to uppercase.

Code:

 <div id="Change">
  Change to uppercase
 </div>
<input value="to uppercase" type="text" id="inpChng" />

<script>
    $('#Change').click(function () {
        var strVal = $("#inpChng").val();
        $("#inpChng").val(strVal.toUpperCase());
    });
</script>

In the code above when link in div with id "Change is clicked" value from input text control is taken and changed to uppercase.