CODEWITHSUNDEEP
javascriptformsonchange
BEP
BEP

Reputation: 49

Event will not trigger

I have a form that has multiple inputs. One input is where user can input an ID. I need to verify the ID is unique. I want to call a JavaScript function for a onchange event. However, I can't get it to trigger. I have a console.log but it never hits when I make a change in the input so I am doing something wrong.
This is the function I am trying to call on the on change

function checkUniqueID() {
  console.log("here");
  var $counter = 0;
  var tag = document.forms["userform"]["new_id"].value;
  while ($counter < $totalItems) {

  }
};
<div class="six wide field">
  <label for="ID">ID</label>
  <input type="text" id="new" name="new_id" placeholder="ID" onchange="checkUniqueID()">
</div>

I can't even get the console.log ("here") to trigger

Upvotes: 1

Views: 68

Answers (1)

qelli
qelli

Reputation: 2077

The onchange HTML attribute triggers when the input loses focus. So, if you correctly have your input#new_id inside a form like this:

<form name="userform">
  <div class="six wide field">
  <label for="ID">ID</label>
  <input type="text" id="new" name="new" placeholder="ID">
 </div>
</form>

Adding an eventListener in your script file would be enough.

document.userform.new_id.onchange=function(){
    alert("ID changed to: "+this.value);
};

With jQuery would be as easy as:

$("#new").change(function(){
    alert("ID changed to: "+$(this).value;
}

Here is a working fiddle:

https://jsfiddle.net/edbL3kgp/

Upvotes: 1

Related Questions