We Keep Coding

How to get value from select using javascript

$(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.

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 ??

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>

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')

Pass entered value from one table to another table using javascript

I want to pass the entered value to table two when user I click add, the quantity will be added to the second table. When I click Add button quantity is displayed as an empty value. But not console this shows the entered quantity
The quantity is of the same name and the quantityEntered is of the same name. When I inspect element I get the value entered on the...
"quantityEntered": <input type="text" id="CLT-K809S/SEE_quantity" name="quantityEntered" class="form-control" onkeypress="return isNumber(event)" readonly=readonly value="1" />
...on every row of my new table.
Here is my code:
function saveEneteredQuantity() {
var quantity;
var quantityName;
var getEnteredQuantity;
var enteredQuatity;
var getIndex;
var textvalue = "";
quantity = document.getElementsByName("quantity").length;
quantityName = document.getElementsByName('quantity').value;
console.log("Count the lenght of the input textbox on the HO Stock : ", quantity);
document.getElementsByName("quantityEntered").value = quantityName;
getEnteredQuantity = quantity;
for (var i = 0; i < quantity; i++) {
textvalue = textvalue + document.getElementsByName("quantity").item(i).value;
}
$('[name="quantity"]').each(function(index) {
getIndex = $(this).val();
enteredQuatity = $('[name="quantity"]').eq(index).val();
});
quantity = textvalue;
alert("This was provided: ", quantity);
debugger;
console.log("Check the grapped quantity on table of Selected Line Items to Order : ", quantity);
if (quantity == '' || quantity == 0) {
alert("Quantity can not 0.\n Please enter quantity which is less than available quantity");
}
console.log("Entered Quantity: ", quantity);
}
var items = [{
"avalaibleQty": '<input type="text" id="CLT-C659S/SEE_avaliableQuantity" name="avaliableQuantity" class="form-control" readonly="readonly" value="1">',
"quantityEntered": '<input type="text" id="quantityEntered" name="quantityEntered" readonly="readonly" class="form-control" />',
"quantity": '<input type="text" id="quantity" name="quantity" class="form-control" onkeypress="return isNumber(event)" onblur="compareQuantity(this, 1)" required="required" value="" />',
}]

I managed to fix the problem I had by creating hidden input which I use to store my entered quantity and when user clicks add button,which is on the first and create my second table. I than get crap the entered value assign it to my hidden input.
<!-- part Number and Quantity Entered -->
<input type="hidden"id="quantityList" name="quantityList" class="form-control" value="" />
var quantityList = [];
$(".addLineItem").on("click", function() {
debugger;
var items = [];
var row = $(this).closest("tr").clone();
var partNumber = $(this).closest('tr').find('td:eq(0)').find('input').val();
var quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
quantityList [quantityList.length]= [quantity];
document.getElementById("quantityList").value = quantityList;
debugger;
items.push(row);
row.appendTo($("#mySecondTable"));
});

How can i take value from input select type and use it in javascript?

So I have this project where I have to make a clothing store and I want to do the following:
I have this code in html:
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
and with JavaScript I want to take the option value, check it's value and create a var price; then check and set a price:
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
and display it later this way:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
Any help is appreciated.

First, you just get a reference to the HTML element and assign that to a variable:
var select = document.querySelector(".sizeb");
Then you get the value:
var val = select.value;
Then you do your logic and calculations:
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
And, then display the result:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
NOTE: You have your select to be hidden initially. If that's the case, no one will ever be able to select a value from it.
Now, you also have to decide "when" you want all this to be done. That could be when the value in the select changes. BUt, if that's the case, you should add a first option of something like --- Select One ---, because if the user wants the first selection, they won't do anything, which won't trigger the change event. So, putting it all together, we get:
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});
<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>

You can:
1-Add an listener to the select like this
<select onchange="someFunction(this)" class="sizeb" style="display: none;>
2-create a function like this:
function someFunction(element){
va price = element.value;
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
}

calculation using dropdown box and textbox

Before you guys shoot me down for not trying the code, I am very new to Javascript and I need to implement this function into a very important work.
I got the basis dropdown calculation from this thread, Javascript drop-down form math calculation. I modified the code referred from the thread for my codes
Forgive me if my codes is totally wrong, I am still trying to do piece by piece. Will be grateful if you all can help me pinpoint the errors and/or issues.
So back to topic, I want to get the cost for each items, and then count the total cost to be calculated. The JSFiddle link is here. Appreciate for your helps rendered.
HTML CODES
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select name="gapparell" onchange="gentlemanl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" onchange="gentlemanl();" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select name="gappareld" onchange="gentlemand();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" onchange="gentlemand();" />
<br/><br/><br/>Laundry (Ladies)
<br/>Apparels:
<select name="lapparell" onchange="ladiesl();">
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl" onchange="ladiesl();" />
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select name="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total();">
<br>
JAVASCRIPT CODES
function gentlemanl() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function gentlemand() {
var Amt = document.priceCalc.gappareld;
var Qty = document.priceCalc.gqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesl() {
var Amt = document.priceCalc.lapparell;
var Qty = document.priceCalc.lqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function ladiesd() {
var Amt = document.priceCalc.lappareld;
var Qty = document.priceCalc.lqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}
function total() {
//I am not sure how the function works
}

this is a working exemple of what i think you want to do : http://jsfiddle.net/gd12k4mt/5/
function gentleman1() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
return parseInt(Qty.value) * parseFloat(Amt.value);
}
I designed the functions like that. With a return statement for the value of each product * the quantity.
function total() {
if(isNaN(gentleman1())) {
gentleman_laundry = 0;
} else {
gentleman_laundry = gentleman1();
}
if(isNaN(gentlemand())) {
gentleman_dry = 0;
} else {
gentleman_dry = gentlemand();
}
if(isNaN(ladies1())) {
ladies_laundry = 0;
} else {
ladies_laundry = ladies1();
}
if(isNaN(ladiesd())){
ladies_dry = 0;
} else {
ladies_dry = ladiesd();
}
var totalPrice = gentleman_laundry+gentleman_dry+ladies_laundry+ladies_dry;
document.getElementById('prices').value = totalPrice;
}
The total function is like that with a test on empty fields. In this purpose I created the variables :
var gentleman_laundry,
gentlemend_dry,
ladies_laundry,
ladies_dry;
Be sure that your functions's name is good : here you have two different names in you're html events and in your script.
I personally did without theses html listeners because we want the total price at the end I guess. So I declared only one listener on the final button.
document.getElementById('submit_button').addEventListener('click', function(){
total();
})
Hope this helped.

You can try like this,
HTML
<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select id="gapparell" />
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select id="gappareld">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" />
<br/>
<br/>
<br/>Laundry (Ladies)
<br/>Apparels:
<select id="lapparell" >
<option value="5.00">Tie</option>
<option value="7.50">Shirt</option>
<option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl"/>
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select id="lappareld" onchange="ladiesd();">
<option value="6.00">Tie</option>
<option value="8.50">Shirt</option>
<option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total()">
<br>
</form>
This is JS,
function gentleman1() {
var price=0;
var e = document.getElementById('gapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
//document.getElementById("prices").value = price;
}
function gentlemand() {
var price=0;
var e = document.getElementById('gappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('gqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladies1() {
var price=0;
var e = document.getElementById('lapparell')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyl').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function ladiesd() {
var price=0;
var e = document.getElementById('lappareld')
var Amt = e.options[e.selectedIndex].value;
var Qty = document.getElementById('lqtyd').value;
price = parseInt(Qty) * parseFloat(Amt);
return (isNaN(price)) ? 0 : price;
}
function total() {
var price=gentleman1()+gentlemand()+ladiesd()+ladiesd();
document.getElementById('prices').value=price;
}
Working Demo

Add sum of dropdowns into a txt field [duplicate]

This question already has answers here:
How to sum values of selected options?
(2 answers)
Closed 9 years ago.
How do i take a group of dropdowns and add the values on change into a text field?
<select name="qty[1]" id="qty[1]">
<option selected="selected">500</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
<select name="qty[2]" id="qty[2]">
<option selected="selected">500</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
<input type="text" name="total_qty" id="total_qty" />
So if i select 1000, the total txtbox will change to 1000, then if i select 2000 from the other selectbox the total should change to 3000

Use this:
var selects = $('select[name^=qty]');
selects.change(function(){
var value = 0;
selects.each(function(){ value += +this.value; });
$('#total_qty').val(value);
}).trigger('change');
It will work for two <select> boxes or twenty without changing the code.
Here it is working: http://jsfiddle.net/eYmF8/2/

Javascript:
var qty1 = document.getElementById("qty[1]");
var qty2 = document.getElementById("qty[2]");
var total_qty = document.getElementById("total_qty");
qty1.onchange = function() {
var total = parseInt(qty1.value) + parseInt(qty2.value);
total_qty.value = total;
}
qty2.onchange = function() {
var total = parseInt(qty1.value) + parseInt(qty2.value);
total_qty.value = total;
}
http://jsfiddle.net/SGY5E/