根据用户在Javascript中的输入获取输入表单的值和id的函数

Question

I have several inputs. When a user enters something in an input I want to get its value and id using a function. What's the best way to do it?

<input type="number" class="form-control" id="id1">
<input type="number" class="form-control" id="id2">
.
.
<input type="number" class="form-control" id="id9">
<input type="number" class="form-control" id="id10">



<script>
function getIdVal(){
// how to get those values and ids from this function?
}
</script>

Answer 1

Using change/keyup/keydown event (which can be replaced to another event if needed) you can do something like this:

<input type="number" class="form-control" onchange="run(this)" id="id1">
<input type="number" class="form-control" onchange="run(this)" id="id2">

<input type="number" class="form-control" onchange="run(this)" id="id9">
<input type="number" class="form-control" onchange="run(this)" id="id10">

And for your JS

function run(ele){
  var id = ele.id;
  var value = ele.value;
  console.log(id, value);
}

Here's a JSFiddle .

Answer 2

try this. whenever you type something(include backspace), the key event onkeyup is fired and getIdVal function will be called.

 <input type="number" class="form-control" onkeyup="getIdVal(this)" id="id1"> <input type="number" class="form-control" onkeyup="getIdVal(this)" id="id2"> . . <input type="number" class="form-control" onkeyup="getIdVal(this)" id="id9"> <input type="number" class="form-control" onkeyup="getIdVal(this)" id="id10"> <script> function getIdVal(obj) { // how to get those values and ids from this function? console.log(obj.id) console.log(obj.value) } </script>

Answer 3

<input type="text" id="fname1" onkeyup="myFunction('fname1');">
<input type="text" id="fname2" onkeyup="myFunction('fname2');">

 function myFunction(ids) {
    var x = document.getElementById(ids);
   alert("Value: "+x.value  + "  ID: "+x.id);

}