0

I have the below HTML code, I want to call a function using the ID of the field whenever there is input in the input fields regardless of the input field number.

<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4"/>

Instead of the below, I want to call one function for all.

$("#input1").on('input', function () {
    console.log("this is input1");
});

$("#input2").on('input', function () {
    console.log("this is input2");
});

$("#input3").on('input', function () {
    console.log("this is input3");
});
$("#input4").on('input', function () {
    console.log("this is input4");
});
Top-Master
  • 7,611
  • 5
  • 39
  • 71
w3000cpu
  • 13
  • 1
  • 7
  • 3
    Does this answer your question? [Detecting value change of input\[type=text\] in jQuery](https://stackoverflow.com/questions/8747439/detecting-value-change-of-inputtype-text-in-jquery) – LoolKovsky Oct 10 '22 at 06:33
  • Add the *same* class to all the inputs, eg `class="input1 inputlog"` then add your event to `$(".inputlog")` – freedomn-m Oct 10 '22 at 08:05

3 Answers3

1

You can use this selector to target all your inputs $('input[id^=input]').

input[id^=input] means that it will work with all inputs where the id of the input starts with input

$("input[id^=input]").on('input', function() {
  console.log("this is " + this.id);
});


$("input[id^=input]").on('input', function() {
  console.log("this is " + this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4" />
Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
  • Actually, I want if it is input1 then I will somethinglike input++ to do something with input2 for all inputs – w3000cpu Oct 10 '22 at 06:45
  • 2
    "*actually*" - please don't "actually" in the comments - describe what you *actually* want in the question so you get an answer to what you want rather than what you've asked. – freedomn-m Oct 10 '22 at 08:06
0

Many methods. One of them is to select all the inputs and triggers the input method

$("input").on("input", function (e) {
  console.log("this is input", e.target.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4"/>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

The jQuery $() query selector function accepts multiple comma-separated selectors.

$("#input1,#input2,#input3,#input4").on('input', function () {
    console.log("this is input from input 1, 2, 3 and 4");
});
Fred
  • 12,086
  • 7
  • 60
  • 83
  • Downvoted for the maintenance. As you can see in the other answers, there are a ton of options to do this dynamically.. – Wimanicesir May 11 '23 at 08:28