CODEWITHSUNDEEP
javascriptjqueryhtmlselect
awebartisan
awebartisan

Reputation: 1514

Detect change event on hidden select element

On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.

visual description of question

Goal: Get the variant id on change of variant.

Problem: I am unable to detect the change event on this select element.

Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.

$(document).ready(function(){

 $('body').on('change', "select[name='id']",  function(){

   console.log('here');

 });


});

I can get its value just fine with below code at any time I want.

console.log($("select[name='id']").val());

Any ideas that why change event won't be detected?

Upvotes: 6

Views: 2045

Answers (3)

Steve0
Steve0

Reputation: 2253

As per the jQuery documentation change() is not fired when val() is set programmatically

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

You need to do it manually when you set val()

$("select[name='id']").val(354).trigger('change');

Edit[0]: After your comments on what you were trying to do I took a quick look at the js.

I found that the template fires a custom event variantChange

$("#ProductSection--product-template").on("variantChange", function(evt){alert($("select[name='id']").val());});

Good Luck;

Upvotes: 4

awebartisan
awebartisan

Reputation: 1514

Since the goal was to get the current value of variant id, here is how I got to that.

Getting the value is not a problem, so when page loads, store the initial value in localStorage then listen to change event on form. Thankfully, change event is triggering on Form element.

        $('body').on('change', 'form[action^="/cart/add"]', function () {

            console.log($('select[name="id"]').val());

        });

Compare the value with previous value and see if its changed. If yes, then do my thing. If not, wait for another change event on form. Yeah, I hope it will work for the long run.

Thank you all !!

Upvotes: 3

Jos&#233; Lopez Coronado
Jos&#233; Lopez Coronado

Reputation: 338

I think that should know what triggers this, I mean if change when you change the select of the sizes then inside this you get the value that you need, for example:

$(document).on("change","#select1",function(){
  var valuneed = $("#select2").val();
  console.log(valuneed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="11">size a</option>
<option value="21">size b</option>
</select>

<select id="select2">
<option value="21">value a</option>
<option value="22">value b</option>
</select>

And if the update of the second select takes a seconds (is the usual) then you just add a settimeout

If there is more than just on trigger, then you:

$(document).on("change","#select1, #selector2, #selector3",function(){

Let me know if this is what you need.

Upvotes: 2

Related Questions