0

This is my HTML:

<html>
<head>
<script>
function ppid() {
    var ppidtxt = document.getElementById('ppid').value;
    var newppidtxt = ppidtxt.toUpperCase();
    var ppide = document.getElementById('ppid');
    ppide.value = newppidtxt;
}
</script>
</head>
<body>
<form>
  <center><input type="text" id="ppid" class="form-control" name="ppid" placeholder="Personal Project ID" onchange="ppid();" /></center>
</form>
</body>
</html>

I've tried this is JSFiddle, on my local PC, pretty much everywhere but for some reason, whenever I type something in the form's text box with the id "ppid" it isn't capitalizing it. What have I done wrong?

Nat Ritmeyer
  • 5,634
  • 8
  • 45
  • 58
  • You need just CSS actually: `#ppid { text-transform: capitalize; }` – emerson.marini Sep 27 '14 at 08:19
  • @MelanciaUK The real problem is the fact that onchange NEVER works for me, That's what i need a fix for, It's not really the upper-casing part that i need help with. –  Sep 27 '14 at 08:21
  • possible duplicate of [Javascript: "onchange" event does not work with "value" change in "text input" object](http://stackoverflow.com/questions/6826707/javascript-onchange-event-does-not-work-with-value-change-in-text-input-o) – emerson.marini Sep 27 '14 at 08:25
  • possible duplicate of [Why JS function name conflicts with element ID?](http://stackoverflow.com/questions/9158238/why-js-function-name-conflicts-with-element-id) – emerson.marini Sep 27 '14 at 08:27

2 Answers2

0

Try using onkeyup instead, e.g.

<input type="text" onkeyup="this.value=this.value.toUpperCase()" />
Peter
  • 2,654
  • 2
  • 33
  • 44
0

I don't know why this happens, but when onchange is called, 'ppid' contains the HTMLInputElement (probably because of its id).

If you rename the function to something unique (like 'myFunc') it works.

@MelanciaUK brought the answer with this link: Why JS function name conflicts with element ID?

Community
  • 1
  • 1
Jerome WAGNER
  • 21,986
  • 8
  • 62
  • 77