Question 36365 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Is there away to write a one function in JQUERY whenever there is input in the fields?

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");
});
Tags:

3

Answers


  1. 0

    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" />
    Login or Signup to reply.
  2. 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"/>
    Login or Signup to reply.
  3. 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");
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search