How do I detect when an input is changed?

Question

Via JavaScript, PHP, or HTML. I want to do this to check if a username is allowed (on our side).

Sorry for not elaborating too much. If the username is too short, a message will appear next to it (I will do this part) saying that it is too short, but for this to be done automatically I would need for it to be detected.

<script type="text/javascript">
document.getElementById('username').onchange=userCheck;
function userCheck() {
    document.getElementById("usercheck").innerHTML="kk";
}
</script>

<form action="devlabs.php">
Username: <input type="text" id="username"/><em id="usercheck"></em>
</form>

Answer 1

Why not do the check when the user submits the username?

Answer 2

What you are looking for is the onChange event. For example, if you were using prototype.js, the following would do the trick:

$('usernameFieldId').observe('change', usernameValidaitonFunction);

Answer 3

You need to use the onchange event on the input element. Then you do an Ajax request with each call and check on the server whether the username is acceptable.

document.getElementById('username_input').onchange = checkIfTaken;
function checkIfTaken() {
  ajax_check_username(this.value);
}

Something like that. You would then obviously have to check the ajax response and show a message like "username OK" or "username is not cool".

Answer 4

In javascript, you can apply an onchange event to the input to detect what the user has enterred after they have finished typing it, or an onkeypress event to listen as the user enters the data.

Then you can call your validation routine and amend the message by the input as necessary.

Answer 5

use javascript to handle a DOM event for that input. see here for a list.

Maybe use onkeypress like this:
< input type="text" onkeypress="alert('you pressed a key');" / >

Use a variable if you want to track its old value and compare. Here is an example using onkeypress.

Answer 6

Regarding the use of onkeypress, it is better to use onchange. For example, if the user is pasting text into the box using the mouse, onkeypress will not register this, but onchange will.

Answer 7

Change your function to:

function userCheck() {
    if(document.getElementById("username").value.length > 5) {
      //no error
    } else {
      //error
    }
}

Or in jQuery:

$(function() {
   $("#username").change(function() {
      if($("#username").val().length > 5) ... 
   });
});

Answer 8

which one is better to use onChange event or onBlur event