How to get value from select using javascript

Question

 $(document).on('click', '.product_quantity_up', function(e){ var valueFromForm; valueFromForm = document.getElementById("group_2").value; e.preventDefault(); fieldName = $(this).data('field-qty'); var currentVal = parseInt($('input[name='+fieldName+']').val()); if (!allowBuyWhenOutOfStock && quantityAvailable > 0) quantityAvailableT = quantityAvailable; else quantityAvailableT = 100000000; if (!isNaN(currentVal) && currentVal < quantityAvailableT) $('input[name='+fieldName+']').val(currentVal + valueFromForm).trigger('keyup'); else $('input[name='+fieldName+']').val(quantityAvailableT); $('#quantity_wanted').change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select name="group_2" id="group_2" class="form-control attribute_select no-print"> <option value="18" selected="selected" title="35">35</option> <option value="19" title="36">36</option> <option value="20" title="37">37</option> <option value="21" title="38">38</option> <option value="22" title="39">39</option> <option value="23" title="40">40</option> </select> 

I have a drop down list and I want to get value. Next, add this value into quantity.

Look at valueFromForm variable. And this is a Prestashop 1.6 where I want to use it. To test this code You can choose "Size" attribute.

Thanks for help.

Answer 1

To get selected use $('#group_2 :selected').val();

you are making your code a little more complicated

why use vanilla JS like document.getElementById("group_2").value; inside Jquery ??

Answer 2

I have placed some changers to your code but I have no idea what are the following values,

allowBuyWhenOutOfStock quantityAvailable fieldName

now the code is ruining try it

 $(document).ready(function() { var allowBuyWhenOutOfStock = true var quantityAvailable = 100 $(document).change(function(e) { var valueFromForm; valueFromForm = document.getElementById("group_2").value; e.preventDefault(); fieldName = $(this).data('field-qty'); var currentVal = parseInt($('input[name=' + fieldName + ']').val()); if (!allowBuyWhenOutOfStock && quantityAvailable > 0) { quantityAvailableT = quantityAvailable; } else { quantityAvailableT = 100000000; } if (!isNaN(currentVal) && currentVal < quantityAvailableT) { $('input[name=' + fieldName + ']').val(currentVal + valueFromForm).trigger('keyup'); } else { console.log(fieldName + " " + quantityAvailableT) $('input[name=' + fieldName + ']').val(quantityAvailableT); } $('#quantity_wanted').change(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select name="group_2" id="group_2" class="form-control attribute_select no-print"> <option value="18" selected="selected"title="35">35</option> <option value="19" title="36">36</option> <option value="20" title="37">37</option> <option value="21" title="38">38</option> <option value="22" title="39">39</option> <option value="23" title="40">40</option> </select> 

Answer 3

Please check out this jsBin to see how the get should work in your case:

JsBin example

But after all:

• get value of a select element: $("#group_2").val();

• get text of the selected option: $("#group_2").find("option:selected").text();

• get other attributes of the selected option: $("#group_2").find("option:selected").attr("title");

In your case:

var valueFromForm = $("#group_2").val();

I can also suggest to check the "keyUp" event that is attached to the input field becasue the end of your jQuery chain there is this: .trigger('keyup')