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

Jquery – can we Capture onchange Event for Dynamic TextAreas Without Defining Class in CSS?

I have a requirement where I need to capture the onchange event of a textarea. The challenge is that the textarea is dynamic, and its number can vary based on user input (e.g., single or multiple textareas).

Here is an example of how the HTML looks:

<textarea name="userInput1" id="userInput1" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput2" id="userInput2" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput3" id="userInput3" rows="4" cols="50" class="textareaClass"></textarea>
<!-- ... -->
<textarea name="userInputN" id="userInputN" rows="4" cols="50" class="textareaClass"></textarea>

And the jQuery code I’m using to capture the onchange event:

$(document).ready(function() {
    $(".textareaClass").on("change", function() {
        var textareaValue = $(this).val();
        // My logic
    });
});

My question is: Can I use the class attribute "textareaClass" without defining the class in the CSS? Is this considered standard practice, or is there a better way to capture the onchange event for dynamically generated textareas?

I appreciate any insights or alternative approaches to achieve this. Thank you!

Tags:

2

Answers


  1. 0

    Since you have id, you can use id starts with attribute_selectors like the following way:

    ('textarea[id^=userInput]').on("change", function() {...

    Demo:

    $(document).ready(function() {
  $('textarea[id^=userInput]').on("change", function() {
    var textareaValue = $(this).val();
    console.log(this.value);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="userInput1" id="userInput1" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput2" id="userInput2" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput3" id="userInput3" rows="4" cols="50" class="textareaClass"></textarea>
<!-- ... -->
<textarea name="userInputN" id="userInputN" rows="4" cols="50" class="textareaClass"></textarea>
    Login or Signup to reply.
  2. 0

    You can use $('[id^=userInput]') which means using id which starts with string userInput, as follows:

    $(document).ready(function() {
    $('[id^=userInput]').on("change", function() {
        var textareaValue = $(this).val();
        console.log("value", textareaValue);
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<textarea name="userInput1" id="userInput1" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput2" id="userInput2" rows="4" cols="50" class="textareaClass"></textarea>
<textarea name="userInput3" id="userInput3" rows="4" cols="50" class="textareaClass"></textarea>
<!-- ... -->
<textarea name="userInputN" id="userInputN" rows="4" cols="50" class="textareaClass"></textarea>
And the jQuery code I'm using to capture the onchange event:
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search