How can I access inputs through jquery that are dynamically added?

Question

I have a form that has a section which allows you to dynamically add sections. 2 of my inputs are a select dropdown which auto-populates a read-only text field. The value of the dropdown has 2 values separated by a space. That's the reason for the indexOf() and trim().

The first section ID look like this frm_section_280-0.

The 2nd section ID looks like this: frm_section_280-1...and so on

The dropdown and text-field IDs are similar: Dropdown ID: field_bev5i972c9c1b67-0 Read-only ID: field_project_id-0

The code I have does the first one correctly. However, when I add another section, the 2nd read-only text field doesn't populate correctly.

var values,
dropdownField = "select[id^=field_bev5i972c9c1b67]";
prjIDfield = "input[id^=field_project_id]";

jQuery(document).on('change', dropdownField, function(){
    var parent = jQuery(this).closest('.frm_repeat_sec');
    var values = jQuery(dropdownField).val();
    var projID = values.substring(values.indexOf(" "));
    jQuery(prjIDfield).val(projID.trim());

});

How can I make each dynamic section use the respective dropdown field? I thought using something with jQuery's parent() function, but can't seem to make it work.

I've made a fiddle here: https://jsfiddle.net/vubaj4s3/ NOTE: The add/remove doesn't work as I couldn't get the JS to work correctly

In cases like this it helps a lot to have a working example in a snippet which demonstrates the HTML and how its generated. That being said, the general approach for dynamic repeated content is to avoid runtime-generated `id` attributes as they make the code more complex and hinder far more than they help. Use common classes, data attributes and/or DOM traversal to relate elements in grouped structures instead. Again, if you require an example of this, we need to see a more complete version of your current code. — Rory McCrossan, Aug 18 '21 at 14:56
This may help you https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Thallius, Aug 18 '21 at 15:05
There are common classes associated with each section and each input. I just figured the IDs would be better to grab on to. — lz430, Aug 18 '21 at 15:05
@ClausBönnhoff helpful link, but OP is already using event delegation — freedomn-m, Aug 18 '21 at 15:30
`jQuery(this).closest('.frm_repeat_sec').find("select").val()` is *much* easier than faffing about cutting up IDs; assuming each select/input is in its own grouped 'frm_repeat_sec' (ie there's multiple 'frm_repeat_sec') — freedomn-m, Aug 18 '21 at 15:32
@freedomn-m but he is using the input itself as parent. I am not sure if that works — Thallius, Aug 18 '21 at 16:01
@ClausBönnhoff I'm not seeing it, but not worth arguing over here :) — freedomn-m, Aug 18 '21 at 16:43
I think @freedomn-m has something here. I don't want the input to be the parent. I was just trying anything I could to make sure I grabbed the correct select and text inputs — lz430, Aug 18 '21 at 18:59
@Iz430 if you can provide some html, you're more likely to get a solution — freedomn-m, Aug 18 '21 at 19:14
Ignoring all the IDs and item specific classes, you only *need* `name=` for each input that you're posting - but your question isn't about changing those when clicking [Add] - your event is on the `select` so you can use `this` = the select, `.closest(".frm_repeat_sec")` for the wrapper and `.find("input")` for the text box. No need to access any IDs or classes (other than wrapper). Here's an updated fiddle: https://jsfiddle.net/r5k1649j/ — freedomn-m, Aug 19 '21 at 08:31

How can I access inputs through jquery that are dynamically added?

0 Answers0