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

3.7k views Asked by At

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>

4

There are 4 answers

0
Anant Dabhi On

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

0
Lance On

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>

0
eddytnk On

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>
0
Jailbr3ak On

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>