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/