We Keep Coding

Select another dropdown value based on the previous dropdown selection

I am new to html javascript and trying to learn it. I am having an issue that when I select a value of a dropdown it will select another dropdown value when certain criteria matches.
If they Select the option 4 (takeout) from service_type dropdown, the counter dropdown will automatically selected the option 2 driveway. else user are free to select any value on both dropdown. Only if they select Takeout, it will make driveway selected and also make the table service option inactive.
if they select 1,2 or 3 from the Service type dropdown then option 1 will be enabled.
I need a javascript and no jquery. Please help me
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>

You can use javascript like this:
function Checker(el){
const select = document.getElementById('counter');
removeOptions(select);
if(el.value == '4'){
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}else{
var option2 = document.createElement("option");
option2.text = "Table Service";
option2.value = "1";
select.add(option2);
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}
}
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for (i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" onChange="Checker(this)" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service Fist</option>
</select>
</div>
Create two function one for create option base to first choise and second for remove option everytime function is called.

const firstSelect = document.querySelector('#serviceType');
const secondSelect = document.querySelector('#counter');
firstSelect.addEventListener('change', (event) => {
if (event.target.value === '4') {
secondSelect.value = '2';
secondSelect.disabled = true;
} else if (typeof event.target.value === 'string' && event.target.value.length > 0) {
secondSelect.disabled = false;
secondSelect.value = '1';
} else {
secondSelect.disabled = false;
secondSelect.value = '';
}
});
<div class="form-group col-md-12">
<select name="service_type" id="serviceType" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>
How does it work?
You need to select your Select controls from DOM and then listen to change event on first select, then you can get value from it and depending on your choice change value of Select #2. In order to disable ability to choose another option in second dropdown, you can disable it.

Having trouble with Javascript ordering form not calculating

So I'm getting a null error with my order form when I'm trying to calculate the total using javascript. I believe I have everything done. I get an error on line 13 below that starts with .innerHTML
<script type="text/javascript">
function doTotals() {
var strains = ['guptakush_', 'headbandguptakush_', 'purplejuicyfruitguptakush_', 'hibiscussunrise_', 'criticalkushguptakush_', 'columbiagoldguptakush_', 'grapeapeguptakush_', 'krishnakush_', 'durbinpoisonguptakush_', 'purpleeurkleguptakush_', 'columbiagoldafgani_', 'kandykushguptakush_', 'hibiscussunriseafgani_', 'afgani_', 'grapeapeafgani_', 'krishnaafgani_', 'hashplantafgani_', 'durbinpoisonafgani_'];
var priceStr = 'price';
var quantityStr = 'quantity';
var subtotalStr = 'subtotal';
var total = 0.00;
for (var i = 0; i < strains.length; i++) {
var price = document.getElementById(strains[i] + priceStr).value;
var quantity = document.getElementById(strains[i] + quantityStr).value;
document.getElementById(strains[i] + subtotalStr)
.innerHTML = parseInt(price) * parseInt(quantity);
total += price * quantity;
}
document.getElementById("finaltotal").innerHTML = total;
}
function setup() {
var lastCol = document.getElementById("subtotal_header");
var theForm = document.getElementById("orderform");
var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
amounts[i].onchange = doTotals;
}
}
window.onload = setup;
</script>
Here is the HTML that is associated just one example they are all the same with unique id and names.
<div class="form-group mb-3">
<label class="form-control-label" for="guptakush_quantity">Gupta Kush</label>
<input type="hidden" id="guptakush_price" value="1.00">
<select class="form-control-inline form-control-sm" id="guptakush_quantity" name="guptakush_quantity" size="1">
<option value="0">0</option>
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="hidden" id="guptakush_subtotal">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control-inline col-sm-1" id="finaltotal" name="finaltotal" placeholder="$0.00" readonly>
</div>
Full Example:
https://jsfiddle.net/dg260zxf/
Also if I could just make this work without the subtotal since I don't think it's necessary that would be awesome.

the problem is the array contains many Divs than not in HTML,
the first item 'guptakush_' only exist in html
so if you check if div exists before settings value it will resolve the problem
+
the finaltotal is input not html so put new value with .value not .inerHTML
Working demo:
function doTotals() {
var strains = ['guptakush_', 'headbandguptakush_', 'purplejuicyfruitguptakush_', 'hibiscussunrise_', 'criticalkushguptakush_', 'columbiagoldguptakush_', 'grapeapeguptakush_', 'krishnakush_', 'durbinpoisonguptakush_', 'purpleeurkleguptakush_', 'columbiagoldafgani_', 'kandykushguptakush_', 'hibiscussunriseafgani_', 'afgani_', 'grapeapeafgani_', 'krishnaafgani_', 'hashplantafgani_', 'durbinpoisonafgani_'];
var priceStr = 'price';
var quantityStr = 'quantity';
var subtotalStr = 'subtotal';
var total = 0.00;
for (var i = 0; i < strains.length; i++) {
var priceInput = document.getElementById(strains[i] + priceStr);
var quantityInput = document.getElementById(strains[i] + quantityStr);
var subTotalDiv = document.getElementById(strains[i] + subtotalStr);
if(subTotalDiv) {
var price = priceInput.value;
var quantity = quantityInput.value;
subTotalDiv
.innerHTML = parseInt(price) * parseInt(quantity);
total += price * quantity;
}
}
document.getElementById("finaltotal").value = total;
}
function setup() {
var lastCol = document.getElementById("subtotal_header");
var theForm = document.getElementById("orderform");
var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
amounts[i].onchange = doTotals;
}
}
window.onload = setup;
<div class="form-group mb-3">
<label class="form-control-label" for="guptakush_quantity">Gupta Kush</label>
<input type="hidden" id="guptakush_price" value="1.00">
<select class="form-control-inline form-control-sm" id="guptakush_quantity" name="guptakush_quantity" size="1">
<option value="0">0</option>
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="hidden" id="guptakush_subtotal">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control-inline col-sm-1" id="finaltotal" name="finaltotal" placeholder="$0.00" readonly>
</div>

Plenty of issues:
You hadn't defined subtotalStr, so that was null
You weren't executing your setup function because you didn't include parentheses
Your <strong> element doesn't seem to be populatable when selecting it by ID (not sure what was up w/that, but changing it to a div worked).
Check this: https://jsfiddle.net/mj1z9bvq/
In my version, I fixed the first two problems. And then for the first <strong> element, I replaced it with a <div> so you could see the output. You'll have to go through and do something similar for the others.

Add select option with other select tag

I want to use <select id="dropdown_for_add"> to add the list in the <select id="mySelect">
If I choose the "Add Item" option, it will add option in <select id="mySelect">
The problem is
after add item, if I choose other option of <select id="dropdown_for_add"> (A, B, C option ), I want to remove the recently add item of <select id="mySelect">
How to add more than 2 option at once? Now I can add only one item to <select id="mySelect">
function myFunction() {
if (document.getElementById("dropdown_for_add").value == 2) {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Item1";
x.add(option);
option.text = "Item2";
x.add(option);
}
}
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<select id="dropdown_for_add" onchange="myFunction()">
<option value="1">A</option>
<option value="2">Add item</option>
<option value="3">B</option>
<option value="4">C</option>
</select>
</form>
<br>

This is expected behavior. As option refers to same DOM element you can't append it twice, Simplest solution is to create another option.
var option2 = document.createElement("option");
option2.text = "Item2";
x.add(option2);
To remove options you have iterate
if (document.getElementById("dropdown_for_add").value == 2) {
...
} else {
for (var i = x.length - 1; i >= 0; i--) {
if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
x.remove(i);
}
}
}
function myFunction() {
var x = document.getElementById("mySelect");
if (document.getElementById("dropdown_for_add").value == 2) {
var option = document.createElement("option");
option.text = "Item1";
x.add(option);
var option2 = document.createElement("option");
option2.text = "Item2";
x.add(option2);
} else {
for (var i = x.length-1; i >= 0; i--) {
if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
x.remove(i);
}
}
}
}
<select id="dropdown_for_add" onchange="myFunction()">
<option value="1">A</option>
<option value="2">Add item</option>
<option value="3">B</option>
<option value="4">C</option>
</select>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
Other options is to use cloneNode()
var option2 = option.cloneNode();
option2.text = "Item2";
x.add(option2);
function myFunction() {
var x = document.getElementById("mySelect");
if (document.getElementById("dropdown_for_add").value == 2) {
var option = document.createElement("option");
option.text = "Item1";
x.add(option);
var option2 = option.cloneNode();
option2.text = "Item2";
x.add(option2);
} else {
for (var i = x.length-1; i >= 0; i--) {
if (x.options[i].value == 'Item1' || x.options[i].value == 'Item2') {
x.remove(i);
}
}
}
}
<select id="dropdown_for_add" onchange="myFunction()">
<option value="1">A</option>
<option value="2">Add item</option>
<option value="3">B</option>
<option value="4">C</option>
</select>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>

One method is to use Select add() Method. Then you have to use remove method in order to remove added elements.
function myFunction() {
if (document.getElementById("dropdown_for_add").value == 2) {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
x.add(new Option('Item1',"Item1"));
x.add(new Option('Item2',"Item2"));
}
else{
var x = document.getElementById("mySelect");
if(x[x.length-1].text=="Item2"){
x.remove(x.length-1);
x.remove(x.length-1);
}
}
}
<select id="dropdown_for_add" onchange="myFunction()">
<option value="1">A</option>
<option value="2">Add item</option>
<option value="3">B</option>
<option value="4">C</option>
</select>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>

Remove specific value in Javascript Array dynamically

I want to remove a specific value from an array.
For example:
var categories = ["Lenovo","Large","100"];
I displayed it like this
HTML CODE:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
How can I achieve this?
I tried it so many times but I failed because I cant get the value. You can check my code:
jQuery("#filter").val()
jQuery(function() {
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories = [];
if (brand) {
categories.push(brand);
}
if (screen_size) {
categories.push(screen_size);
}
if (cpu) {
categories.push(cpu);
}
if (memory) {
categories.push(memory);
}
if (price) {
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
var categories3 = "";
for (var i = 0; i < length; i++) {
var cat_id = "cat" + i;
categories3 += "<div class='filter_style'>" + categories[i] + "<a href='" + cat_id + "' id='" + cat_id + "' onclick='removeCat(event)'><span style='margin-left:15px;color:gray;' >x</span></a></div>";
jQuery("#filter").html(categories3);
}   
});
});
function removeCat(evt) {
evt.preventDefault();
var catid = jQuery(this).attr('href');
var cat = jQuery(this).data("id");
//jQuery.grep(); maybe or indexOf first then slice() but I do not get the value
alert(catid);
}

You can simply remove element from array using below method
categories .splice( $.inArray(removeItem, categories), 1 );//removeItem is name of item which you want to remove from array

If you want to remove, for example, "Lenovo" from:
var categories = ["Lenovo","Large","100"];
do:
categories.splice(0)

Calculate total price script not working

I want to calculate the total price and display the subtotal at the bottom of the form, but it's not working and I don't know why.
The subtotal should be showing the total price after substraction or addition of the elements "prijsvolwassenen", "prijskinderen", "prijspeuters" and "prijskamertype"
FIDDLE HERE
this is my script
$(document).ready(function calculatePrice(formclear) {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen+kinderen+peuters+kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;
}
}
And here is the HTML:
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label>
<span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" onChange="calculatePrice()" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label>
<span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" onChange="calculatePrice()" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label>
<span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" onChange="calculatePrice()" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label>
<span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" onChange="calculatePrice()" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label>
<button type="button" onclick="calculatePrice()">Calculate</button>
</label>
<label>
<span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10"/>
</label>
</form>

You are actually mixing up things there. You tried to use document ready that's part of the jQuery library (which you're not loading nor using anywhere in your code), when actually you just needed to declare a function.
This script should work for you:
<head>
<script type="text/javascript">
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
</script>
</head>
Demo

Your problem is a simple syntax error.
At the end of your code, you have
}
}
The first } closes the function, but the second } is causing an error. Try replacing it with a ) to close the ready function.
Also, I noticed that you didn't reference jQuery, so that is also causing an error. In the left, change the text-box that says "No-Library (pure JS)" to a version of jQuery.

You should make more use of jQuery when referencing it (which you forgot to do in your fiddle by the way). What I think you want to achieve is something like this:
FIDDLE
HTML
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label> <span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label> <span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label> <span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label> <span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label> <span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10" />
</label>
</form>
JS
$(document).ready(function () {
$("select").on("change", function () {
CalculatePrice();
});
$("#CalculatePrice").on("click", function () {
CalculatePrice();
});
});
function CalculatePrice()
{
var pv = parseInt($("#prijsvolwassenen").val(), 10);
var pk = parseInt($("#prijskinderen").val(), 10);
var pp = parseInt($("#prijspeuters").val(), 10);
var pkt = parseInt($("#prijskamertype").val(), 10);
if (!isNaN(pkt))
$("#PicExtPrice").val(pv+pk+pp+pkt);
}
EDIT: Updated answer using vanilla JS:
Make your JS like this:
JS
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//check if each value is a number and calculate total value
if (!isNaN(volwassenen) && !isNaN(kinderen) && !isNaN(peuters) && !isNaN(kamertype)) {
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
}
VANILLA FIDDLE

More DRY code http://jsfiddle.net/B6mPP/6/
$(function(){
var fields = $('#prijsvolwassenen,#prijskinderen,#prijspeuters,#prijskamertype'),
total = $('#PicExtPrice');
function calculateTotal(){
var sum = 0;
fields.each(function(){
var value = parseInt($(this).val());
value == value && (sum += value);
})
total.val(sum);
};
fields.change(calculateTotal);
$('#calculate').click(calculateTotal);
});

demo: https://so.lucafilosofi.com/calculate-total-price-script-not-working/
$(function(){
$('.autowidthselect').on('change', function(){
calculatePrice();
});
$('button').on('click', function(){
calculatePrice();
return false;
});
function calculatePrice() {
var total = 0;
$('.autowidthselect').each(function(){
total += !isNaN(this.value) ? parseInt(this.value) : 0;
});
$("#PicExtPrice").val(total);
}
});
vanila javascript fix
http://jsfiddle.net/B6mPP/10/