CODEWITHSUNDEEP
javascript
Nexz
Nexz

Reputation: 93

Javascript: Disable textfield don't work

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>

Upvotes: 1

Views: 94

Answers (6)

Angelos Chalaris
Angelos Chalaris

Reputation: 6707

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>

Upvotes: 1

Adam Patterson
Adam Patterson

Reputation: 958

Put:

<script> // stuff </script>

in:

<html> // here </script>

Upvotes: 0

m87
m87

Reputation: 4511

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>

Upvotes: 2

Saurabh Sharma
Saurabh Sharma

Reputation: 2472

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>

Upvotes: 2

Viji K
Viji K

Reputation: 24

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>

Upvotes: 0

Juan
Juan

Reputation: 3705

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()">

Upvotes: 1

Related Questions