jQuery Change Event on multiple Select Option

Question

I have multiple selects.

The first select is working but when I try with the second one the jQuery does not work.

 <select class="selectProduct" name="product_title[]" style="width:200px;">
                                                 @foreach($product as $value)
                                                         <option value="{{$value->id}}">{{$value->title}}</option>
                                                         @endforeach
                                                  </select>
                                        <input type="text" name="sku[]" placeholder="Code" id ="sku" style="width:50px;" class="code" />
                                 <input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" style="width:50px;" />
                                    <input type="text" name="price[]" placeholder="Price" id ="price" class="price"style="width:50px;" />
                                    <input type="text" name="price[]" placeholder="Sale Price" id ="price" class="price"style="width:100px;" />
                            <br><a href="javascript:void(0);" class="add_button" title="Add field">Add</a>

Here is the second select with the same class. The first one is working on Change. But when I click on the second select. jQuery does not work.

   <select class="selectProduct" name="product_title[]" style="width:200px;">
                                                 @foreach($product as $value)
                                                         <option value="{{$value->id}}">{{$value->title}}</option>
                                                         @endforeach
                                                  </select>
                                        <input type="text" name="sku[]" placeholder="Code" id ="sku" style="width:50px;" class="code" />
                                 <input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" style="width:50px;" />
                                    <input type="text" name="price[]" placeholder="Price" id ="price" class="price"style="width:50px;" />
                                    <input type="text" name="price[]" placeholder="Sale Price" id ="price" class="price"style="width:100px;" />
                            <br><a href="javascript:void(0);" class="add_button" title="Add field">Add</a>

Here is the jQuery

$(document).ready(function(){
    $('.selectProduct').change(function(){
      var idSize=$(this).val();
      alert(idSize);
      var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
      if (idSize==""){
       return false;
      }

$.ajax({
  url:'{{route("product-price")}}',
  type: 'GET',
  data: {idSize: idSize},
  beforeSend: function (request) {
    return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
  },
  success: function (response) {
    var arr=response.split('#');
    $('.price').html("$"+arr[0]+'.00');
    $('.price').val(arr[0]);
      $('input[name=attribute_id]').val((arr[3]));
      $('.code').val((arr[4]));
  },
  error: function (err) {
    console.log(err);
    alert("Something Went Wrong, Please check again");
  }
});
    });
});

Problem, your selects have multiple Id's `id="selectProduct"` and `id="title"` — Carsten Løvbo Andersen, Aug 04 '21 at 13:00
Carsten is highlighting an issue with your HTML, not the cause your problem. — freedomn-m, Aug 04 '21 at 13:05
I want to encourage you, when you write your code, make it formatted and to look visually pleasing. This approach will help you avoid many errors in future. — Tornike Shavishvili, Aug 04 '21 at 13:06
Is your second `select` added via js/jquery after the page has loaded? Is the second `select` located after your jquery? Does it work if you put your jquery in `doc.ready`? `$(() => $(".selectProduct").change...` });`? Can you reproduce the issue here, in a stack snippet? — freedomn-m, Aug 04 '21 at 13:07
Tornike Shavishvili@Thank you so much . Could you Help Me Please? — Yadav Sanjay, Aug 04 '21 at 13:07
It's [trivial to show](https://jsfiddle.net/cmwuq79z/) your code working, *as provided*. (note that `alert` in an iframe is no longer allowed in Chrome, so changed to a less intrusive console.log - open the console to see it working). So there's something you've *not provided* / *not told us*. So we need to know what that is. If you can't reproduce the issue here (or tell use the difference) **then we can't help you.** — freedomn-m, Aug 04 '21 at 13:10
@YadavSanjay I don't understand what the problem is. Both selects works fine and alerts multiple times — Carsten Løvbo Andersen, Aug 04 '21 at 13:10
@YadavSanjay Are both selects identical? What is the difference between them? — Tornike Shavishvili, Aug 04 '21 at 13:12
freedomn-m@please check updated Question, Jquery Ajax is working for the first select but does not work for a second. — Yadav Sanjay, Aug 04 '21 at 13:26
@YadavSanjay can you improve the readability by editing the intendation? — Reporter, Aug 04 '21 at 13:26
Tornike Shavishvili @both select option is not working , Only one select option is working second is not working — Yadav Sanjay, Aug 04 '21 at 13:28
@YadavSanjay Again you have multiple elements with the same `id` Please stop that, it will only make it worse for you and for us who try to help you — Carsten Løvbo Andersen, Aug 04 '21 at 13:32
I'm voting to close this since the question is not readable and it's not clear what the problem is. — Carsten Løvbo Andersen, Aug 04 '21 at 13:32
Carsten Løvbo Andersen@ Boss question Jquery does not working with these two select option — Yadav Sanjay, Aug 04 '21 at 13:34
"ajax is working for first but not for second" - does your `alert` work on the second? — freedomn-m, Aug 04 '21 at 13:36
Carsten Løvbo Andersen@ here is two select option with the same class , Jquery is working for first but does not work for a second. this is question — Yadav Sanjay, Aug 04 '21 at 13:36
@YadavSanjay After each select you have 2 inputs with the class `price` so how should this code `$('.price').val(arr[0]);` know what price to use — Carsten Løvbo Andersen, Aug 04 '21 at 13:36
Carsten Løvbo Andersen@ $('.price').val(arr[0]); this working good — Yadav Sanjay, Aug 04 '21 at 13:38
@freedomn-m that would make no sense with code like this `$('.price').html("$"+arr[0]+'.00'); $('.price').val(arr[0]);` Also there is way to many errors in the OP code to give him an good answer — Carsten Løvbo Andersen, Aug 04 '21 at 13:38
You need to reproduce the issue here, in a stack snippet. Your code has already been shown to be working (in a jsfiddle). There's something *else* (outside the handler, the ajax part is a complete red-herring and irrelevant if the alert is not working). Adding a bunch of server-side code to the question which generates the `select` is also not relevant as it is (appears to be) a jquery/javascript (client-side) issue. Reproduce it outside of your page. — freedomn-m, Aug 04 '21 at 13:39
Carsten Løvbo Andersen@I need only help regarding why j query does not work for the second select option. please help me — Yadav Sanjay, Aug 04 '21 at 13:39
@YadavSanjay You query should work. I tested it and both work for me. I get alerts from both selects — Carsten Løvbo Andersen, Aug 04 '21 at 13:40
Does this answer your question: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Aug 04 '21 at 13:41

Ivijan Stefan Stipić · Accepted Answer · 2021-08-04T14:12:54.257

-1

When you want to detect an on change event in fields like this, then you should do so by the following example:

$(document).on('change', '.selectProduct', function(e){
    var $this = $(this),
        $value = $this.val();
        
    /* Do anthing you want */
});

This will recognize any select box that has a .selectProduct class.

You have to look inside the document for all the checkboxes you have.

$this variable returns the current select box.

EDIT:

More info here: https://stackoverflow.com/a/1207393/2592415

edited Aug 04 '21 at 14:12

answered Aug 04 '21 at 13:39

Ivijan Stefan Stipić

6,249
6
45
78

Which is why we're trying to establish the difference. Event delegation may well be the answer, in which case it should be closed as dup of: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Aug 04 '21 at 13:40
1

@YadavSanjay If this worked then you forgot to tell us how you creates the second select. Please learn to include all important information in your question next time. – Carsten Løvbo Andersen Aug 04 '21 at 13:42
freedomn-m@Hey Don't make Negative "Ivijan Stefan Stipić" Answer , He Give me right answer , and this is working for me . – Yadav Sanjay Aug 04 '21 at 13:43
@YadavSanjay Freedom is not being negative in any way. – Carsten Løvbo Andersen Aug 04 '21 at 13:44
@freedomn-m I just see this and give a simple solution to the question. I just see the second line of the JS code and understand a common problem. – Ivijan Stefan Stipić Aug 04 '21 at 13:44
Carsten Løvbo Andersen@ see the "@Ivijan Stefan Stipić" answere this is working and he is Real hero – Yadav Sanjay Aug 04 '21 at 13:44
@YadavSanjay your problem could have been fixed literally 40 minutes ago if you had answered my questions in the comments, eg *Is your second select added via js/jquery after the page has loaded?* :) I asked this as your problem indicated that event delegation would be the way to fix it, but would not mark as a duplicate until you confirmed (which you didn't). – freedomn-m Aug 04 '21 at 13:46
1

@IvijanStefanStipić If you read the OP's question then there is no indication about that Event delegation is needed. While it might solve the problem then as freedom says, you should have marked it as duplication. – Carsten Løvbo Andersen Aug 04 '21 at 13:46
freedomn-m@ Hey I love you too also. For your Nice Support ,If you did not Then I was going to delete this question from here . And if I deleted then my Struggle will be start . – Yadav Sanjay Aug 04 '21 at 13:49
@CarstenLøvboAndersen I have been doing this job for 18 years, every day between 8 to 10 hours a day. I know common mistakes in writing jQuery code and I immediately had a clear problem when he wrote "The first select is working but when I try with the second one the jQuery does not work". I didn't read the rest of the question but just looked at the jQuery code. You could understand this as “experts” and give yourself the answer he deserve. Yadav Sanjay I'm not worried about a negative value. I am worried about the lack of humanity. – Ivijan Stefan Stipić Aug 04 '21 at 14:11
1

@IvijanStefanStipić How do it lack humanity. We have tried and spend a lot of time trying to help him and point multiple things that is wrong with his code, and that he just ignores. What I don't understand is why you didnt mark this as duplicate??? That would have givin him the hit he needed and you would follow the rules. Honest im happy someone downvoted this answer. – Carsten Løvbo Andersen Aug 05 '21 at 14:25

jQuery Change Event on multiple Select Option

1 Answers1

EDIT: