Reputation: 511
I have a page with some 13 textfields. I want to change the case of data in all the textfields to uppercase on click of a button. I can either user Jquery/javascript. I definitely don't want to use CSS-Text-transform property since it does not convert the case actually but just virtually.
Any suggestions as of how can I achieve this task using a single function ?
Thanks, Yeshwanth
Upvotes: 4
Views: 243
Reputation: 10941
If you don't want to use jQuery, you use something like this:
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'text') {
input.value = input.value.toUpperCase();
}
}
If you don't mind using jQuery, something like this will work:
$('input[type=text]').each(function () {
$(this).val($(this).val().toUpperCase());
});
Upvotes: 1
Reputation: 19591
A pure JavaScript solution, if you are looking for one
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" value="Make BIG" onclick="makeBig()" />
<script type="text/javascript" language="javascript">
function makeBig() {
var inputs = document.getElementsByTagName("INPUT");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type.toLowerCase() == 'text')
inputs[i].value = inputs[i].value.toUpperCase();
}
}
</script>
Upvotes: 0
Reputation: 12142
$('input[type=text], textarea').each(function(index, value){
$(this).val($(this).val().toUpperCase();
});
Upvotes: 1
Reputation: 144689
You can use val
method:
$('#button').click(function(){
$('input[type=text]').val(function(i, oldVal){
return oldVal.toUpperCase()
})
})
Upvotes: 9