Convert string to lower case using JavaScript

Today we will have a look at how we can convert content of the form field from upper to lower case with a click of a mouse using JavaScript toLowerCase() function and some jQuery.

First let's create a simple form with the textarea like so:

<form method="post">
	<label for="keywords">
		Keywords: 
		(<a href="#" class="toLower" data-target="keywords">To lower case</a>)
	</label>
	<textarea name="keywords" id="keywords" cols="" rows="" class="area"></textarea>
</form>

Now let's create the folder called js and put inside the latest version of jQuery as well as create the file called core.js. Once you've done this - include both of these files before the closing body tag of your page:

<script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/js/core.js" type="text/javascript"></script>

Make sure that the version of jQuery corresponds to the one you've downloaded from the jQuery's website.

Next open the core.js and create a new object called systemObject and the method called toLower:

var systemObject = {
	toLower : function(obj) {
		obj.live('click', function() {
			var thisTarget = $(this).attr('data-target');
			var thisValue = $('#' + thisTarget).val();
			$('#' + thisTarget).val(thisValue.toLowerCase());
			return false;
		});
	}
};

The above method will process request on click event assigned to the obj, which will be passed to this method from within the document ready section in a few moments. Once triggered, first we obtain the value assigned to the data-target attribute of our trigger. This will then be used to identify the object with the same id attribute and get its current value, which will then be converted to lower case using JavaScript's toLowerCase function and fed back to the same field using jQuery's val() method. The return false; at the end ensures that after all this the default link behaviour is not executed.

Now that our object and method are ready, let's call it from within the document ready:

$(function() {
	
	systemObject.toLower($('.toLower'));
	
});

You can now test the functionality by typing some characters in upper case and clicking the To lower case link.

Add a comment