Converting multiple text inputs simultaneously to upper case

Question

I want to do the following things:

Create 3 text boxes and 1 button
Type lower case letters into the 3 boxes
Click on the button
Upon clicking on the button, the letters are converted to upper case

How come the letters I'm typing into the boxes aren't being converted to upper case?

Here's my code:

<html>
<head>
<script>
function upperCase() {
    var x = document.getElementById("form_1");
    x = x.value.toUpperCase();
} 

</script>
</head>
<body>
<form name="form1" id="form_1" method="post">

Enter your name:
<input type="text" name="nameInput">

Enter your street address:
<input type="text" name="streetInput">

Enter your city/state:
<input type="text" name="cityStateInput">

<input type="button" name="upperCaseButton" value="Convert to Uppercase" 
 onclick="upperCase()">

</form>
</body>
</html>

Tim Biegeleisen · Answer 1 · 2016-02-19T00:55:39.840

0

You need to reassign the values of each individual <input> element to its uppercase version. In the following script, I added a helper method which accepts an element id and attempts to change the value of that element to uppercase. The upperCase() function is still the entry point, so you don't need to modify your HTML code at all.

<script>
    function upperCaseInput(var id) {
        var x = document.getElementById(id);
        x.value = x.value.toUpperCase();
    }

    function upperCase() {
        upperCaseInput("nameInput");
        upperCaseInput("streetInput");
        upperCaseInput("cityStateInput");
    }
</script>

Usage:

<input type="button" name="upperCaseButton" value="Convert to Uppercase"
       onclick="upperCase()">

edited Feb 19 '16 at 00:55

answered Feb 19 '16 at 00:52

Tim Biegeleisen

502,043
27
286
360

is there a way to modify the upperCase() function so that I can reference the form once instead of each individual input? – Feb 19 '16 at 00:55
I don't think you can do this with pure JavaScript, but it might be possible using something like JQuery. – Tim Biegeleisen Feb 19 '16 at 00:56
1

If you just want the appearance of the form elements to be in uppercase you can change the css text-transform propprty with js. http://www.w3schools.com/jsref/prop_style_texttransform.asp – Nillervision Feb 19 '16 at 01:05
Some good examples of how to handle the upperCase() function by getting all inputs and looping. [Can be seen in this post](http://stackoverflow.com/questions/2214066/get-list-of-all-input-objects-using-javascript-without-accessing-a-form-obj). Although, CSS method mentioned by @Nillervision removes the need for a button press. – SergeantHacker Feb 19 '16 at 01:13
I don't like the CSS solution partly because if the CSS for the inputs is being used elsewhere on the page, the case may be changed in unwanted places. – Tim Biegeleisen Feb 19 '16 at 01:32

score -1 · Accepted Answer · answered Feb 19 '16 at 01:09

You need to:

1) change the name for id, so you can retrieve each element by the ids.

<form name="form1" id="form_1" method="post">

Enter your name:
<input type="text" id="nameInput">

Enter your street address:
<input type="text" id="streetInput">

Enter your city/state:
<input type="text" id="cityStateInput">

<input type="button" id="upperCaseButton" value="Convert to Uppercase" 
 onclick="upperCase('nameInput'); upperCase('streetInput'); upperCase('cityStateInput');">

</form>

2) call thefunction for every input you want to convert its value to upper case.

upperCase = function(name) {
    var inp = document.getElementById(name);
    inp.value = inp.value.toUpperCase();
}

See ths demo: https://jsfiddle.net/gal007/tagLtyko/

Converting multiple text inputs simultaneously to upper case

2 Answers2