I need to be able to read from a dropdown box on a page get the value from it and thats it (for now) I currently have this code.
JavaScript
function main(input)
{
value = getValue();
alert(value);
}
function getValue()
{
var len = document.form1.values.length
var chosen = ""
for (var i = 0; i < len; i++) {
if (document.form1.values[i].selected) {
chosen = document.form1.values[i].value
}
}
return chosen;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping Cart</title>
<link href="style.css" title="Style" rel="stylesheet" type="text/css">
<script src="javascript/js.js" type="text/javascript"></script>
</head>
<!-- Start content -->
<body>
<!-- Wrapper to hold all content in -->
<div id="wrapper">
<!-- Top header, site name, moto, all that -->
<div id="header">
<h1>Kyle's Legit Toys</h1>
<h2>We are more legit then 10th.exe</h2>
<h3>#SoundsLegit</h3>
</div>
<!-- Navigation Menu -->
<div id="menu">
Home
Client Validation
</div>
<!-- Item -->
<div class="first">
<p>Wickedy Walker</p>
<img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
<p>Cost: £30 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Faster than light car</p>
<img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
<p>Cost: £10 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Build stuff crane</p>
<img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
<p>Cost: £15 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Dynamicaly altered payment -->
<div id="payment">
<p>Payment</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Satch Boogie</p>
<img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
<p>Cost: £20 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</form>
</div>
<!-- Item -->
<div class="item">
<p>HaxTop</p>
<img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
<p>Cost: £150 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Train</p>
<img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Pedo Bear</p>
<img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Not a pony bear</p>
<img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Patobo Bear</p>
<img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Final footer -->
<div id="footer">
<p>Kyle Strudwick - ks339 - StudentNumber</p>
<p>Some copyright stuff</p>
</div>
</div>
</body>
</html>
Error in chrome
Firebug
Thanks a lot, when answering please try and explain what I did wrong, why it was wrong and the correct way.
Thanks
Change your HTML to this :
<select name="values" onchange="main(this)" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
and you function to this :
function main(input)
{
var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
var value = input.value; // returns the value ie 1 / 2 / 3 etc
}
What i have changed - I have updated the onchange from main() to main(this) this change means thats its passing the current select list object to the main funciton - this makes accessing the actual select list changing from the function a lot easier - you dont have to go searching the DOM for the select list that changed.
What does the javascript do - this simplifies the process of getting the selected option, now we are passed the actual select list that has changed ie input = the correct select list. We can use input.selectedIndex to get the currently selected option and input.value to return the currently selected value
Using document.forms1 wasnt working becuase you have multiple forms with the name form1 on your page - using document.forms1[#] where # is the index of the form would work but its confusing ...
Further changes - you could remove all but one of the forms if you are using it exactly as you have in your question - as they really are doing nothing ... just surround the entire page (just the content) with a single form - using the above method to get the changed value will still work as it doesn't rely on the form !
Here is a quick example of the above working
All your forms have the name form1 so document.form1 actually returns an array of <form> elements. You can access them individually, for example document.form1[0].values for the first form. To maintain a generic function you need to pass the current select element (the one that the onchange event is fired from) into the function so that your function finds the correct form1 to operate on.
Related
I have a form field with 2 select options for my services (logo design and letterhead design) where I want users to select the number of either logo or letter head designs they want or both.
For instance, they can select 2 logo design and 3 letter head designs. There is a fixed amount for both designs. All I want is for them to select the number they want and they can preview the total amount for all before they make payment.
I have my forms done and I can also see the amount for each select option but I'm stuck at calculating both services together.
I'm not too good at javascript but I understand a little.
//Calculate branding amount by selected option
function logo(val) {
var logo = val * 20000;
document.getElementById("ansval").value = logo;
var letterhead = vall * 20000;
document.getElementById("ansval").value = letterhead;
document.getElementById("ansval").value = logo + letterhead;
}
<form>
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>
To make this work it would be better to have your function read both the selected values from the DOM, instead of passing in a single value and then trying to figure out what the other one should be. Then you can perform the calculation quite simply and update the #ansval element with the outcome.
Note the use of parseInt() in the below example so that the values are treated as numbers to be added instead of string to be concatenated. Also note the use of unobtrusive event bindings. Using onchange and other inline event attributes is bad practice and should be avoided where possible.
With all that said, try this:
let logoEl = document.querySelector('#logonumber');
let letterheadEl = document.querySelector('#letterheads');
logoEl.addEventListener('change', calcTotal);
letterheadEl.addEventListener('change', calcTotal);
function calcTotal() {
var numLogo = (parseInt(logoEl.value, 10) || 0) * 20000;
var numLetterHead = (parseInt(letterheadEl.value, 10) || 0) * 20000;
document.querySelector("#ansval").value = numLogo + numLetterHead;
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
Your function have to take both the submitted value for proper calculation. i just modified your code a little bit and it's done.
function logo(val)
{
var logo = document.getElementById("logonumber").value;
var letterhead = document.getElementById("letterheads").value;
document.getElementById("ansval").value = (logo * 20000) + (letterhead * 20000);
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>
I am creating a web site. In this web site there is a form and user has to input details. So , in this form , I have added 2 dropdowns like below. Now I want, when I select number 9 from Adults menu, I want to disable children menu. Otherwise if the number is 8 or less than 8, still user can select from children menu. Then I used length in jquery. But, that not what I want.
How can I do this?
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
var st = $('#adults option:selected');
if (st.length > 8) {
$("#children").prop('disabled', true);
}
});
alert(Total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
</select> <br>
</div>
</div>
Search Flight Data
</form>
You just need to change length to
if (st.val() > 8)
DEMO: https://codepen.io/creativedev/pen/ERpXOa
To enable back when value is different:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}
You should check against the selected value, not the length:
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
if (this.value > 8) { // check against the value of the adults drop down
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false); // probably need to re-enable it
}
});
// alert(Total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
</select> <br>
</div>
</div>
Search Flight Data
</form>
I have this code below where user can choose - each dropdown option has different data-tenure:
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
What I want is to set the input value to the data-tenure above - :
<input type="hidden" class="loan-rate" value="??" />
Do I need to add onchange() function to the dropdown above?
Edit, Updated
I meant - getting the data-tenure and this will be the input value. So
if the user selects 1, the input value will be 0.0298. If the user
selects 2 the input value will be 0.0387
You can use change event at .dropdown2 element, document.querySelector() with selector "input.loan-rate", set .value property with event.target Element.dataset at change event handler
document.querySelector(".dropdown2").addEventListener("change", function(event) {
// set value here
document.querySelector("input.loan-rate")
.value = event.target.dataset.tenure;
})
<select class="dropdown2 loan-tenure" id="selectId">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
$(document).ready(function(){
$("#selectId").change(function(){
alert($("#selectId option:selected").attr("data-tenure"));
alert($("#selectId").val());
});
});
Try the below code. Here we are passing the object via an onchange event.
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select onchange="tenure_rates(this)" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
function tenure_rates(dropdownValue) {
$('.dropdown2-opt').data('tenure',dropdownValue.value);
}
</script>
why don't you use select tag to take input
<select name="" form="tenureform">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select onchange="changeInput()" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
function onChange(evt) {
document.querySelector("input.loan-rate").dataset.tenure = evt.currentTarget.value;
}
This is a vanilla js solution. There will probably be tons of jquery responses. You do need the onchange event:
<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">
Make sure you add the id 'loadrate' to your input. See it in action here.
You can use selectedIndex to get the the current selected option. Then use getAttributeto get the data-tenure attribute value.Use getElementsByClassName to select the hidden input element and set it's value.
function tenure_rates(){
var e = document.getElementById("dropdown2");
var _option = e.options[e.selectedIndex].getAttribute('data-tenure');
document.getElementsByClassName('loan-rate')[0].value = _option;
}
JSFIDDLE
Note: Initially the value of hidden field will always be empty,since 1 is pre selected. So if an user don't change the option you will never find any value set this hidden element. You can select an option like Select
Try it :
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="ten columns">
<input type="hidden" class="loan-rate" value="" />
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script>
var sel = document.querySelector(".loan-tenure");
var hidEle = document.querySelector(".loan-rate");
sel.onchange = function(){
var value = sel.value;
hidEle.setAttribute("value",value);
alert("Input hidden value is : " + hidEle.getAttribute("value"));
}
</script>
</body>
</html>
I suppose that it must be simple to do that but I've no experience with javascript and it's getting difficult to me.
I've got an hr element on my page and both a color picker and a dropdownlist with different values from 1 to 10.
What I need to do is change hr height and color when color picker or dropdownlist changes its values.
Here is my html code:
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="text" style="display: none;"><div class="colorPicker-picker" style="background-color: rgb(204, 204, 204);"> </div></div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeight">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></div>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> </div>
JS code:
<script type="text/javascript">
$(document).ready(function()
{
var val= $("select#lineHeight").val();
$("select#lineDemo").height().value;
});
</script>
Here is a working example of what you're trying to achieve.
You are setting lineHeight id 2 different times which caused me a headache to figure out. I renamed the ID of your select to lineHeightSelect and also changed the colorpicker to type="color".
$(function() {
var colorPicker = $('#backgroundcolor');
var headline = $('#lineDemo');
var lineHeight = $('#lineHeightSelect');
lineHeight.on("change", function(){
headline.css("height", $(this).val() + "px");
});
colorPicker.on("change", function() {
headline.css('backgroundColor', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;">
</div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeightSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;">
</div>
$('#lineHeight').change(function () {
var val = $('option:selected', this).val();
$('#lineDemo').css('height', val+'px')
})
$('#backgroundcolor').change(function () {
var val = $(this).val();
$('#lineDemo').css('background-color', val)
})
Demo
I used the value of selected option as height of the hr
jQuery('#lineHeight').on('change',function(){ jQuery('#lineDemo').css('color','red').css('height','4px')
I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.
Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time
$('.drop').on('change',function() {
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
$("div.total-amount").text("$"+total);
});
My form rendered looks like this
<form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_2" value="2"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
another
<br>
<div class='subheader'>$5.55</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="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></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_1" value="1"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName1' type='checkbox'>
<label for='switchName1'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
test
<br>
<div class='subheader'>$0.33</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="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></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
Can a jQuery expert help me out here?
//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
//cycle through each one
drop.each(function(i,el){
//i is the number and el is the element (or this)
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
grandtotal = grandtotal + total;
});
$("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);