JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" value="test">
<textarea>test</textarea>
<select name="">
<option value="test">test</option>
</select>
<a href="" id="convert">Click me to convert to uppercase :-)</a>
JavaScript
function formFieldsToUpperCase() {
var inputElements = document.querySelectorAll('input, select, textarea');
for (var i = 0, l = inputElements.length; i < l; i++) {
if (inputElements[i].tagName == 'SELECT') {
inputElements[i].options[inputElements[i].selectedIndex].value = inputElements[i].options[inputElements[i].selectedIndex].value.toUpperCase();
} else {
inputElements[i].value = inputElements[i].value.toUpperCase();
}
}
}
(function() {
document.getElementById('convert').addEventListener('click', function(e) {
formFieldsToUpperCase();
e.preventDefault();
e.stopPropagation();
});
}());