Need to grab Selected Option value from a form and pass back via jquery/javascript

Question

I need to dynamically grab the value of whatever option has been selected by a user and pass that value back to the Facebook Pixel on button click.

See SELECTED OPTION VALUE in the script area.

 <form action="/cart/add" method="post" enctype="multipart/form-data" class="AddToBagForm text-center medium-up--text-left" novalidate> <select name="id" id="product-select-2585865157" class="product-single__variants"> <option selected="selected" value="7534116741">White Marble / S - $39.95 USD</option> <option value="7534116869">White Marble / L - $39.95 USD</option> <option value="7534117061">Midnight / S - $39.95 USD</option> <option value="7534117253">Midnight / L - $39.95 USD</option> <option value="9032311493">Maroon / M - $39.95 USD</option> <option value="9032318853">Maroon / L - $39.95 USD</option> </select> <div class="add-container clearfix"> <a href="#" class="btn--primary BIS_trigger" data-product-handle="mighty-ganesh-flowy-top" data-variant-id="7534116741">Get Notified</a> <div class="quantity-field"> <label for="Quantity" class="quantity-selector">Qty:</label> <input type="number" id="Quantity" name="quantity" value="1" min="1" max="3" class="quantity-selector"> </div> <button type="submit" name="add" class="AddToBag btn--primary" id="add-to-cart" > <span class="AddToBagText">Add to Bag</span> </button> </div> <script type="text/javascript"> $('#add-to-cart').click(function() { fbq('track', 'AddToCart', { content_ids: '{{ product.id }}.' + **SELECTED OPTION VALUE**, content_type: 'product', value: {{ product.price | money_without_currency}}, }); }); </script> </form>

Jeff Noel · Accepted Answer · 2016-07-26 18:03:43Z

You can get a select element's selected option value through the .val() function with jQuery since you already use the library.

$('#product-select-2585865157').val()

Or, since that id seems to be generated: $('select.product-single__variants').val()

Your final JavaScript should look like this:

 $('#add-to-cart').click(function() { var selection = $('#product-select-2585865157').val(); /* var selection = $('select.product-single__variants').val(); */ fbq('track', 'AddToCart', { content_ids: '{{ product.id }}.' + selection, content_type: 'product', value: {{ product.price | money_without_currency}}, }); });

Thanks. I will check it shortly. One quick followup question: the product-select-# is dynamic, using one of Shopify's internal variables: <select name="id" id="product-select-{{ product.id }}" class="product-single__variants">. So, I can't hard code that long number into my solution. How would I incorporate that into the variable assigment?
My answer was updated to grab the value with the select's class instead (see the commented code).

Collectives™ on Stack Overflow

Need to grab Selected Option value from a form and pass back via jquery/javascript

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related