Yeshwanth Kota
Yeshwanth Kota

Reputation: 511

How to change the data in ALL the textfields in a page to uppercase on click of a button

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

Answers (4)

Kristof Claes
Kristof Claes

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

yogi
yogi

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

rism
rism

Reputation: 12142

$('input[type=text], textarea').each(function(index, value){
  $(this).val($(this).val().toUpperCase();
});

Upvotes: 1

Ram
Ram

Reputation: 144689

You can use val method:

$('#button').click(function(){
   $('input[type=text]').val(function(i, oldVal){
       return oldVal.toUpperCase()
   })
})

Upvotes: 9

Related Questions