Javascript to select dropdown option using value from text input? - javascript

I need to select a dropdown option based on what my user will enter in a text field. The text field is a number, and the dropdown puts the number in a range to calculate a total based on the price range selected.
The part of the form that deals with this is:
<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
<option value="0-100 beds|10" price="">0-100 beds </option>
<option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option>
<option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option>
<option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option>
</select>
The javascript I am using is:
<script>
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumber = document.getElementById('input_1_20') ;
if (bedNumber <= '100') {
setSelectedValue(selectObj, "0-100 beds|10"); }
else if (bedNumber <= '250') {
setSelectedValue(selectObj, "101-250 beds|7.5"); }
else if (bedNumber <= '500') {
setSelectedValue(selectObj, "251-500 beds|5"); }
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
})
</script>
I'm not getting any javascript errors, but the select field is not being updated. Can anyone advise?
Update: Link to Fiddle - https://jsfiddle.net/xg6ktr1a/
Thanks!

Instead of looping through the select options, try simply setting the value of the select element itself. Here's a comparison of select-value-setting methods from another SO user.
Also, you're trying to use lesser-than/greater-than comparisons on strings, not numbers... so those conditions will never be met. You can fix this by coercing bedNumber to an integer, then checking that number.
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumberInput = document.getElementById('input_1_20');
// coerce this value to a Number
var bedNumber = parseInt(bedNumberInput.value);
if (bedNumber <= 100) {
selectObj.value = "0-100 beds|10";
}
else if (bedNumber <= 250) {
selectObj.value = "101-250 beds|7.5";
}
else if (bedNumber <= 500) {
selectObj.value = "251-500 beds|5";
}
else {
selectObj.value = "501+ beds|2500";
}
});

$('#input_1_20').change(function() {
var bedNumber = parseInt(document.getElementById('input_1_20').value);
console.log(bedNumber)
if (bedNumber <= 100) {
$("#input_1_15 option[value='0-100 beds|10']").prop('selected', true);
} else if (bedNumber > 100 && bedNumber <= 250) {
$("#input_1_15 option[value='101-250 beds|7.5']").prop('selected', true);
} else if (bedNumber > 250 && bedNumber <= 500) {
$("#input_1_15 option[value='251-500 beds|5']").prop('selected', true);
} else {
$("#input_1_15 option[value='501+ beds|2500']").prop('selected', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
<option value="0-100 beds|10" price="">0-100 beds </option>
<option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option>
<option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option>
<option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option>
</select>
</form>

Related

Why my if condition isn't working with select box in javascript?

In my code, I am trying to make a code in which I want to get value of select box and add value accordingly but my code is getting a bunch of errors. Can anyone please help me. In code i just want to add 1 to selectbox value. E.g: If i pressed on S and add then 1 should be added to S Code:
function myFunction() {
var x = document.getElementById("issue").value;
var is1 = 0;
var is2 = 0;
var is3 = 0;
if (x == document.getElementById("issue").value) {
is1 = 1;
} else if (x == document.getElementById("issue").value) {
is2 = 1;
} else if (x == document.getElementById("issue").value) {
is3 = 1;
}
}
Enter issue code:
<select name="issue" id="issue">
<option value="i1">S</option>
<option value="i2">W</option>
<option value="i3">T</option>
</select>
<button onclick="myFunction()">Add</button>
You can simply create three variables and update their count based on the selected option.
let is1 = 0, is2 = 0, is3 = 0
function myFunction() {
var x = document.getElementById("issue").value;
if (x === "i1") is1++
else if (x === "i2") is2++
else if (x === "i3") is3++
document.getElementById("results").innerText=`Option S: ${is1}\nOption W: ${is2}\nOption T: ${is3}`
}
Enter issue code:
<select name="issue" id="issue">
<option value="i1">S</option>
<option value="i2">W</option>
<option value="i3">T</option>
</select>
<button onclick="myFunction()">Add</button>
<p id="results"></p>

The scripts that I made dont work and I can't find the problem

First of all, sorry, I know the next code is wrong, I'm new in programming and I have a problem with it. When the user select an option from the Select, a value it must change, then, the user must write a price in numbers which value must not be higher than the previous value, here is when the scripts should act but it doesn't works. The correct code must be something like that:
<script>
function cboc(){
var cb = $("#cbotipfon").val();
var maxvalGORE = null;
if(cb == 0){
maxvalGORE = 0;
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
}
function cbocc(){
var val = null;
var x = document.GetElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
document.GetElementById('txtprepos').value = "";
}
}
</script>
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon" onchange="cboc()">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" onblur="cbocc()" name="txtprepos" id="txtprepos"/>
I've been with that problem for days. If you can help me I'll be eternally grateful. Thanks in advance and for take your time.
Here is a simple example. No need to declare any function. Just declare your variables correctly and use the addEventListener method for getting the values of the input and select elements.
var maxvalGORE ,val ,cb ,x = null;
document.getElementById("cbotipfon").addEventListener("change", function(){
var cb = document.getElementById('cbotipfon').value;
if(cb == 0){
maxvalGORE = 0;
}
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
});
document.getElementById("txtprepos").addEventListener("change", function(){
x = document.getElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
} else if(val == maxvalGORE) {
alert('The value is equal to $' + maxvalGORE +'.');
} else {
alert('The value is lower than $' + maxvalGORE +'.');
}
document.getElementById('txtprepos').value = "";
});
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" name="txtprepos" id="txtprepos"/>

javascript function freezing my browser

i have two select object one with begining time and one with ending time.
when i select for example 11:00 in begining time i want that all options before 11:00 in ending time bee disabled 11:15 selected and rest options selectable.
Also i want to say that i am newbie with javascript.
This is part of my HTML code:
<select id="rbaslasaat" onchange="bitissaati(1384581600, 1384586100);">
<option value="1384581600">10:00</option>
<option value="1384582500">10:30</option>
<option value="1384583400">11:00</option>
<option value="1384584300">11:30</option>
<option value="1384585200">12:00</option>
<option value="1384586100">12:30</option>
</select></div>
<select id="rbitirsaat">
<option id="saatb1384581600" value="1384581600" disabled="">10:00</option>
<option id="saatb1384582500" value="1384582500" disabled="">10:30</option>
<option id="saatb1384583400" value="1384583400" disabled="">11:00</option>
<option id="saatb1384584300" value="1384584300" disabled="">11:30</option>
<option id="saatb1384585200" value="1384585200" disabled="">12:00</option>
<option id="saatb1384586100" value="1384586100" disabled="">12:30</option>
</select></div>
and this is my JavaScript function:
function bitissaati(saata, saatb) {
var saata, saatb, saatc, saatca, sec, i;
saatc = document.getElementById('rbaslasaat');
saatca = saatc.options[saatc.selectedIndex].value;
sec = parseInt(saatca) + 900;
for (i = saata; i<= saatb; i + 900) {
if(i <= saatca ) { document.getElementById('saatb'+i).disabled=true; }
else { document.getElementById('saatb'+i).disabled=false; }
}
document.getElementById('saatb'+sec).selected=true;
}
i could not figured out what the problem is.
each time i try function my browser is freezing.
Thank you all for trying to help
get your code fixed:
for ( i = saata; i<= saatb; i += 900) {
edit: removed the var
I'd just do :
function bitissaati(elem) {
var opt = document.getElementById('rbitirsaat').getElementsByTagName('option'),
val = elem.value;
for (i=opt.length; i--;) {
opt[i].disabled = opt[i].value <= val;
}
}
FIDDLE
Replace the loop with this
for (var k = saata; k<= saatb; k += 900) {
if (k <= saatca) {
document.getElementById('saatb'+k).disabled=true;
}
else {
document.getElementById('saatb'+k).disabled=false;
}
}

jquery checkbox nested with select

I have checkboxes nested with select to change a span value but my problem is when I have two or more selects... I'm not good on javascript =/
How to get the problem: select value 2 on first select after select 2 in second select, and select 0 on second and 0 on first when you do it total has to be 0 but I don't know, how to do it =/
<div id="test_div">
<input class="test_class" type="checkbox" value="3,00"/>3,00
<input class="test_class" type="checkbox" value="5,00"/>5,00
<input class="test_class" type="checkbox" value="10,00"/>10,00
<input class="test_class" type="checkbox" value="15,00"/>15,00
<select class="test_class">
<option value="10,00">0</option>
<option value="10,00">1</option>
<option value="10,00">2</option>
</select>
<select class="test_class">
<option value="10,00">0</option>
<option value="10,00">1</option>
<option value="10,00">2</option>
</select>
<select class="test_class">
<option value="10,00">0</option>
<option value="10,00">1</option>
<option value="10,00">2</option>
</select>
<span id="total">0,00</span><br/>
</div>
JS:
$(function()
{
var last = 0;
$('body').on('change','.test_class', function()
{
var vt = parseFloat($('#total').html().replace(',','.'));
if($(this).is('input:checked'))
{
var val = parseFloat($(this).val().replace(',','.'));
total = val + vt;
}else if($(this).is('input'))
{
var val = parseFloat($(this).val().replace(',','.'));
total = vt - val;
}
if($(this).is('select'))
{
var val = parseFloat($(this).val().replace(',','.'));
var index = $(this).prop('selectedIndex');
if(index == 0)
{
if(last > 0)
{
total = vt - val*last;
}
last = 0;
}
if(index == 1)
{
if(last == 2)
{
total = vt - val;
}else
{
total = vt + val*index;
}
last = 1;
}
if(index == 2)
{
if(last == 1)
{
total = vt + val;
}else
{
total = vt + val*index;
}
last = 2;
}
}
total = total.toFixed(2).replace('.',',');
$('#total').html('').html(total);
});
});
Example in: http://jsfiddle.net/jvtcc/8/
$("select .test_class").change(function() {
var total;
total = 0;
$("select .test_class").each(function() {
total += parseInt($(this).value);
});
$("#total").text(total + ".00");
});

If statement gives me undefined result

I ve built a form that displays results according what the users select. I am trying to put an if statement together which will output datasheet 1 on choosing the specific values.
I want when somebody choose the 525 and the 134 and the 290 to give me datasheet 1 else give me the datasheet 3. Here is my code:
<form name="test" id="test"">
<label for="select1">Height in (mm)</label>
<select name="division-select" id="height">
<option label="Please Select"></option>
<option value="525">525 or less</option>
<option value="645">645 or less</option>
<option value="1265">up to 1265</option>
<option value="1270">more than 1265</option>
</select>
<label for="select1">Width in (mm)</label>
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134w">134 or less</option>
<option value="190w">190 or less </option>
<option value="290w">290 or less</option>
<option value="328w">328 or less</option>
<option value="420w">420 or more</option>
</select>
<Br>
<br>
<label for="select1">Depth in (mm)</label>
<select name="division-select" id="depth">
<option label="Please Select"></option>
<option value="134d">134 or less</option>
<option value="190d">190 or less </option>
<option value="290d">290 or less</option>
<option value="328d">328 or less</option>
<option value="420d">420 or more</option>
</select>
<br><br>
<h2>Or select by load</h2>
<label for="select1">Load in (kN)</label>
<select name="division-select" id="load">
<option label="Please Select"></option>
<option value="2-5">2.5 or less</option>
<option value="5">5 or less </option>
<option value="10">10 or less</option>
<option value="25">25 or less</option>
<option value="50">50 or more</option>
</select>
<br>
<p><input type="button" onclick="calculate();" value="Find your Datasheet" /><input type="button" onclick="formReset()" value="Reset form"></p>
</form>
<div id="result">
</div>
<script type="text/javascript">
function calculate() {
var height = document.getElementById('height').value;
var width = document.getElementById('width').value;
var depth = document.getElementById('depth').value;
var load = document.getElementById('load').value;
if (document.getElementById("height").value == "") {
var heightmsg = "Please select your sample's height.";
document.getElementById("result").innerHTML = heightmsg;
return false;
}
if (document.getElementById("width").value == "") {
var widthmsg = "Please select your sample's width.";
document.getElementById("result").innerHTML = widthmsg;
return false;
}
if (document.getElementById("depth").value == "") {
var depthmsg = "Please select your sample's depth.";
document.getElementById("result").innerHTML = depthmsg;
return false;
}
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
var str = 'Download your Datasheet 1';
} else {
var str = 'Download your Datasheet 3';
}
} else if (height == 1270) {
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
}
document.getElementById("result").innerHTML = str;
}
function formReset() {
document.getElementById("test").reset();
}
</script>
Thanks in advance.
Your width and depth values end in w and d (e.g. <option value="190d">) but you're not checking for that in your if conditions (if (height === "525" && width === "134" && depth === "290")). Take the w and d out of the values like this:
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134">134 or less</option>
<option value="190">190 or less</option>
<option value="290">290 or less</option>
<option value="328">328 or less</option>
<option value="420">420 or more</option>
</select>
jsFiddle example
Side note: you have a condition which appears to never be able to be true:
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134")...
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
makes no sense. If the first condition is true, the second never can be. I guess you want
if (height === "525" && width === "290" && depth === "134")
var str = 'Download your Datasheet 1';
else if (height === "525" && width === "134" && depth === "290")
var str = 'Download your Datasheet 3';
else if (height == 1270)
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
Also notice that the values of your <option> tags are suffixed with w and d, so they won't equal the suffix-less numbers.
you are using too many if statements, if you want to specify a seperate link for every option from the three select inputs (width, height, depth) you'll end up with 4x5x5 = 100 if statements. the easiest way around this is to create a mysql databases with all the values and correspondents links, alternatively you can use XML or JSON array.
for the empty select input validation you can use:
var height = document.getElementById('height'),
width = document.getElementById('width'),
depth = document.getElementById('depth'),
load = document.getElementById('load'),
result = document.getElementById('result'),
arr = [height, width, depth],
error = "Please select your sample's ";
for (var i = 0; i < arr.length; i++) {
var t = arr[i].id;
if (arr[i].value == "") result.innerHTML = error + t;
return false;
}
for JSON example see the Demo here on jsfiddle.

Categories