Change Hidden field based on select choice

Question

I've got a select field that is populated with all titles from a channel entry like this:

<select id="product_name" name="product_name" class="form-control">
  {exp:channel:entries channel="product_page" limit="500" disable="member_data|pagination|comments|categories" dynamic="no" orderby="title" sort="asc"}
    <option value="{title}" {if freebie_2 == url_title}selected{/if} data-productid="{product_id}">{title}</option>
  {/exp:channel:entries}
</select>

I've also got a hidden field that I need to populate the value with a value pulled from the data-product-id attribute of the selected option.

<input id="product_id" name="product_id" type="hidden" placeholder="Product Id" class="form-control input-md" value="{freebie_3}">

I"m not sure how best to approach this.

My current javascript is below and not working. On change the value is removed and set to "undefined"

//Populate hidden field with data-attribute from select on quote-center page
$(document).ready(function(){

    $('select#product_name').on('change', function() {

        var prod_id = $('select#product_name:selected').data('productid');

      $('#product_id').val(prod_id);
      console.log('product id is ' + prod_id);
    });

});

And a JS Fiddle is here: http://jsfiddle.net/pgzfLo24/

Answer 1

I'm so stupid. The selector is incorrect vor the variable prod_id. Needs to have option added. See below:

//Populate hidden field with data-attribute from select on quote-center page
$(document).ready(function(){

    $('select#product_name').on('change', function() {

        var prod_id = $('select#product_name option:selected').attr('data-productid');

      $('#product_id').val(prod_id);
      console.log('product id is ' + prod_id);
    });

});

Now everything works.