We Keep Coding

Javascript select individual option

I have been trying lately to make a function that on change on the select box it return only the selected option value.
My markup looks like this:
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>
and the javascript function:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
for (var i = 0; i < x.length; i++) {
var newX = x[i].value;
console.log(newX);
}
}, false);
What I am trying to do is when I click on 7 days to return only 7 days.

Don't read the <option>s. Read the <select>.
document.getElementById('rangeSelector').value
Other interesting bits include .selectedIndex and .selectedOptions.
(Of course, as Abhitalks notes in the comments, in your handler, the element getting will already done for you.)

var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
console.log(rangeSelector.value);
}, true);
You do not need for loop for that, after firing event "change" rangeSelector.value already have value of chosen element.
so if you wanna add "active" to selected option you can do same:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);
but you should remove "active" class from all non-active, by looping them:)
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
for (var i = 0; i < x.length; i++) {
x[i].className = ""; //or x[i].removeAttribute("class");`
}
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);

You could use jQuery for this, example:
$("#rangeSelector").on("change", function() {
var rangeSelect = document.getElementById("rangeSelector");
var value = selectJaar.options[rangeSelect.selectedIndex].value;
return value;
});
This first gets the dropdown, then get the selected value, and return it.

Try simply using this.value:
document.getElementById('rangeSelector').addEventListener('change', function(e) {
alert(this.value);
});
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>

How to use an input from a select option in html with javascript?

I want to assign a drop down option to a unique ID so that when it is selected, the javascript will take that ID and turn it into a variable which I can use to display the cost.
This is what I have so far:
<form>
<select>
<option name ="Bristol "value="40.0" id="BN1">Bristol - Newcastle</option>
</select>
<button type="button" onclick="BookingFare(); return false;">Submit</button><br>
</form>
function BookingFare() {
var price = 0;
//var ofAdults = document.getElementById('adults').value;
//var ofChildren = document.getElementById('children').value;
var BN1 = document.getElementById('BN1').value;
if (BN1) {
var price = price + 40;
}
document.getElementById('priceBox').innerHTML = price;
}
I can't get it to display the price, even when I just try to get it to print out "hello" when BN1 is selected it doesn't work. Can anyone tell me what I'm missing?

function BookingFare() {
var price = 0;
//var ofAdults = getElementById('adults').value;
//var ofChildren = getElementById('children').value;
var BN1 = document.getElementById('BN1').value;
if (BN1) {
var price = price + 40;
}
document.getElementById('priceBox').innerHTML = price;
}
<form>
<select id="BN1">
<option name ="Bristol "value="40.0" >Bristol - Newcastle</option>
</select>
<button type="button" onclick="BookingFare(); return false;">Submit</button><br>
</form>
<label id='priceBox'></label>

Drop down menu adds input fields with corresponding ID and label

With Javascript, I created a drop down menu that generates the number of input fields that the user's selection (1-6) dictates. But how do I make the newly generated input fields' IDs & labels correspond to their place-number in the list of input fields? I hope that makes sense. You'll see in my html I have [ brackets ] where I want the dynamically generated number to be.
html:
<ul>
<li>
<label for="id_NOU">Number of Units:</label>
<select name="NOU" id="id_NOA">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</li>
<li class="list">
<label>Unit []</label>
<input type="text" id="unit[]"></input>
</li>
</ul>
JavaScript:
$(window).load(function () {
$('#id_NOU').change(function () {
var total = $(this).val();
//remove all
$('.list').each(function (index) {
if (index != 0) $(this).remove();
});
//create new ones
for (var i = 2; i <= total; i++) {
$('.list:first').clone().appendTo('ul');
}
});
});
Thank you so much for your help! I love JSFiddles...

Perhaps a better implementation would be to copy last field only and on further change keep the rest of the list intact
here is the code
var counter = 1;
$(function(){
$("#id_NOA").on("change", function(){
var $ul = $(this).parent().parent();
var val = $(this).val();
while($ul.find(".list").length < val){
var $item = $ul.find(".list:last").clone();
$item.find("input").attr("id", "unit"+counter++);
$item.find("label").html("Unit "+counter);
$ul.append($item);
}
if($ul.find(".list").length >= val){
$ul.find(".list:gt("+(val-1)+")").remove();
counter = val;
}
});
});
here is a jsfiddle link http://jsfiddle.net/EN687/1/

Solution:
$(document).ready(function(){
$('#id_NOU').change(function () {
var total = $(this).val();
//remove all
$('.list').each(function (index) {
if (index != 0) $(this).remove();
});
//create new ones
for (var i = 2; i <= total; i++) {
element = $('.list:first').clone();
element.find('input').attr('id', 'unit' + i);
element.find('label').html('Unit ' + i);
element.appendTo('ul');
}
});
});
Working demo: http://jsfiddle.net/6VQDR/1/

Jquery change the variable value if select field change

oke i have select field
<select id="select" required name="bank" >
<option value="cash">Cash</option>
<option value="debit">Debit Card</option>
<option value="cc">Credit Card</option>
</select>
and the text field to show price
<input type="text" id="sub_total" name="sub_total">
<input type="text" id="fee" name="fee">
<input type="text" id="sum" name="total">
and the javascript
var total = 0;
var fees = 0;
var total_fees = fees + total;
$("#sub_total").val(total);
$("#fee").val(fees);
$("#sum").val(total_fees);
so the point is i want to change the "fees" value from "0" to "0.1 or what ever i want" if select credit card
the pseudecode is
if select cc
var fees = '0.1';
else
var fees = '0';

$('#select').change(function() {
if($(this).val() == "cc")
{
$('#fee').val(0.1);
}
});

Use a ternary operator to switch between 0 and .1 based on the select value
var fees = ($("#select").val() === "cc" ? 0.1 : 0);
You should wrap this in a function, and bind the select element to this function on change.
e.g. :
var sel = $("#select");
function setValue() {
var total = 0,
fees = (sel.val() === "cc" ? 0.1 : 0); // ternary
$("#sub_total").val(total);
$("#fee").val(fees);
$("#sum").val(fees + total); // sum
}
setValue(); // call function
sel.bind('change', setValue); // bind function to onchange of the select element

Need Value from Simple Javascript Addition Multiplication

I'm not sure what I am doing wrong, but I am just trying to get a total price to display after you make a selection. I want to take the value of the selection and multiply it by 100 and then use the updatetotal function to display the total.
// Collect Data & Prices To Update Dynamic Prices
var pricechecking=document.getElementById('howmanyaccts')value.trim();
var pricepaypal=document.getElementById('howmanyacctspaypal')value.trim();
var pricecheck = pricechecking * 100;
var pricepay = pricepaypal * 100;
function updateTotal() {
var ThePrice = pricecheck + pricepay;
$('#TotalPrice').text('$' + ThePrice + '.00');
}
$(function () { $('.DoPricing').click(updateTotal); });
MY HTML IS:
<form action="http://linktomyactionpage" method="post" >
<p>How many accounts to pay by check?</p>
<select name="howmanyaccts" id="howmanyaccts" class="DoPricing">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>How many accounts to pay by paypal?</p>
<select name="howmanyacctspaypal" id="howmanyacctspaypal" class="DoPricing">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>Total: <span id="TotalPrice">$0.00</span></p>
<input type="submit" name="submit" value="submit">
</form>
What if I simplified the code? Brought the 00.00 to the text and no multiplication?
// Collect Data & Prices To Update Dynamic Prices
var pricechecking=document.getElementById('howmanyaccts').value.trim();
var pricepaypal=document.getElementById('howmanyacctspaypal').value.trim();
function updateTotal() {
var ThePrice = pricechecking + pricepaypal;
$('#TotalPrice').text('$' + ThePrice + '00.00');
}
$(function () { $('.DoPricing').click(updateTotal); });
HERE IS WHAT I GOT TO WORK:
// Collect Data & Prices To Update Dynamic Prices
var pricechecking=document.getElementById('howmanyaccts').value.trim();
var pricepaypal=document.getElementById('howmanyacctspaypal').value.trim();
function updateTotal() {
var pricecheck = parseInt($('#howmanyaccts').val(), 10);
var pricepay = parseInt($('#howmanyacctspaypal').val(), 10);
var ThePrice = pricecheck + pricepay;
$('#TotalPrice').text('$' + ThePrice + '00.00');
}
$(function () { $('.DoPricing').click(updateTotal); });

I think you want to do something like this : http://jsfiddle.net/F3HbJ/
$(function () {
$('.DoPricing').change(function () {
var total = 0;
$('.DoPricing').each(function () {
total += parseInt($(this).val()) * 100;
});
$('#TotalPrice').html('$' + total);
});
});
The event handler is .change() for a select. Then you loop through the parseInt values of each select that you multiply by 100.

Here is working DEMO
use like this :
$(document).ready(function () {
var pricechecking = $($("#howmanyaccts")[0].selectedOptions).attr("value");
var pricepaypal = $($("#howmanyacctspaypal")[0].selectedOptions).attr("value");
function updateTotal() {
var pricecheck = parseInt($('#howmanyaccts').val(), 10);
var pricepay = parseInt($('#howmanyacctspaypal').val(), 10);
var ThePrice = pricecheck + pricepay;
$('#TotalPrice').text('$' + ThePrice + '00.00');
}
$('.DoPricing').change(updateTotal);
});