-2

I need a specific input field on the page to have its text changed to uppercase. I am aware that CSS can be used to display uppercase on the page but I need this javascript as the underlying input data has to be uppercase.

I am using javascript below to change the text to uppercase on input fields on my website

function handleInput(e) {
document.getElementsByClassName("bottomtext");
   var ss = e.target.selectionStart;
   var se = e.target.selectionEnd;
   e.target.value = e.target.value.toUpperCase();
   e.target.selectionStart = ss;
   e.target.selectionEnd = se;
}

this is being called via php using: 'oninput' => 'handleInput(event)',

my only problem is that it is being applied to all input fields on the page, but I only want it applied to a specic field with the class "bottomtext". Can someone please help with having this only apply to the specific class. Thank you.

ArfanRasool
  • 3
  • 1
  • 1
    you can delete your code line with `document.getElementsByClassName("bottomtext");` because you do nothing with it. – Mister Jojo Feb 28 '23 at 22:06
  • `'handleInput(event)'` is a sting, not a function – Mister Jojo Feb 28 '23 at 22:08
  • 1
    'this is being called via php' you can't call a js function with PHP, this is impossible to do. – Mister Jojo Feb 28 '23 at 22:10
  • Welcome to Stack Overflow! This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour](https://stackoverflow.com/tour) and read [How to Ask](https://stackoverflow.com/questions/how-to-ask) and **its linked resources** – Mister Jojo Feb 28 '23 at 22:13
  • @MisterJojo `document.getElementsByClassName("bottomtext");` should have been deleted, this was something I was trying to call the specific class. – ArfanRasool Feb 28 '23 at 22:14
  • @MisterJojo ok thanks for the info, i am new to this coding and just wrote this as i have tried it. – ArfanRasool Feb 28 '23 at 22:16
  • I want to believe it, but sorry everything is flawed in your question. (and I'm not one of those who allow themselves to downvote a newbie) – Mister Jojo Feb 28 '23 at 22:18

2 Answers2

0

You can attach an event handler to that element like so:

<input type="text" id="bottomtext">

Next, call the addEventListener function on that element and pass the event function to it like so:

document.getElementById('bottomtext').addEventListener('input', handleInput);
// The handleInput function here

I hope this helps.

Toby Harnish
  • 90
  • 1
  • 9
  • thank you for trying to help. I tried this ```document.getElementsByClassName("bottomtext")[0].addEventListener('input', handleInput); ``` but it seems to work when I try this as pure html but not when the input field is being generated by the php. is there any way of enclosing all this so that i can "call" it via php changing the `'oninput' => 'handleInput(event)',` – ArfanRasool Feb 28 '23 at 22:32
  • Well, when the DOM element is created by PHP, the document.getElementByClassName() method of the document object should be able to find the newly created element. After which, you can attach an event handler to handle the event. – Toby Harnish Feb 28 '23 at 22:52
0

maybe you could try:

function handleInput(e) {
     const value = document.getElementByClassName("bottomtext").value.toUpperCase()
     return value
}

But remember that you have to call the function

Galo Flores
  • 1
  • 3