jquery - Loop through array of select fields with different array keys

Question

I am generating some select inputs dynamically, and it follows this structure

<select id="OrderType_orderItem_0_product" name="OrderType[orderItem][0][product]" class="form-control">,

<select id="OrderType_orderItem_1_product" name="OrderType[orderItem][1][product]" class="form-control">

and so on.

I need to do a ajax post on .change on every select generated, how can I do that?

Right now I have this, but it obviously just work for the first select of id 0:

$(document).ready(function () {
        $('[name="OrderType[orderItem][0][product]"]').change(function(){
           var val = $(this).val();
           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
        });

Been a while, but I believe to bind events onto dynamically created elements you have to use a [delegate](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). — Drew Kennedy, Aug 03 '18 at 13:52
Depends on when they're created, but it's a valid point. Are these elements created on the server or client? — Reinstate Monica Cellio, Aug 03 '18 at 13:57
@DrewKennedy delegate worked. I did $("body").on("change", "select[name^='[OrderType]']", function(){ //stuff }); — Joao Victor Souza, Aug 03 '18 at 15:47

score 3 · Answer 1 · answered Aug 03 '18 at 13:48

One way of doing this would be to give them a shared class

<select id="OrderType_orderItem_0_product" name="OrderType[orderItem][0][product]" class="form-control myClass">,

<select id="OrderType_orderItem_1_product" name="OrderType[orderItem][1][product]" class="form-control myClass">

And then assigning this event to that class:

$(document).ready(function () {
        $('.myClass').change(function(){
           var val = $(this).val();
           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
        });

because we are using this element for val it will use the element that has triggered the event.

Abderrahim Soubai-Elidrisi · Accepted Answer · 2018-08-03T13:52:21.010

2

You just need to trigger function on change of any select input that's name's start with OrderType

Try this exemple :

$(document).ready(function () {

  $("select[name^='OrderType']").change(function(){

           var val = $(this).val();

           $.ajax({
                type: "POST",
                url: "myurl" + val,
                success: function(data) {

                }
            });
            return false;
  });

});

edited Aug 03 '18 at 13:52

answered Aug 03 '18 at 13:51

Abderrahim Soubai-Elidrisi

5,025
1
26
36

this works only on the first select, do you know why? – Joao Victor Souza Aug 03 '18 at 14:34
No it's works here is an example please check the console https://jsfiddle.net/xpvt214o/544521/ – Abderrahim Soubai-Elidrisi Aug 03 '18 at 14:40
Actually I had to do: $("body").on("change", "select[name^='[OrderType]']", function(){}); since the jquery wasn't working in the dynamic added elements, but with this delegate method it worked. – Joao Victor Souza Aug 03 '18 at 15:46

jquery - Loop through array of select fields with different array keys

2 Answers2