Number precision change on select option

Number precision change on select option - javascript

When I select option to 3 for example round number by 3 after comma. Can someone help me?
function LengthConverter(valNum) {
document.getElementById("outputMeters").innerHTML = (valNum * 1.8) + 32;
}
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision:
<select name="precision" id="opt" size="1" onchange="update()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select>
</td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>

toFixed() is your friend. It will also handle rounding. Though do note that it returns a string.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

See this helper function
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
It is a combination of Math.round and toFixed() which fills up zeros.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter()" onchange="LengthConverter()">
<td class="precision">Precision: <select name="precision" id="opt" size="1" onchange="LengthConverter()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter() {
var inputFeet = document.getElementById("inputFeet").value;
var opt = document.getElementById("opt").value.length;
document.getElementById("outputMeters").innerHTML = round((inputFeet * 1.8) + 32, --opt);
}
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
</script>

Your precision selector is calling an update function that isn't created, so you can get rid of the onchange="update()" . As people are saying use toFixed(), bellow is how you can implement it.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision: <select name="precision" id="opt" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" 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="12">12</option>
<option value="15">15</option>
<option value="18">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter(valNum) {
var percision = percision = document.getElementById("opt").value
var fahrenheitValue = (valNum*1.8)+32;
var stringWithPercision = fahrenheitValue.toFixed(percision);
document.getElementById("outputMeters").innerHTML=stringWithPercision;
}
</script>

The toFixed() method converts a number into a string, keeping a specified number of decimals.
const n = 4.8768;
const res = n.toFixed(2); // res is a string
console.log(res);
console.log(typeof(res));
Celsius in Fahrenheit:
F = (C x 1.8) + 32
Add event listeners to the <input> (keyup) and to the <select></select> (change).
Example
let celsius = document.getElementById("celsius");
let precision = document.getElementById("precision");
let fahrenheit = document.getElementById("fahrenheit");
function celsiusToFahrenheit(val) {
// F = (C x 1.8) + 32
return (val * 1.8) + 32;
}
function getResult(precision, val) {
return celsiusToFahrenheit(val).toFixed(precision);
}
celsius.addEventListener("keyup", function() {
let selectedValue = precision.options[precision.selectedIndex].value;
fahrenheit.innerHTML = getResult(selectedValue, this.value);
})
precision.addEventListener("change", function() {
let selectedValue = this.options[this.selectedIndex].value;
if (celsius.value) {
fahrenheit.innerHTML = getResult(selectedValue, celsius.value);
}
})
<section>
<span>Celsius:</span><input id="celsius" type="text"><span>Precision:</span>
<select name="" id="precision">
<option value="0" selected>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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</section>
<section>
<span>Fahrenheit:</span><span id="fahrenheit"></span>
</section>

Related

if and else condition

I am making a conditional script with js; if I select the partial option, it does half the amount, but I have incorporated "else" code so, when I select complete option, it's not showing the whole amount.
Here is the code:
var qty1 = $('#payamount').val();
if (qty1 = 'Partial') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2 / 2;
$("#totalprice").val(qty3);
});
} else if (qty1 = 'Complete') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2;
$("#totalprice").val(qty3);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<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>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>

You need ONE event handler
$('#payamount').on("change", onchange)
$('#quantity').on("change", onchange).change(); // initialise
function onchange() {
var qty2 = $('#quantity').val();
var qty1 = $('#payamount').val();
var qty3 = qty2;
if (qty1 === 'Partial') {
qty3 /= 2;
}
$("#totalprice").val(qty3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<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>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>

Javascript: alternative or less complex code to create hidden input forms

I ask for your help to improve the form I created, keeping in mind that I am not a great expert in javascript programming.
I need to create a hotel search engine, with the possibility to choose the total number of rooms. Depending on the number of rooms selected, as many hidden form fields will be displayed, containing additional selection fields.
To make the idea of what I have created better, I attach a screen.
To view the hidden fields in relation to the number of rooms chosen, I used this javascript code, repeated 5 times (maximum number of rooms).
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("room1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("pax_room_1").style.display = "block";
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
To realize the options for choosing each room, I used this javascript code repetition in proportion to the room number. That is: 1 room -> entered code 1 once; 2 rooms -> entered the code 2 times; etc.
function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("child1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild1").style.display = "block";
}
else{
document.getElementById("agechild1").style.display = "none";
}
}
else{
document.getElementById("agechild1").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child2").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild2").style.display = "block";
}
else{
document.getElementById("agechild2").style.display = "none";
}
}
else{
document.getElementById("agechild2").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child3").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild3").style.display = "block";
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
While, I used this html code repeated the same way.
<div class="container_hidden">
<div id="pax_room_1" style="display:none;" class="row_hidden">
<div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>
<div class="column"><font color="#000">Adult (18+)</font>
<select id="adulti" name="nrAdult">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000">Children (0-17)</font>
<select id="nrchild" name="nrChild" onchange="childSelect(this);">
<option value="">-</option>
<option id="child1" value="1">1</option>
<option id="child2" value="2">2</option>
<option id="child3" value="3">3</option>
</select>
</div>
<!-- Select Bambino 1 -->
<div id="agechild1" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
<!-- Select Bambino 1-2 -->
<div id="agechild2" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
<!-- Select Bambino 1-2-3 -->
<div id="agechild3" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="column"><font color="#000"> Child Age 3 </font>
<select id="child3" name="ageChild3">
<option value="">-</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
</div>
I realize that it is too laborious, even if it works. This is why I ask you if there is a way to lighten the code.

You can use the data-* attribute to dynamically choose the relations in the html.
e.g.
(function() {
const hiders = document.getElementsByClassName('hider');
// const is ES6 syntax, you can use var, although you might want to read up on that
for (let i = 0; i < hiders.length; ++i) {
const hider = hiders[i];
hider.onchange = function() {
const hideTarget = hider.dataset.hideTarget; // this reads the value of data-hide-target
if (hideTarget == null)
return; // no target set (else we would potentially get an TypeError, when data-hide-target wasn't set. Still happens with an invalid value though, but there you want an error
if (hider.value !== '')
document.getElementById(hideTarget).style.display = "block";
else
document.getElementById(hideTarget).style.display = "none";
// you might also want to take a look at .setAttribute("aria-hidden", "true") and .style.visibility = "hidden"
};
}
})()
<select id="adulti" name="nrAdult" class="hider" data-hide-target="hideme1">
<option value="">-</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>
</select>
<div id="hideme1" style="display: none;">
Hide me 1
</div>
<select id="adulti2" name="nrAdult" class="hider" data-hide-target="hideme2">
<option value="">-</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>
</select>
<div id="hideme2" style="display: none;">
Hide me 2
</div>
I think this snippet is rather easy to understand, but if you want me to elaborate a bit further, feel free to ask.
FYI, this can also be used for convenience in this example:
(function(){
function makeOption(val) {
const option = document.createElement('option');
option.value = val;
option.innerText = val;
return option;
}
const simpleSelects = document.getElementsByClassName('simpleSelect');
for(let i = 0; i < simpleSelects.length; ++i){
const simpleSelect = simpleSelects[i];
const min = simpleSelect.dataset.from;
const max = simpleSelect.dataset.to;
if(min == null || max == null)
return;
simpleSelect.appendChild(makeOption('-'));
for (let j = min; j <= max; ++j) {
simpleSelect.appendChild(makeOption(j));
}
}
})()
<select name="nrAdult" class="simpleSelect" data-from="0" data-to="5"></select>
<select name="nrChildren" class="simpleSelect" data-from="0" data-to="10"></select>
And I also just realised that you were using the same id multiple times, which is not only not allowed, but also doesn't work.
(And yes I am aware that what this does is quite different from what you want, but it is the same principle and I didn't want to give you an out-of-the-box solution.)

Mathematical Operation with addition and multiplication

I have been trying to do this operation where quantity or Subtotal=value1+(value2*value3) but I can't figure out how to do the addition and multiplication in that order. I was trying it out on JS Bin and for some reason when I put 1 slab and BD variables it is 175 which is even below the value1 values. I would appreciate the help since I just started coding and with a bit of direct hints and help I will get better. Thank you.
I apologize for the confusing question. What I want is to create a form that will allow someone to know the price of a painted slab with a certain material. I found out I can do 2 slabs per hour, this is why value1 for numbers 1 and 2 = 300 an so on. Slab BD equals $75, slab BG equals $120. What I want is to calculate the price depending on number of slabs times the type of the slab. For example: If I want 1 slab of BD the math would be 300+(75*1) which is 300 for the hour of painting, 75 for the type and since I only use 1 of those types the multiplication at the end is 1. If I use 2 the math would be 300+(75*2), if I use three the math would be 600+(75*3). Feel free to ask if this is confusing. I appreciate any help.
Slabs
<select input id="numberofslabs"><br>
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<script type="text/javascript">
var selectElement = document.getElementById("numberofslabs");
selectElement.addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
if(value1=="1")
value=300;
if(value1=="2")
value=300
if(value1=="3")
value=600
if(value1=="4")
value=600
if(value1=="5")
value=900
if(value1=="6")
value=900
if(value1=="7")
value=1200
if(value1=="8")
value=1200
if(value1=="9")
value=1500
if(value1=="10")
value=1500
if(value1=="11")
value=1800
if(value1=="12")
value=1800
if(value1=="13")
value=2100
if(value1=="14")
value=2100
if(value1=="15")
value=2400
if(value1=="16")
value=2400
if(value1=="17")
value=2700
if(value1=="18")
value=2700
if(value1=="19")
value=3000
if(value1=="20")
value=3000
var value2 =
document.getElementById("numberofslabs").value;
var value3 =
document.getElementById("materials").value;
document.getElementById("quantity").value
='$'+value1 + +value2*value3;
}
</script>
<br>
Subtotal:<td><input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/></td>

You mixed up 'value' and 'value1' in your code, which is the main bug, and becomes more apparent once you use a mathematical formula instead of a long if statement.
Then as other improvements, separating the concatenation + (from '$'+ ...) and the mathematical + with parentheses makes for less confusion.
Finally, you weren't listening for changes on the materials.
document.getElementById("numberofslabs").addEventListener('change',myFunction);
document.getElementById("materials").addEventListener('change',myFunction);
function myFunction() {
var value1 = document.getElementById("numberofslabs").value;
value1 = (+value1 + value1 % 2) * 150;
var value2 = document.getElementById("numberofslabs").value;
var value3 = document.getElementById("materials").value;
document.getElementById("quantity").value ='$'+(+value1 + value2 * value3);
}
Slabs
<select input id="numberofslabs"><br>
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br>
Materials
<select input id="materials"><br>
<option value="75">BD</option>
<option value="120">BG</option>
<option value="50">CC</option>
<option value="200">MDF</option>
<option value="800">A2</option>
<option value="900">A3</option>
<option value="1200">A4</option>
<option value="1400">A5</option>
<option value="1750">A6</option>
</select>
<br>
Subtotal:<input id="quantity" name="quantity" type="value" value="$0.00" size="5" readonly/>

Forcing multiple selects (dropdowns) to have unique values

On my page, there are select dropdown which need to be validated in certain way before I submit the page.
Here is how those selects looks like:-
HTML
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Rules:-
What I want is as follows:-
All the selects would be defaulted to Blank Value (-1)
Value of 1, 2 and 3 will be uniquely selected for all selects. This means that there would be only one select with a value of "1", only one select with a value of "2" and only one select with a value of "3".
All the remaining should have the value of "0".
What I did is below in JS. It's basically not much helpful :-(
JS
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
if (count_selects >=5 ) {
alert(count_selects + "is >=5");
}
else {
alert(count_selects + "is <5");
}
e.preventDefault();
});
My JsFiddle is
JSFiddle Link

If i clearly understood your problem, here is solution:
Add attribute selected="selected" to each tag "option" with value="-1".
Here is JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var uniqueVals = [1,2,3];
var selectedVals = [];
var inputs = $(".select_style");
inputs.each(function(){
if(this.value == -1){
this.value = 0;
}
var intVal = parseInt(this.value)
if(uniqueVals.indexOf(intVal) != -1){
if(selectedVals.indexOf(intVal) != -1){
alert('validation is not passed');
return 0;
}else{
selectedVals.push(intVal);
}
}
});
e.preventDefault();
});
});
Fiddle: http://jsfiddle.net/weeklyTea/L9JEK/

This is a bit dirty, but i think is what you want:
HTML:
<form method="post" class="my-form" id="form-1" action="">
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="submit" id="submit-selection" value="Submit" class="submit-button btn btn-lg btn-primary" />
</form>
JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
var correct = true;
if($(".select_style option[value='1']:selected").length != 1){ correct = false; }
if($(".select_style option[value='2']:selected").length != 1){ correct = false; }
if($(".select_style option[value='3']:selected").length != 1){ correct = false; }
if($(".select_style option[value='0']:selected").length != count_selects-3){ correct = false; }
alert(correct);
e.preventDefault();
});
});
FIDDLE:
http://jsfiddle.net/frikinside/8wcp6/4/

Getting values as number from html dropdown menu with Javascript

I tried to show an alert box which content will change everytime the user pick different selection on the dropdown list.
There are two dropdown list here, but the "product" dropdown list is pointed to the same array
As you can see that I've tried to make the js but it still does not work
What I want to ask is:
How do we get values from dropdown menu?
And how do we get the values from a dropdown list as an integer, not string?
*sorry for the broken english
Here's the javascript
<script language="javascript">
function RadioCheck() {
var number = new Array('0', '20', '30', '40', '50', '60');
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1,10);
var amountselection2 = parseInt(document.quiz.amount2,10);
for (i=0; i<selection1.length; i++) {
if (selection1[i].checked == true) {
result1=number[i]*amountselection1;
}
}
for (i=0; i<selection2.length; i++) {
if (selection2[i].checked == true) {
result2=number[i]*amountselection2;
}
}
var result = (result1 + 'is the first result, and' + result2 + 'is the second result');
alert(result);
return false;
}
</script>
Here is the HTML
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"> </option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"> </option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

Problem is you haven't declared variables result1 & result2. Also to get amount selected use document.quiz.amount1.value instead of just document.quiz.amount1, so on for amount2. Again to compare dropdown selection use selection1[i].selected instead of selection1[i].checked.
Try this code:
function RadioCheck() {
var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not recommended for numbers
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1.value, 10); //changed
var amountselection2 = parseInt(document.quiz.amount2.value, 10); //changed
var result1 = 0, result2 = 0; //added line
for (i = 0; i < selection1.length; i++) {
if (selection1[i].selected) { //changed
result1 = number[i] * amountselection1;
}
}
for (i = 0; i < selection2.length; i++) {
if (selection2[i].selected) { //changed
result2 = number[i] * amountselection2;
}
}
var result = (result1 + 'is the first result, and ' + result2 + 'is the second result');
alert(result);
return false;
}
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"></option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"></option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

Looks like this was already answered: Get selected value in dropdown list using JavaScript?
As for the integer values instead of strings, why not just convert? parseInt($stringVal);

We Keep Coding

JavaScript is the programming language of the Web.

Number precision change on select option - javascript

toFixed() is your friend. It will also handle rounding. Though do note that it returns a string. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Related

if and else condition

Javascript: alternative or less complex code to create hidden input forms

Mathematical Operation with addition and multiplication

Forcing multiple selects (dropdowns) to have unique values

Getting values as number from html dropdown menu with Javascript

Categories

Resources