combo box values not working for quote calculator - javascript

This is a piece of the code I'm working with and the only part giving me problems. I'm using the combo box to give me both the Line2_flag and the screencharge. Without this particular piece of code the form works fine so I know it's just this snippet. Any help is appreciated. Thanks!
<select name="inkcolors" size="1" id="inkcolors" class="FormStyle"
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
var = Line2_flag;
var = screencharge;
if(form.inkcolors[1].selected){
Line2_flag = 1.75;
screencharge = 1;
}
if(form.inkcolors[2].selected){
Line2_flag = 2.25;
screencharge = 2;
}
if(form.inkcolors[3].selected){
Line2_flag = 2.75;
screencharge = 3;
}


you could try this method:
<html>
<form>
<select name="inkcolors" size="1" id="inkcolors" class="FormStyle"
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script>
var Line2_flag = null;
var screencharge = null;
var field = document.forms[0].elements['inkcolors'];
var selected = field.options[field.selectedIndex].value;
if (selected === "1") {
Line2_flag = 1.75;
screencharge = 1;
} else if (selected === "2") {
Line2_flag = 2.25;
screencharge = 2;
} else if (selected === "3") {
Line2_flag = 2.75;
screencharge = 3;
}
</script>
</html>

Related

Copy selected multiple values to the textbox from more than one drop down

I have tow drop downs as below.
<select id="checkOwner" multiple="multiple" onchange="copyValue1(this)">
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
<select id="checkMember" multiple="multiple" onchange="copyValue2(this)>
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
I have below javascript to print selected multiple values from dropdowns.
function copyValue() {
var str = "";
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
function copyValue2() {
var str = "";
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
The problem is when I select values from first that value print in text box. But I select value from second dropdown First printed values disappeared and second dropdown box values are printed. But I want to keep all and when I untick I want to remove this value also. How can I do this.

If you accepting duplicate values then, this is the solution:
I updated your HTML code to suit your needs by adding real values to your dropdown lists instead of using "FirstName,LastName".
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
<option value="John">John</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<select id="checkMember" multiple="multiple" onchange="copyValue2()">
<option value="Doe">Doe</option>
<option value="Trump">Trump</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<input type="text" name="mytextbox" id="mytextbox" size="200">
</body>
<script type="text/javascript">
function getOld(currentSelect)
{
var x = [];
for (var option of document.getElementById(currentSelect).options) {
if (option.selected) {
x.push(option.value);
}
}
return x;
}
function copyValue() {
x = getOld('checkMember');
y = [];
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
function copyValue2() {
x = getOld('checkOwner');
y = [];
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
</script>
</html>

html select element that its options depends on another select

I have two select element and I want to show some options in second select based on what user choose at first select.
consider first select have two options : a , b ...
if user choose 'a' from first select :
the second select optiones should be -> c , d ...
and if user choose 'b' from first select :
the second select optiones should be : e , f ...
I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>

If you can save the option values in a lookup object (or JSON):
function setOptions(select, values) {
for (var i = select.length = values.length; i--; )
select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default
var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] },
2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }
s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }
setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>

This code is based on JavaScript (No need for jQuery)
change Id name and value (x=="desire_value") according to your code
function myFunction() {
var x = document.getElementById("select1").value;
if (x == "3") document.getElementById("select2").style.display = "block";
else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

You have to write the functionality outside of onchange(). Try the following:
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;
if(selOption == 'a'){
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>

Why don't you just put that hard coded...
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="c">c</option>
<option value="d">d</option>
</select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>

One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.
The functional javascript is now very lean and the dependency relationships are maintained in the DOM.
var s2Clone;
// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){
s2Clone = document.getElementById("s2").cloneNode(true);
document.getElementById("s2").innerHTML = "";
}, false);
document.getElementById("s1").onchange = function() {
var selected = this.value;
//Get the nodes with a parent attribute of the selected data
var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
//clear existing
var s2 = document.getElementById("s2");
s2.innerHTML = "";
//Add The new options.
for(i = 0; i < optionsToInsert.length; i++)
{
s2.appendChild(optionsToInsert[i]);
}
}
<select id="s1" required>
<option value="">Please select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="a1" data-parent="a">a - 1</option>
<option value="a2" data-parent="a">a - 2</option>
<option value="a3" data-parent="a">a - 3</option>
<option value="b1" data-parent="b">b - 1</option>
<option value="b2" data-parent="b">b - 2</option>
<option value="b3" data-parent="b">b - 3</option>
</select>

Multiple Drop Down Values Won't Display In New HTML Page

Below are my codes which allows user to select multiple values from the drop down list and when the user clicks the button 'Go' the selected values will be displayed on the new page. I've also created classes for both attributes in order to list the selected values.
Unfortunately, when the button is clicked after selections, nothing is being displayed. Need help on this.
"mainTest.html" page.
< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
var url = 'newPageTest.html?';
var foodbevs = document.getElementsByClassName('foodbeverage');
for (var i = 0; i < foodbevs.length; i++) {
if (i > 0) url += '&';
url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value);
}
var statuses = document.getElementsByClassName('status');
for (i = 0; i < statuses.length; i++) {
url += '&status=' + encodeURIComponent(statuses[i].value);
}
location.href = url;
}
// Get the button from the DOM.
var submitButton = document.getElementById('btngo');
// Add an event listener for the click event.
submitButton.addEventListener('click', onSubmitClicked);
})();
<
/script>
<!DOCTYPE html>
<html>
<body>
<h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>
<table>
<tr>
<td>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
</td>
<td>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
</td>
</tr>
</table>
<br/>
<br/>
<input type="submit" id="btngo" value="Go" />
<br/>
</body>
</html>
"newPageTest.html" page.
< script type = "text/javascript" >
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
window.onload = passParameters;
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
<
/script>
<!DOCTYPE html>
<html>
<body>
<div id="showdata"></div>
</body>
</html>

I find 2 mistake from your code.
Put the window.onload = passParameters; outside of your passParameters function.
For example:
function passParameters() {
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
window.onload = passParameters;
The parseQuery return {"?foodbeverage":"Chicken Chop","foodbeverage":"Pasta","status":["Dine In","Take Away"]} from input query ?foodbeverage=Chicken%20Chop&foodbeverage=Pasta&status=Dine%20In&status=Take%20Away
You may want to add str = str.substr(1); before var s = str.split("&");
For example
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
str = str.substr(1);
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}

javascript form calculator - set values from drop down

I have a form that has a function to perform calculations and I cannot get it to work properly although its not throwing any errors in the console. When I check the checkbox, it doesn't stay checked. When I select the province from the drop down menu basically it should set the appropriate government fee, our fee and the tax value.
//my array
var price_govStatus = new Array(14)
price_govStatus[0] = 17.50 //Alberta
price_govStatus[1] = 26.68 //British Columbia
price_govStatus[2] = 35 //Manitoba
price_govStatus[3] = 20 //New Brunswick
price_govStatus[4] = 10 //Newfoundland
price_govStatus[5] = 10 //Northwest Territories
price_govStatus[6] = 37.40 //Nova Scotia
price_govStatus[7] = 10 //Nunavut
price_govStatus[8] = 26.00 //Ontario
price_govStatus[9] = 30 //Prince Edward Island
price_govStatus[10] = 34.34 //Quebec
price_govStatus[11] = 20 //Saskatchewan
price_govStatus[12] = 15 //Yukon
price_govStatus[13] = 10 //Canada
function checkJurisdictions() {
if ((theForm.Corporate_Profile_Report.checked == true) && (theForm.corpsearchprov.selectedIndex >= 0) )
{
dis_govfee_corporate_profile_report = price_govCorpProfile[theForm.corpsearchprov.selectedIndex];
theForm.dis_govfee_corporate_profile_report.value = formatCurrency(price_govCorpProfile[theForm.corpsearchprov.selectedIndex]);
}
else
{
dis_govfee_corporate_profile_report = 0;
theForm.dis_govfee_corporate_profile_report.value = formatCurrency('0.00');
}
if ((theForm.Certificate_Status.checked == true) && (theForm.statusprov.selectedIndex != 6))
{
dis_govfee_certstatus = price_govStatus[theForm.statusprov.selectedIndex];
theForm.dis_govfee_certstatus.value = formatCurrency(price_govStatus[theForm.statusprov.selectedIndex]);
dis_ourfee_certstatus = 30;
theForm.dis_ourfee_certstatus.value = formatCurrency('30.00');
dis_tax_certstatus = 3.90;
}
else if ((theForm.Certificate_Status.checked == true) && (theForm.statusprov.selectedIndex = 6))
{
dis_govfee_certstatus = 37.40;
theForm.dis_govfee_certstatus.value = formatCurrency('37.40');
dis_ourfee_certstatus = 35;
theForm.dis_ourfee_certstatus.value = formatCurrency('35.00');
dis_tax_certstatus = 4.55;
}
else if (theForm.Certificate_Status.checked == false)
{
dis_govfee_certstatus = 0;
theForm.dis_govfee_certstatus.value = formatCurrency('0.00');
dis_ourfee_certstatus = 0;
theForm.dis_ourfee_certstatus.value = formatCurrency('0.00');
dis_tax_certstatus = 0;
}
}
My HTML
<select onChange="Form_Calculator();" id="statusprov" name="statusprov">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
<option value="Canada">Canada</option>
</select>

Compose a link based in select's option value

I have 2 dropdown menus, and I need to compose a link with it's values.
Here is the code:
<form id="dropdown1">
<select id="linha">
<option value="G12">Option 1</option>
<option value="G11">Option 2</option>
<option value="H89">Option 3</option>
</select>
<select id="dia">
<option value="all">Every day</option>
<option value="work">working days</option>
<option value="sat">saturday</option>
<option value="sun">sunday</option>
</select>
</form>
I need something in JavaScript to "compose" a link with http://somewebsite.com/*selected_linha_value*/*selected_dia_value*
How can I do that?

<select name="dia" id="dia">
<option value="all">Every day</option>
<option value="http://stackoverflow.com">working days</option>
<option value="http://anotherSite.com">saturday</option>
<option value="http://anotherSite2.com">sunday</option>
</select>
<script>
$("#dia").change(function () {
var selctedValue = "";
$("select option:selected").each(function () {
selctedValue += $(this).val();
window.location.href = selctedValue;
});
});

i think u need something like this.
<script type="text/javascript">
params = getParams();
var name1 = unescape(params["linha"]);
switch(name1)
{
case "g12":
window.location = "http://www.google.com"
}
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
Its not the full code. It will give you some idea. If you have any doubt just comment

Take a look at: http://jsfiddle.net/ERHhA/
You can use jQuery val() to get the value of the select boxes. Then just append these values to the base url.
var url = "http://somewebsite.com/" + $('#linha').val() + "/" + $('#dia').val();

What about this one?
function make_url(){
var linha = document.getElementById('linha').value;
var dia = document.getElementById('dia').value;
var url=window.location.href;
var pos=url.indexOf('?');
if (pos>-1){
url = url.substr(0,pos);
}
//alert(url + '?linha='+linha+'&dia='+dia); return;
document.location.href = url + '?linha='+linha+'&dia='+dia;
}
fiddle

HTML
<div class="container">
<select class="small-nav">
<option value="" selected="selected">Go To</option>
<option value="http://whiterabbitexpress.com">Services</option>
<option value="http://shop.whiterabbitjapan.com">Shop</option>
</div><!-- container -->
JScript:
$(".small-nav").change(function() {
window.location = $(this).find("option:selected").val();
});

Categories