JS autocalculate multiple fields for total - javascript

I have looked at multiple examples of js being used to auto calculate the total but haven't found any applicable for me which has fields calculating different numbers to be combined to create a total. Here is my code below so you can understand more.
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
function Calc(className){
var elements = document.getElementsByClassName(className);
var totalCost = 0;
for(var i = 0; i < elements.length; i++){
totalCost += parseInt(elements[i].value);
}
document.tickets.totalCost.value = '£' + totalCost;
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onclick="Calc('adultTotal')">
<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>
</select>
<label for="pricing"> X £18</label><br><br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2">
<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>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label><br><br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onclick="Calc('childBox1')">
<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>
</select>
<label for="pricing"> X £10</label><br><br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onclick="Calc('childBox2')">
<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>
</select>
<label for="pricing"> X £13</label><br><br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onclick="Calc('rtnJourney')">Return Journey - If unchecked, price is halved<br>
Total: <input type="text" id="totalCost" name="totalCost">
</form>
</body></html>
Now I understand why the above JS code doesn't work and I fetched this from one of the examples online which took every value from a CLASS and combined them but since I have different multiplication values for each entry I tried to modify it which didn't workout. I am not sure how to do what I need it to do to calculate the total. Also please note that it doesn't add the values yet, for now I just want to make it calculate the total from all the fields.
p.s I am really not familiar with JS and I really appreciate any help given.


<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script language="javascript">
var map = {
"noAdults": {
value: 0,
multiplier: 18
},
"childUnder2": {
value: 0,
multiplier: 0
},
"childBox1": {
value: 0,
multiplier: 10
},
"childBox2": {
value: 0,
multiplier: 13
}
}
var rtnJourney = false;
function displayTotal() {
var total = 0;
for (var key in map) {
total += map[key].value * map[key].multiplier;
}
total = rtnJourney ? total * 2 : total;
document.tickets.totalCost.value = '£' + total;
}
function getTotal(dom) {
map[dom.id].value = dom.value;
displayTotal();
}
function getChecked(dom) {
rtnJourney = dom.checked;
displayTotal();
}
</script>
</head>
<body>
<form name="tickets" id="tickets">
<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
<label for="noAdults"> Number of Adults</label>
<select name="noAdults" id="noAdults" class="adultTotal" onchange="getTotal(this)">
<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>
</select>
<label for="pricing"> X £18</label>
<br>
<br>
<!--Not class as children under 2 are not charged-->
<label for="childUnder2"> Number of Children aged 2 or less </label>
<select name="childUnder2" id="childUnder2" onchange="getTotal(this)">
<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>
</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
<label for="pricing"> X £FREE</label>
<br>
<br>
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->
<label for="childBox1"> Number of Children aged 3-10</label>
<select name="childBox1" id="childBox1" class="childBox1" onchange="getTotal(this)">
<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>
</select>
<label for="pricing"> X £10</label>
<br>
<br>
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
<label for="childBox2"> Number of Children aged 11-16</label>
<select name="childBox2" id="childBox2" class="childBox2" onchange="getTotal(this)">
<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>
</select>
<label for="pricing"> X £13</label>
<br>
<br>
<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onchange="getChecked(this)">Return Journey - If unchecked, price is halved
<br> Total:
<input type="text" id="totalCost" name="totalCost">
</form>
</body>
</html>

Related

Calculate 2 different select custom data attributes with jQuery

I need to calculate data-price attribute rather than option value, I have created the code which works fine with value but my database has the different column which I don't want to change, the below example works fine with value but I want to know what changes should I make to get the value of data-price attribute
$('#CPU').on("change",function(){
var CPU = $("#CPU option:selected").attr('data-price');
$("#SelectedCPUResult").html(CPU);
});
// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
var RAM = $("#RAM option:selected").attr('data-price');
$("#SelectedRAMResult").html(RAM);
});
$(function () {
var fields = $('#form1 :input').change(calculate);
function calculate() {
var price = 0;
fields.each(function () {
price += +$(this).val();
})
$('#price').html(price.toFixed(2));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<div>
<label for="CPU">CPU</label>
<select name="CPU" id="CPU">
<option value="">Select CPU</option>
<option value="9.99" data-price="9.99">1 Month</option>
<option value="19.99" data-price="19.99">3 Months</option>
<option value="29.99" data-price="29.99">6 Months</option>
<option value="39.99" data-price="39.99">12 Months</option>
<!-- Actual fields -->
<!-- <option value="1" data-price="9.99">1 Month</option> -->
<!-- <option value="3" data-price="9.99">3 Months</option> -->
<!-- <option value="6" data-price="9.99">6 Months</option> -->
<!-- <option value="12" data-price="9.99">12 MOnths</option> -->
</select>
<span id="SelectedCPUResult">9.99</span>
</div>
<div>
<label for="RAM">RAM</label>
<select name="RAM" id="RAM">
<option value="">Select RAM</option>
<option value="9.99" data-price="9.99">1 Month</option>
<option value="19.99" data-price="19.99">3 Months</option>
<option value="29.99" data-price="29.99">6 Months</option>
<option value="39.99" data-price="39.99">12 Months</option>
<!-- Actual fields -->
<!-- <option value="monthly" data-price="9.99">1 Month</option -->
<!-- <option value="quarterly" data-price="9.99">3 Months</option> -->
<!-- <option value="semianuually" data-price="9.99">6 Months</option> -->
<!-- <option value="annually" data-price="9.99">12 Months</option> -->
</select>
<span id="SelectedRAMResult">9.99</span>
</div>
</form>
<hr>
Price: <u id="price">19.98</u>
Your help in this regards would be highly appreciated.

just change that:
function calculate() {
var price = 0;
fields.each(function () {
price += parseFloat($(this).attr('data-price'));
})
$('#price').html(price.toFixed(2));
}
You were using ".val()" (which gets the value) and I changed it to ".attr('data-price')" (wich looks for a attribute with the "data-price" name) and convert it to a float.
$('#CPU').on("change",function(){
var CPU = $("#CPU option:selected").attr('data-price');
$("#SelectedCPUResult").html(CPU);
});
// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
var RAM = $("#RAM option:selected").attr('data-price');
$("#SelectedRAMResult").html(RAM);
});
$(function () {
//var fields = $('#form1 :input').change(calculate);
$('#form1 :input').change(calculate);
function calculate() {
var price = 0;
$('.partial').each(function (idx, el) {
price += parseFloat($(el).html());
})
$('#price').html(price.toFixed(2));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<div>
<label for="CPU">CPU</label>
<select name="CPU" id="CPU">
<option value="">Select CPU</option>
<option value="1" data-price="9.99">1 Month</option>
<option value="3" data-price="19.99">3 Months</option>
<option value="6" data-price="29.99">6 Months</option>
<option value="12" data-price="39.99">12 MOnths</option>
</select>
<span class="partial" id="SelectedCPUResult">9.99</span>
</div>
<div>
<label for="RAM">RAM</label>
<select name="RAM" id="RAM">
<option value="">Select RAM</option>
<option value="monthly" data-price="9.99">1 Month</option>
<option value="quarterly" data-price="19.99">3 Months</option>
<option value="semianuually" data-price="29.99">6 Months</option>
<option value="annually" data-price="39.99">12 Months</option>
</select>
<span class="partial" id="SelectedRAMResult">9.99</span>
</div>
</form>
<hr>
Price: <u id="price">19.98</u>

hide dropdown option on change of another dropdown option

I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>

You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>

Display multiple selectbox and radio button values values in div

I have a site that allows users to "guess / predict" the result of a sports match
To give you an idea what I am trying to achieve have a look at the following image:
The selected teams gets displayed at the bottom of the page (as you can see on the bottom circle of the image)
What Im trying to do
Im trying to modify the script to not only display the selected team at the bottom of the page but also the selected score
Example
Chiefs by 12
Have a look at my fiddle to get an idea of what I am doing, if anyone can help me to modify my script to include the score aswell it would be tremendously appreciated
My Code:
$(document).ready(function() {
$(':radio').change(function(e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function(ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">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>
<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">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>
<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">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>
<div id="dispPicks"></div>
Fiddle Link

You can put related radio buttons and select box in a div and assign a class to it lets say team, then read checked radio button and value of select box in the same div as checked radio button belogs to. see below code -
HTML
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">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>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">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>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">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>
</div>
<div id="dispPicks"></div>
JQuery
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
JSfiddle Demo

I've made a few changes which I thought were essential:
1. since a team can't win by the score of 0, 0 is out of the select boxes
2. I gave all the select tags a data-name according to its radio button's names
and here we go DEMO
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var name=$(this).attr('name');
if($(this).val()=='Draw'){
$('#dispPicks').append($(ele).val());
}
else{
$('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
}
});
});
});

I think you to use more id's and names.
This is what i made for you, it just basic to let you understand what i mean:
$(':radio').change(function(e) {
x = $(this).attr('name');
y = $('input[name=' + x + ']:checked').val();
$("#" + x).html(y);
});
$("select").change(function() {
x = $(this).attr('name');
y = $(this).val();
$("#" + x).html(" by " + y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
<option value="">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="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
<option value="">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>
<div id="picks">
<br /><span id="pick1"></span><span id="howMuch1"></span>
<br /><span id="pick2"></span><span id="howMuch2"></span>
</div>
On event (change) we make x our target and y our value.. rest is a case of put it right ;)

Prevent selecting same value in three different dropdowns

I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<script>
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
</head>
<body>
<select id="select_1" onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
</body>
</html>
Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?
http://jsfiddle.net/x4E5Q/1/

Try This:
HTML
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select3" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
JS
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
Demo

See below code
$(document).ready(function() {
$("select").on('hover', function () {
$previousValue = $(this).val();
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
$("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
});
});
$("#confirm-form").submit(function(e) {
e.preventDefault();
$("select").find("option").removeAttr('disabled');
document.getElementById('confirm-form').submit();
});

$(document).ready(function(){
$("select").on('focus', function () {
$("select").find("option[value='"+ $(this).val() + "']").attr('disabled', false);
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
});
});

How to remove an option from select element after it's been selected in another select element with javascript [duplicate]

This question already has answers here:
Remove an option once it is selected in previous dropdowns
(2 answers)
Closed 3 years ago.
Thanks in advance for any help!
I have five select elements on the same form, and with the same options. I would like to have any selected option be removed from the other four select elements when the user clicks on them. I'm hoping to use a simple JS for this. Any advice would be great. Thanks!
This is what I have tried so far
JS:
<script>
function removeSelected(obj){
var sel1= document.getElementsByName('program1');
var sel2= document.getElementsByName('program2');
var sel3= document.getElementsByName('program3');
var sel4= document.getElementsByName('program4');
var sel5= document.getElementsByName('program5');
obj.remove(sel1.selectedIndex);
obj.remove(sel2.selectedIndex);
obj.remove(sel3.selectedIndex);
obj.remove(sel4.selectedIndex);
obj.remove(sel5.selectedIndex);
}
</script>
Where "program1, program2, etc." is the name of each select element
HTML:
<label for= "cName" class= "floatLabel">Please Select A Program<span>*</span></label>
<select name="program1" class="floatCtrl" id="cName" required="required" onchange="document.getElementById('program1_text').value=this.options[this.selectedIndex].text" onfocus=" removeSelected(this)">
<option value="" selected> </option>
<option value="1"> Break Dancing 7/2/2013 $40.00</option>
<option value="2"> Guitar 7/10/2013 $40.00</option>
<option value="3"> Drums 7/12/2013 $40.00</option>
<option value="4"> Drawing 6/19/2013 $78.00</option>
<option value="5"> Watercolor Painting 6/19/2013 $78.00</option>
<option value="6"> Kids Art 8/7/2013 $30.00</option>
<option value="7"> Book Making 6/12/2013 $40.00</option>
<option value="8"> Writing 6/25/2013 $50.00</option>
<option value="9"> Dog Obedience 6/5/2013 $45.00</option>
<option value="10"> Skateboarding 7/30/2013 $40.00</option>
<option value="11"> Dodgeball 8/7/2013 $5.00</option>
<option value="12"> Jumprope 8/6/2013 $25.00</option>
<option value="13"> Swimming 6/2/13 $40.00</option>
<option value="14"> Games 7/2/2013 $20.00</option>
<option value="15"> Tennis 1 6/18/2013 $30.00</option>
<option value="16"> Tennis 2 6/25/2103 $30.00</option>
<option value="17"> Tennis 3 7/2/2013 $25.00</option>
<option value="18"> Tennis 4 7/16/2013 $25.00</option>
<option value="19"> Tennis 5 7/23/2013 $35.00</option>
<option value="20"> Tumbling 5/23/2013 $25.00</option>
<option value="21"> Backyard Discovery 7/20/2013 $5.00</option>
<option value="22"> Applegate Discovery 7/27/2013 $10.00</option>
<option value="23"> Mountain Adventure 8/3/2013 $10.00 </option>
</select>
<input type="hidden" name="program1_text" id="program1_text" value="" />
I'm trying to call removeSelected(this) in the onfocus event.

HTML
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Javascript
var options = document.getElementsByTagName("option");
for(var i = 0; i < options.length; i++){
options[i].onclick = function(){
var value = this.value;
console.log(value);
for(var x = 0; x < options.length; x++){
if(options[x].value == value){
options[x].parentNode.removeChild(options[x]);
}
}
}
}
Example http://jsfiddle.net/stJqd/

Categories

Resources