Javascript: Disable textfield don't work

Question

I have tried coding some javascript for form that, when user typing certain word then the textfield below will automatically disable.The problem is, when i the tried the code in jsfiddle the code will run smoothly but when i use it in my project, it don't work. Can anybody explain what wrong with my code.

<script>
function matchWord(e){
if(document.getElementById('uname').value.trim === 'Unknown' || document.getElementById('uname').value.trim === 'unknown'){
    document.getElementById('pword').disabled = true;
    document.getElementById('response').disabled = true;
    alert('you enter bannned name in the field');
 }
else{
 }
}
document.getElementById('uname').onkeyup = matchWord();
</script>

<html>
   <body>
       Name:<input type="text" name="uname" id="uname" placeholder="Username"><br>
       password:<input type="password" name='pword' id='pword' placeholder="password"><br>
       Responsibility:<select id = "response">
                     <option>---Responsibility---</option>
                      </select>
   </body>
</html>

Typo: `function matchWord` (camelCase) vs `= matchword` (lowercase). — Jonathan Lonowski, Mar 08 '17 at 07:08
Have you checked your browser's devtools for errors? One that's possible is explained by "[Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element)" — Jonathan Lonowski, Mar 08 '17 at 07:13
Try putting the Script in the body. Or at least in the tags! Edit: and give it a tag to be safe. — Adam Patterson, Mar 08 '17 at 07:21

score 2 · Answer 1 · answered Mar 08 '17 at 07:24

Problem 1: Typo matchword(), replace it with matchWord();

Problem 2: trim is a method! use document.getElementById('uname').value.trim() instead.

function matchWord(e) {
  if (document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim() === 'unknown') {
    document.getElementById('pword').disabled = true;
    document.getElementById('response').disabled = true;
    alert('you enter bannned name in the field');
  }
}

Name:
<input type="text" name="uname" id="uname" placeholder="Username" onkeyup="matchWord()">
<br> password:
<input type="password" name='pword' id='pword' placeholder="password">
<br> Responsibility:
<select id="response">
  <option>---Responsibility---</option>
</select>

score 2 · Answer 2 · answered Mar 08 '17 at 07:24

First trim() is not a property, its a method. So, you need to change it from trim to trim().

Second you need to assign a function to onkeyup, not call a function.

function matchWord(e) {
    if (document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim === 'unknown') {
        document.getElementById('pword').disabled = true;
        document.getElementById('response').disabled = true;
        alert('you enter bannned name in the field');
    } else {}
}
document.getElementById('uname').onkeyup = matchWord;

Name:<input type="text" name="uname" id="uname" placeholder="Username"><br>
password:<input type="password" name='pword' id='pword' placeholder="password"><br>
Responsibility:
<select id = "response">
<option>---Responsibility---</option>
</select>

score 1 · Answer 3 · answered Mar 08 '17 at 07:22

You are setting as eventhanlder of the KeyUp event the results of your function, and you want to set the function itself.

Try:

document.getElementById('uname').onkeyup = matchWord;

Instead, or add the event handler in the element itself, removing previous line and adding:

<input type="text" name="uname" id="uname" placeholder="Username" onkeyup="matchWord()">

Angelos Chalaris · Answer 4 · 2017-03-08T07:30:04.763

1

There are a few errors in the sample you provided.

First off, names are case-sensitive, so matchWord is not the same as matchword. Be careful!
Secondly, you need to use document.getElementById('uname').onkeyup = matchWord; to assign the function itself to the event, not the result that it returns.
Third and final point, the logic in your method is wrong, as you use trim instead of trim(), which is the exact opposite mistake of the one mentioned above and this returns the function instead of the value. The following snippet works:

function matchWord(e) {
  if (document.getElementById('uname').value.trim() === 'Unknown' ||
    document.getElementById('uname').value.trim() === 'unknown') {
    document.getElementById('pword').disabled = true;
    document.getElementById('response').disabled = true;
    alert('you enter bannned name in the field');
  } else {}
}

document.getElementById('uname').onkeyup = matchWord;

Name:<input type="text" name="uname" id="uname" placeholder="Username"><br> password:
<input type="password" name='pword' id='pword' placeholder="password"><br> Responsibility:
<select id="response">
<option>---Responsibility---</option>
</select>

edited Mar 08 '17 at 07:30

answered Mar 08 '17 at 07:25

Angelos Chalaris

6,611
8
49
75

still failed,i think the problem is from my browser. but still thanks. – Nexz Mar 08 '17 at 07:31
@Nexz what browser are you on? This should work perfectly fine in any modern browser... – Angelos Chalaris Mar 08 '17 at 07:32
it's ok, i have found the answer below. but fyi, i use both chrome and firefox.thanks. – Nexz Mar 08 '17 at 07:39
@Nexz how does this fail exactly, then? What is it that happens when you run it? – Angelos Chalaris Mar 08 '17 at 07:40
alert not function when i'm typing the name, and also it don't disable the both field below it. I doesn't said your code not work, it still run on code snippet tool but only on my browser. – Nexz Mar 08 '17 at 07:43

score 0 · Accepted Answer · answered Mar 08 '17 at 07:23

Below code works fine for me in all browsers

<html>
   <body>
       Name:<input type="text" name="uname" id="uname" placeholder="Username"><br>
       password:<input type="password" name='pword' id='pword' placeholder="password"><br>
       Responsibility:<select id = "response">
                     <option>---Responsibility---</option>
                      </select>
   </body>
   <script>
function matchWord(e){
if(document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim() === 'unknown'){
    document.getElementById('pword').disabled = true;
    document.getElementById('response').disabled = true;
    alert('you enter bannned name in the field');
 }
else{
 }
}
document.getElementById('uname').addEventListener("keyup", function(evt) {
        matchWord(evt);
    }, false);
</script>
</html>

Tip: Try to include at least a brief explanation along with a snippet, detailing what's different from the snippet(s) in the question and why you think the revisions are necessary. — Jonathan Lonowski, Mar 08 '17 at 07:32

score 0 · Answer 6 · answered Mar 08 '17 at 07:25

0

Put:

<script> // stuff </script>

in:

<html> // here </script>

answered Mar 08 '17 at 07:25

Adam Patterson

958
7
13

Javascript: Disable textfield don't work

6 Answers6