How can I detect which input field received input using JavaScript?

Question

I have the following HTML code:

<div>
    <input id="input1" type="text" size="50" autofocus autocomplete="on">
</div>
<div>
    <input id="input2" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input3" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input4" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input5" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input6" type="text" size="50" autocomplete="on">
</div>

Now, when a user types something in any input field and then press enter, I need to recognize which one received the input, then store that input's ID in a var and the typed content into another. So far I have this code which I use to recognize if enter has been pressed:

window.onload = function() {
    searchinput = document.getElementById("input1");
    if(!!searchinput) {
        searchinput.addEventListener("keypress", function(a) {
            var key = a.keyCode;
            if(key == 13) {
                var query = this.value;
                search(query);
            }
        });
    }
 };

But as you can see, it only works with a specific input field (input1 in the example), and it doesn't insert anywhere the element's ID.

Possible duplicate of [Detect all changes to a (immediately) using JQuery](http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery) (Note that this includes some vanilla JS solutions, too) — TylerH, Feb 04 '16 at 14:42
If a user has enter value in more than 1 text-boxes then what to do ? — AsgarAli, Feb 04 '16 at 14:48
I have edited the original post with the code I use when there is only one text box. As for what to do if a user enters a value in more than one field, I want the code to obtain only the content of the box on which enter has been pressed. — Alex, Feb 04 '16 at 14:58

score 1 · Accepted Answer · answered Feb 04 '16 at 14:51

You can use onkeypress event to detect user key press and e.wich to check if the pressed key is code equal 13 (enter key), then get attribute you want from current input using this, check example below.

Hope this helps.

document.onkeypress = function(e){
    if(e.which==13){ //click on enter key
        alert(e.target.id+'---'+e.target.value); // get the id and value of current input
    }
}

<div>
    <input id="input1" type="text" size="50" autofocus autocomplete="on">
</div>
<div>
    <input id="input2" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input3" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input4" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input5" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input6" type="text" size="50" autocomplete="on">
</div>

score 0 · Answer 2 · answered Feb 04 '16 at 14:50

0

I would use jQuery.

This is untested code, but something like this might work.

// 1. Give all input fields a class of all_inputs.
// 2. The following code should loop through each one and add the ID to the all_ids array.

var all_ids = [];
$('.all_inputs').each(function() {
   var elem = $(this);
   all_ids.push($(this).attr('id'));
});

answered Feb 04 '16 at 14:50

Haring10

1,517
1
19
37

Be careful the OP doesn't contain Jquery tag. – Zakaria Acharki Feb 04 '16 at 14:52

score 0 · Answer 3 · answered Feb 04 '16 at 14:59

$(document).on("keypress", "input", function (event) {
    var intKeyCode = parseInt(event.keyCode ? event.keyCode : event.which);
    if (intKeyCode === 13)
    {
        alert("Input Id : " + $(this).attr("id") + "  Input Value : " + $(this).val());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input id="input1" type="text" size="50" autofocus autocomplete="on">
</div>
<div>
    <input id="input2" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input3" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input4" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input5" type="text" size="50" autocomplete="on">
</div>
<div>
    <input id="input6" type="text" size="50" autocomplete="on">
</div>

How can I detect which input field received input using JavaScript?

3 Answers3