Getting javascript to output calculation to HTML - javascript

Hey im having trouble getting my javascript to ouput my calculations into my html...
if you can please check my code and see where i might be going wrong thatd be great
var doorDesign_Prices= new Array();
doorDesign_Prices["None"]=0;
doorDesign_Prices["PRP15"]=8.10;
doorDesign_Prices["PRP15 Deluxe"]=12.30;
doorDesign_Prices["PRP15 R"]=11.05;
doorDesign_Prices["PRP25"]=11.30;
doorDesign_Prices["PRP2525"]=13.35;
doorDesign_Prices["PRP35"]=11.30;
doorDesign_Prices["PRP45"]=13.90;
doorDesign_Prices["PRP55"]=17.85;
doorDesign_Prices["PRP5555"]=26.75;
doorDesign_Prices["PRP65"]=11.30;
doorDesign_Prices["PRP6565"]=13.60;
doorDesign_Prices["PRP85"]=17.75;
doorDesign_Prices["PRP95"]=11.30;
doorDesign_Prices["PRP9595"]=13.35;
doorDesign_Prices["PRP100"]=23.20;
doorDesign_Prices["PRP105"]=31.75;
doorDesign_Prices["PRP110"]=30.75;
doorDesign_Prices["PRP110110"]=35.75;
doorDesign_Prices["PRP181"]=21.75;
doorDesign_Prices["PRP185"]=21.75;
doorDesign_Prices["PRP190"]=10.10;
doorDesign_Prices["PRP200M"]=20.75;
doorDesign_Prices["PRP201M"]=20.75;
doorDesign_Prices["PRP201MT"]=20.75;
function getDoorDesign() {
var doorDesignSelect = document.getElementById('doorDesign');
return doorDesign_Prices[doorDesignSelect.value];
}
var woodType_Prices= new Array();
woodType_Prices["None"]=10.01;
woodType_Prices["C. Pine"]=14.60;
woodType_Prices["Cherry"]=7.00;
woodType_Prices["Hickory"]=5.40;
woodType_Prices["K Pine"]=24.00;
woodType_Prices["Mahogany"]=12.51;
woodType_Prices["Maple"]=7.46;
woodType_Prices["Pt. Grade"]=18.16;
woodType_Prices["R. Birch"]=9.18;
woodType_Prices["Red Oak"]=13.12;
woodType_Prices["Sapele"]=7.03;
woodType_Prices["W. Ash"]=12.04;
woodType_Prices["W. Oak"]=8.05;
woodType_Prices["Walnut"]=11.05;
function getWoodType() {
var woodTypeSelect = document.getElementById('woodType');
return woodType_Prices[woodTypeSelect.value];
}
var lipType_Prices= new Array();
lipType_Prices["A"]=0.95;
lipType_Prices["B"]=0.95;
lipType_Prices["C"]=1.90;
lipType_Prices["D"]=0.95;
lipType_Prices["E"]=0.95;
lipType_Prices["F"]=0.95;
lipType_Prices["I"]=0.95;
lipType_Prices["L"]=0.95;
lipType_Prices["M"]=0.95;
lipType_Prices["R"]=0.95;
lipType_Prices["S"]=0.95;
lipType_Prices["T"]=0.95;
lipType_Prices["Z"]=0.95;
function getLipType() {
var lipTypeSelect = document.getElementById('lipType');
//alert(filling_prices[cakeSelect.value]);
return lipType_Prices[lipTypeSelect.value];
}
var mouldType_Prices= new Array();
mouldType_Prices["4/4"]=0;
mouldType_Prices["5/4"]=0;
mouldType_Prices["Deluxe"]=0;
mouldType_Prices["M"]=0;
mouldType_Prices["P"]=0;
mouldType_Prices["S"]=0;
mouldType_Prices["T"]=0;
mouldType_Prices["A"]=0;
mouldType_Prices["V"]=0;
mouldType_Prices["228"]=0;
mouldType_Prices["MT"]=0;
function getMouldType() {
var mouldTypeSelect = document.getElementById('mouldType');
return mouldType_Prices[mouldTypeSelect.value];
}
var panelType_Prices= new Array();
panelType_Prices["A"]=0;
panelType_Prices["B"]=0;
panelType_Prices["C"]=0;
panelType_Prices["D"]=0;
panelType_Prices["E"]=0;
panelType_Prices["F"]=0;
panelType_Prices["M"]=0;
panelType_Prices["O"]=0;
panelType_Prices["Q"]=0;
panelType_Prices["R"]=0;
panelType_Prices["S"]=0;
panelType_Prices["T"]=0;
panelType_Prices["V"]=0;
panelType_Prices["Rev C"]=0;
panelType_Prices["Rev F"]=0;
panelType_Prices["Bead"]=0;
function getPanelType() {
var panelTypeSelect = document.getElementById('panelType');
return panelType_Prices[panelTypeSelect.value];
}
var gradeAndThickness_Prices= new Array();
gradeAndThickness_Prices["None"]=0;
gradeAndThickness_Prices["4/4 Standard"]=13.12;
gradeAndThickness_Prices["4/4 Select"]=17.06;
gradeAndThickness_Prices["5/4 Standard"]=17.06;
gradeAndThickness_Prices["5/4 Select"]=22.17;
function getGradeAndThickness() {
var gradeAndThicknessSelect = document.getElementById('gradeAndThickness');
return gradeAndThickness_Prices[gradeAndThicknessSelect.value];
}
var doorOptions_Prices= new Array();
doorOptions_Prices["None"]=0;
doorOptions_Prices["Finger Pulls"]=2.00;
doorOptions_Prices["Hinge Holes"]=5.00;
doorOptions_Prices["Lip As Pair"]=2.00;
function getDoorOptions() {
var doorOptionsSelect = document.getElementById('doorOptions');
return doorOptions_Prices[doorOptionsSelect.value];
}
function calculateTotal() {
var total = getDoorDesign() + getWoodType() + getMouldType() + getPanelType() + getGradeAndThickness + getFinish + getDoorOptions;
var totalEl = document.getElementById('totalPrice');
document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total;
}
function hideTotal() {
var totalEl = document.getElementById('totalPrice');
totalEl.style.display = 'none';
}
<HEAD>
<script src="OrderForm.js"></script>
</HEAD>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="orderForm" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<table align=center border=0 width=300 cellpadding="1">
<tr>
<td>
<select id="doorDesign" name='doorDesign' onchange="calculateTotal()">
<option>Door Design</option>
<option value="PRP15">PRP15</option>
<option value="PRP15 DELUXE">PRP15 DELUXE</option>
<option value="PRP 15 R">PRP15 R</option>
<option value="PRP25">PRP25</option>
<option value="PRP2525">PRP2525</option>
<option value="PRP35">PRP35</option>
<option value="PRP45">PRP45</option>
<option value="PRP55">PRP55</option>
<option value="PRP5555">PRP5555</option>
<option value="PRP65">PRP65</option>
<option value="PRP6565">PRP6565</option>
<option value="PRP85">PRP85</option>
<option value="PRP95">PRP95</option>
<option value="PRP9595">PRP9595</option>
<option value="PRP100">PRP100</option>
<option value="PRP105">PRP105</option>
<option value="PRP110">PRP110</option>
<option value="PRP110110">PRP110110</option>
<option value="PRP181">PRP181</option>
<option value="PRP185">PRP185</option>
<option value="PRP190">PRP190</option>
<option value="PRP200M">PRP200M</option>
<option value="PRP201M">PRP201M</option>
<option value="PRP201MT">PRP201MT</option>
</select>
</td>
<td>
<select id="woodType" name='woodType' onchange="calculateTotal()">
<option>Wood Type</option>
<option value="C. Pine">C. Pine</option>
<option value="Cherry">Cherry</option>
<option value="Hickory">Hickory</option>
<option value="K. Pine">K. Pine</option>
<option value="Mahogany">Mahogany</option>
<option value="Maple">Maple</option>
<option value="Pt. Grade">Pt. Grade</option>
<option value="R. Birch">R. Birch</option>
<option value="Red Oak">Red Oak</option>
<option value="Sapele">Sapele</option>
<option value="W. Ash">W. Ash</option>
<option value="W. Birch">W. Birch</option>
<option value="W. Oak">W. Oak</option>
<option value="Walnut">Walnut</option>
</select>
</td>
<td>
<select id="lipType" name='lipType' onchange="calculateTotal()">
<option>Lip Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="I">I</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="Z">Z</option>
</select>
</td>
<td>
<select id="mouldType" name='mouldType' onchange="calculateTotal()">
<option>Mould Type</option>
<option value="4/4">4/4</option>
<option value="5/4">5/4</option>
<option value="Delue">Deluxe</option>
<option value="M">M</option>
<option value="P">P</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="A">A</option>
<option value="V">V</option>
<option value="228">228</option>
<option value="MT">MT</option>
</select>
</td>
<td>
<select id="panelType" name='panelType' onchange="calculateTotal()">
<option>Panel Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="M">M</option>
<option value="O">O</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="V">V</option>
<option value="Rev C">Rev C</option>
<option value="Rev F">Rev F</option>
<option value="Bead">Bead</option>
</select>
</td>
<td>
<select id="gradeAndThickness" name='gradeAndThickness' onchange="calculateTotal()">
<option>Grade and Thickness</option>
<option value="4/4 Standard">4/4 Standard</option>
<option value="4/4 Select">4/4 Select</option>
<option value="5/4 Standard">5/4 Standard</option>
<option value="5/4 Select">5/4 Select</option>
</select>
</td>
<td>
<select id="finish" name='finish' onchange="calculateTotal()">
<option>Finish</option>
<option value="Clear">Clear</option>
<option value="Wheat">Wheat</option>
<option value="Fruitwood">Fruitwood</option>
<option value="Heartwood">Heartwood</option>
<option value="White Stain">White Stain</option>
<option value="Cinnamon">Cinnamon</option>
<option value="W. Prime">W. Prime</option>
</select>
</td>
<td>
<select id="doorOptions" name='doorOptions' onchange="calculateTotal()">
<option>Options</option>
<option value="Finger Pulls">Finger Pulls</option>
<option value="Hinge Holes">Hinge Holes</option>
<option value="Lip As Pair">Lip As Pair</option>
</select>
</td>
</tr>
</table>
</div>
<div id="totalPrice"></div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>
</div>
</body>
</html>
For now I just want to be able to output the calculations into my HTML before I make this form any more complicated.


the variable getFinish is not declare at function calculateTotal(). so you should declare this variable or function before using it.


in tag remove onload='hideTotal()' it will output your javascript calculations into my html

Related

How to check if a selected option is of higher value than one from another dropdown?

So I have these two dropdown lists in html that look like this :
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>
What I would like to do, is when the user selects in the first dropdown a certain number, to disable the ones that are of lower value in the second dropdown list. For example if I select 400, the options "Less than 200" and "200" should be disabled in the dropdown.
I kind of have the idea on how to work around this, but I just don't really know how I can check what the user chose and do my tests based on that. Any help is appreciated !

Try like this:
var obj_1 = document.querySelector('select[name="obj_1"]');
var obj_2_options = document.querySelectorAll('select[name="obj_2"] option');
obj_1.onchange = function() {
var val_1 = parseInt(obj_1.value.replace("'", ""));
for (var i = 0; i < obj_2_options.length; i++) {
var val_2 = parseInt(obj_2_options[i].value.replace("'", ""));
obj_2_options[i].disabled = (val_2 < val_1);
}
}
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>
By looping through the option values for obj_2, you can compare them to the value of obj_1 and disable them accordingly.
EDIT: In jQuery this would be:
var obj_1 = $('select[name="obj_1"]');
var obj_2_options = $('select[name="obj_2"] option');
obj_1.on('change', function() {
var val_1 = parseInt(obj_1.val().replace("'", ""));
obj_2_options.each(function() {
var val_2 = parseInt($(this).val().replace("'", ""));
$(this).attr('disabled', (val_2 < val_1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<SELECT name="obj_1" size="1" class="archive-select">
<OPTION selected disabled>from</OPTION>
<OPTION value="1">Less than 200</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
<OPTION selected disabled>to</OPTION>
<OPTION value="200">200</OPTION>
<OPTION value="400">400</OPTION>
<OPTION value="600">600</OPTION>
<OPTION value="800">800</OPTION>
<OPTION value="1000">1'000</OPTION>
<OPTION value="1200">1'200</OPTION>
<OPTION value="1400">1'400</OPTION>
<OPTION value="1600">1'600</OPTION>
<OPTION value="1800">1'800</OPTION>
<OPTION value="2000">2'000</OPTION>
<OPTION value="2200">2'200</OPTION>
<OPTION value="2400">2'400</OPTION>
<OPTION value="2600">2'600</OPTION>
<OPTION value="2800">2'800</OPTION>
<OPTION value="3000">3'000</OPTION>
<OPTION value="300000">More than 3'000</OPTION>
</SELECT>

javascript. how to move selection on the top of a list

sry for my english. but i hope you can understand what my problem is.
i have a dropdown-menu where i have all letters from A to Z. in a list, i have a lot of names. when i select a letter in the dropdown menu, it should select the same letter in the list. that works so far, but how can i move the selected letter to the top of the list?
<div align="center"><html>
<head>
<script language="JavaScript">
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<label>Select letter:
<select name="Letters"onClick="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
...
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
</body>
</html>
</div>

Use Element#scrollIntoView. Add the below line just before the break statement in your function Eingabe.
document.getElementById('Names').options[i].scrollIntoView();
EDIT: Also change onClick to onchange. Refer working snippet added below.
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
document.getElementById('Names').options[i].scrollIntoView();
break;
}
}
}
<label>Select letter:
<select name="Letters" onchange="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>

How to add the id from the certain div element in a javascript array?

<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</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>`enter code here`
</td>
<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</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> </td>
<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</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> </td>
I have a three table cell having different id. Here i want to get the id when user select the option of respective id and add id in a array when user select the two or more then two option value from different table cell in a same time.
I have a javascript code also.It shows same id in alert frequently in every selection of option value of same id.Please someone help me.
$(document).ready(function() {
$(document).on('change', '.available-room', function () {
var room_id = new Array();
room_id.push($(this).parent('td').attr('id'));
alert(room_id);
});
});

You must declare id as unique in a file so you can get value by $(this).val() and array declaration var room_id = new Array() must be outside .on('change',function(){....});
<table>
<td class="row" id="roomToBook_1">
<select class="available-room" style="" id="roomToBook1">
<option value="0">Select</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>
</td>
<td class="row" id="roomToBook_2">
<select class="available-room" style="" id="roomToBook2">
<option value="0">Select</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> </td>
<td class="row" id="roomToBook_3">
<select class="available-room" style="" id="roomToBook3">
<option value="0">Select</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> </td>
</table>
<script>
$(document).ready(function () {
var room_id = new Array();
$(document).on('change', '.available-room', function () {
room_id.push($(this).val());
//alert(room_id);
alert(JSON.stringify(room_id));
});
});
</script>

Get or Set Value(s) on A Multi-select Form Field

When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?

It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>

Change text align of div from dropdown selection?

I have a few dropdown list to style the font of a div. However i cant seem to get the align to work. Please help!!
I have always found my answers on google and not had such a tough time getting round things. The align is really bugging me, that i cant find a solution.
<SCRIPT LANGUAGE="JavaScript">
function fontSize(size){
document.getElementById("lineOne").style.fontSize = size
}
function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}
function fontStyle(style) {
document.getElementById("lineOne").style.fontStyle = style
}
function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function alignl(ele){
document.getElementById("lineOne").style.align = ele
}
</SCRIPT>
And the body is aa such:
<body>
Size:
<select name=fontSizeChanger onchange="fontSize(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
Colour:
<select id="color" onclick="setColor();">
<option value="white">white</option>
<optionvalue="black"selected="selected">black</option>
<option value="red">red</option>
<option value="lightblue">light blue</option>
<option value="darkblue">dark blue</option>
<option value="lightgreen">light green</option>
<option value="darkgreen">dark green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
</select>
Family:
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="sans-serif" selected="selected">Sans Serif</option>
<option value="Impact">Impact</option>
<option value="times new roman">Times New Roman</option>
</select>
Style:
<select id="fontStyleChanger" onchange="fontStyle(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
Weight:
<select id="fontWeightChanger" onchange="fontWeight(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="bold">Bold</option>
</select>
Align:
<select id='s' name='s' onchange="alignl(this.value);">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="top">top</option>
</select>
<form name="myForm">
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<div id="myDiv">
<div id="lineOne"></div>
</div>
</body>

You can set the align in the same way you set the other styling properties, but the variable is named textAlign, not align.
function alignl(style) {
document.getElementById("lineOne").style.textAlign = style;
}

Categories