Input text needs a case change when button is clicked. Having trouble creating JS for this

Question

Input text needs a case change when button is clicked. Having trouble creating JS for this

3.7k Views Asked by AudioBubble At 19 October 2024 at 16:36

I need to create two input text boxes that when the UpperCase button is clicked the input text is returned all in caps and when the LowerCase button is clicked the input text is returned in lower case. So for example:

Text: SuNsHiNe ToDaY

(upper case button)= SUNSHINE TODAY
(lower case button)= sunshine today

I have pasted the html code below and need help creating the JS code:

<!doctype html>
<html>
  <head>
    <script src='../p3-case.js'></script>
  </head>
  <body>
    <form action="demo_form.asp" id="demo_form">
      Phrase:
      <input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
      <br>
      <input type="button" id="btn1" value="upperCase"/>
      <input type="button" id="btn2" value="lowerCase"/>
    </form>
  </body>
</html>

Original Q&A

There are 4 best solutions below

**Anant Dabhi** · Answer 1

I think you not need to use any external js just using Jquery

You need to use toLowerCase() and toUpperCase()

$("#btn1").click(function(){

var input = $("#input1");
input.val(input.val().toUpperCase());

});


$("#btn2").click(function(){

var input = $("#input1");
input.val(input.val().toLowerCase());

});

Here is sample of jsbin JSBIN

**Lance** · Answer 2

Here you go:

<!doctype html>
<html>
<head>
  <script>
  function upper()
  {
 var uc = document.getElementById('input1').value;
 document.getElementById('input1').value = uc.toUpperCase();
  }

  function lower()
  {
 var lc = document.getElementById('input1').value;
 document.getElementById('input1').value = lc.toLowerCase();
  }
  </script>
</head>
<body>
  <form action="demo_form.asp" id="demo_form">
  Phrase:
  <input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
  <br>
  <input type="button" id="btn1" value="upperCase" onclick="upper();">
  <input type="button" id="btn2" value="lowerCase" onclick="lower();">
</form>
</body>
</html>

**eddytnk** · Answer 3

This code works perfectly for me

<!doctype html>
<html>
<head>
    <script >
    function toUpper(){

        var obj = document.getElementById("input1");
        var str = obj.value;
        var res = str.toUpperCase();
        obj.value = res;
    }
    function toLower(){

        var obj = document.getElementById("input1");
        var str = obj.value;
        var res = str.toLowerCase();
        obj.value = res;
    }

    </script>
</head>
<body>
    <form action="demo_form.asp" id="demo_form">
  Phrase:
  <input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
  <br>
  <input type="button" id="btn1" onClick='toUpper()' value="upperCase";">
  <input type="button" id="btn2" onClick='toLower()' value="lowerCase">
</form>
</body>
</html>

**Jailbr3ak** · Answer 4

writing from my tablet but i try my best! :)

Pure JavaScript:

Add onclick event to the button:

<input type="button" onclick="toupp()" id="btn1" value="upperCase";">

Then the functions

    <script>
var toupp = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.value.toUpperCase();
}



and the other function:

var tolow = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.toLowerCase();
}

</script>

Input text needs a case change when button is clicked. Having trouble creating JS for this

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ONCLICK

Related Questions in UPPERCASE

Related Questions in LOWERCASE

Trending Questions

Popular # Hahtags

Popular Questions