I want to use jQuery to calculate value from listbox and hidden
<input type="hidden" id="val1" name="albania" value="100000" />
<select class="span6 chosen" id="val2" name="discount" data-placeholder="Choose a Discount" tabindex="1">
<option value="" />
<option value="10" />10
<option value="20" />20
</select>
and I want to write a value in span
<div class="control-group">
<label class="control-label" >Total Value After Discount</label>
<div class="controls">
<span class="help-inline" id="yaz"></span>
</div>
</div>
Basicly I need to calculate discount from the price and show it for the customers. I tried this code:
<script>
$('input["#val2"]').keyup(function() {
var a = $('input["#val1"]').val();
var b = $(this).val();
$("#yaz").text((a * b) / 100 + a);
});
</script>
but it didnt work.
Try This,
$('#val2').change(function() {
var a = $('#val1').val();
var b = $(this).val();
$("#yaz").text((parseInt(a) * parseInt(b)) / 100 + parseInt(a));
});
You should use change event instead of keyup
Example
You Need to use parseInt
$("#yaz").text((parseInt(a) * parseInt(b)) / 100 + parseInt(a));
Related
I'm trying to implement a form in which you choose a shape from a select tag and it calculates the area and perimeter.
I just want when I select the Square option from the select, radius input disabled like the image.
Please do not use JQuery
Please do not use JQuery
Please do not use JQuery
here is my form please help me with .js file
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<lable for="radius">Radius : </lable>
<input type="number" id="radius" disabled><br>
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth"><br>
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>
const eleId = document.getElementById("shapes");
const radiusId = document.getElementById("radius");
eleId.addEventListener(
"change",
function () {
if (this.value === "square") {
radiusId.disabled = true;
} else {
radiusId.disabled = false;
}
},
)
<div class="container">
<hr class="lighter" />
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br /><br />
<lable for="radius">Radius : </lable>
<input type="number" id="radius" /><br />
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth" /><br />
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight" />
<hr />
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br />
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>
Her is a vanilla JS version
I fixed some spelling and added a "please select"
window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
document.getElementById("shapes").addEventListener("change", function() { // when the select is changed
document.getElementById("radius").disabled = ["rectangle","square"].includes(this.value); // disable if square or rectangle.
})
});
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="">Please select</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<label for="radius">Radius : </label>
<input type="number" id="radius" ><br>
<label for="shapeWidth">Width : </label>
<input type="number" id="shapeWidth"><br>
<label for="shapeHeight">Height :</label>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="perimeter" id="perimeter_result">Perimeter :</label>
<label for="perimeter_result"></label>
</div>
A label element should not be treated like the majority of other HTML elements in that it is not supposed to be used without being referenced to an input element of some type. So you should not use them to present content such as the calculation results as you do!
If you use a form around these various input controls you can use the often overlooked dotted notation to access these various form elements ( though many browsers permit accessing elements directly by ID without even requiring document.getElementById these days since HTML5 ) which is useful within any routines to perform the calculations as it reduces the code required.
// precision for floats
const precision=3;
const d=document;
// get reference to the parent form
const f=d.forms.calculator;
// event handler
const evthandler=function(e){
// ensure all disabled elements are re-enabled
f.querySelectorAll('input:disabled').forEach( input => input.disabled=false );
// named form inputs/outputs etc
let oSel=f.shapes;
let oArea=f.area;
let oPer=f.perimeter;
let oRad=f.radius;
let oWidth=f.shapeWidth;
let oHeight=f.shapeHeight;
// The currently selected `option`
let option=oSel.options[ oSel.options.selectedIndex ];
// access a named dataset to identify which elements to disable.
if( option.dataset.disable!=null ){
f[ option.dataset.disable ].disabled=true;
}
// do the calculations and show the results...
oArea.textContent=area( oSel.value, oWidth.value, oHeight.value, oRad.value );
oPer.textContent=perimeter( oSel.value, oWidth.value, oHeight.value, oRad.value );
};
const area=(shape,w,h,r)=>{
switch( shape ){
case 'square':
case 'rectangle':return w * h;
case 'circle':return ( Math.PI * Math.pow( r, 2 ) ).toFixed(precision);
case 'cylindrical':return ( 2 * Math.PI * Math.pow( r, 2 ) + 2 * Math.PI * r * h ).toFixed(precision);
}
};
const perimeter=(shape,w,h,r)=>{
switch( shape ){
case 'square':return 4 * Math.min(w,h);
case 'rectangle':return ( 2 * w ) + ( 2 * h );
case 'circle':return ( Math.PI * r * 2 ).toFixed(precision);
case 'cylindrical': return ( 2 * ( Math.PI * ( r * 2 ) ) ).toFixed(precision);
}
};
// assign the delegated event handler to respond to any change events
f.addEventListener('change', evthandler )
label{display:block;width:40%;clear:both;padding:0.5rem;}
label input,label select{float:right;width:60%;padding:0.25rem}
hr{margin:1rem 0}
output{color:green}
<div class='container'>
<hr class='lighter'>
<!--
Form added to group together form elements and allow
named access using dot notation.
labels correctly spelled and inputs nested within
so that <br /> tags can be replaced with CSS blocks
Added a dataset ( data-disable )
-->
<form name='calculator'>
<label>Shapes :
<select name='shapes'>
<option disabled hidden selected>Please select
<option data-disable='radius' value='rectangle'>Rectangle</option>
<option data-disable='radius' value='square'>Square</option>
<option value='circle'>Circle</option>
<option value='cylindrical'>Cylindrical</option>
</select>
</label>
<label>Radius: <input type='number' name='radius' min=0 step=1></label>
<label>Width: <input type='number' name='shapeWidth' min=0 step=1></label>
<label>Height: <input type='number' name='shapeHeight' min=0 step=1></label>
<hr />
<!--
output tags for displaying output rather than labels.
-->
<label>Area: <output name='area'></output></label>
<label>Perimeter: <output name='perimeter'></output></label>
</form>
</div>
Hi I am trying to perform a check on whether the user selected a given item from a dropdown and according to it's selection perform a multiplication with three different items and render the result.
I want to get i.e: if lamp is selected then make lamp * hours * qty * watts;
then get: ac * hours * qty * watts,
and finally: tv * hours * qty * watts,
and then get all the total in an array and render it to the user in the;
This is my html`
<form action="" id="energyForm">
<label for=""></label>
<select id="houseSet" onselect="getSelectValue();">
<option id="lamp" value="lamp">Lamp</option>
<option id="AC" value="ac">Air Conditioner</option>
<option id="TV" value="tv">TV</option>
</select>
<input type="number" min="1" max="15" id="qty" placeholder="Qty">
<input type="number" min="1" id="watts" placeholder="Watts">
<input type="number" min="1" max="24" id="hours" placeholder="Hours of Use">
<input type="text" id="subtotal" placeholder="Daily SubTotal">
<input type="text" id="total" placeholder="Daily Total">
<button name="calculate" id="itemConsumption" onclick="">Item Consumption</button>
<button name="calculus" id="totalConsumption" onclick="calculate();">Total</button>
<button name="">Clear Input</button>
<button name="">Remove Data</button>
</form>
`
// Calculate all the consumed watts
function calculate() {
// inputing the variable into an array
let items = [lamp, AC, TV];
for (i = 0; i <= items.length; i++) {
return i * qty * watts * hoursUsed;
}
}
`
`
If you are using body-parser in node, you can add a name to your select tag:
<select name='myselect'>
And in node, you can access the option the user selects with req.body.myselect
I really don't know how to program in Javascript, yet I've tried to do some stuff. I have values to be summed if some are selected. The following function does sum operation and show result at once without clicking a button only for checkbox fields, not for the dropdown list and text fields.
However, I need to involve the selected values as well from the dropdown lists and entered both text fields in the same manner of the checkboxes and their immediate responses(output).
I think change method can be used in the same manner.
#Edit:
Sorry, I forgot the tell but, I need to multiply the m2 entered value by before summing with 3134,204499 and Bina Yasi with -566,2202888.
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
<input type="text" id="total" value="0" />
You can loop over all the <select> boxes and text inputs with:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
}
else if (this.id == "binayasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And if you change the checkboxes to use value instead of price, you can do them all in one loop:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
else if (this.id == "binyasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And call the function when any of the inputs are changed:
$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();
This solution is simple, just the get the list of all the inputs (i.e. checkbox, and dropdown) using the .find() method and the selector 'input:checkbox, input:text, select'. Then verify if each one of these inputs elements has the attribute checked or select for the checkbox and select input types respectively, or it is a multiplier for the text inputs. This verification ca be done inside of the each() method callback. Finally, just convert then the value to a number, using the parseFloat() method and add it to the total accumulator.
Finally, sum the value to the total input. Like this:
let container;
let inputs;
let total;
function calcAndShowTotal() {
let sum = 55435.04798; // it is constant value which must be the beginning value.
let value;
inputs.each(function() {
if ($(this).is('input:checkbox:checked')) {
// If is a checkbox
value = parseFloat($(this).attr('price')) || 0;
sum += value;
} else if ($(this).is('input:text:not(#total)')) {
// If is a text wait until you move to another element
let factor = 1;
if (this.id == 'm2') {
factor = 3134.204499;
} else if (this.id == 'binayasi') {
factor = -566.2202888;
}
value = parseFloat($(this).val()) * factor || 0;
sum += value;
} else if ($(this).is('select')) {
// If is a option from the select element
value = parseFloat($('option:selected', this).val()) || 0;
sum += value;
}
});
total.val(sum);
}
function initHandlers() {
inputs.on('keydown', function(e) {
let focusable, next;
if (e.keyCode == 13) {
focusable = inputs.filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
}
return false;
}
});
inputs.change(calcAndShowTotal);
calcAndShowTotal();
}
$(function() {
console.log('ready!');
total = $('#total');
container = $('#housepriceguesslist');
inputs = container.find('input:checkbox, input:text, select');
initHandlers();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
Total: <input type="text" id="total" value="0" />
<br/>
<br/>
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" />
Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
Note:
Remember to round the numbers to get more precision. The text modification will apply after you tab, or move to another element. So I added an enter listener so when you press enter is gonna move to the next element like when you press tab. Also, I moved the total to the top so you can see the results in the preview.
Update:
I recommend you to use the $(function(){}); to get the document when is ready. Inside you can assign the values of your elements. I notice that there was a bug in my code whenever ever you uncheck a checked element the Total should be 55435.04798, but it shows the double it is because total is also a text input.
Similar to Barmar's, I added all elements to the .each() loop but also added the .change() handler to all elements:
var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
elems.each(function() {
if ( $(this).is('input:checkbox:checked') ) {
total += parseFloat($(this).attr('price')) || 0;
} else if ( $(this).is('#m2') ) {
total += parseFloat($(this).val()) * 3134.204499 || 0;
} else if ( $(this).is('#binayasi') ) {
total += parseFloat($(this).val()) * -566.2202888 || 0;
} else if ( $(this).is('select') ) {
total += parseFloat($('option:selected',this).val()) || 0;
}
});
$('#total').val(total);
}
elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run
See example here: https://jsfiddle.net/qgvsern4/1/
I want to add off option value in my page
For example, you come in my shop page and choose a package, I want to add an option field for the Discount and when you enter a text that is available on s.txt you receive a discount offer.
For example, you enter a StackOverflow code and in s.txt:
stackoverflow--20
Then the price will be reduced by %20 and displayed.
My source code follows.
JavaScript:
$("#payBtn").click(function() {
$("#count").html($("#member").val());
var price = $("#member").val();
price = price * 5;
location.href = 'https://zarinp.al/levicoder/' + price;
});
$("#name").keyup(function() {
$("#payerName").html($("#name").val());
});
$("#channelInput").keyup(function() {
$("#channel").html($("#channelInput").val());
});
$("#discount").keyup(function() {
$("#disdis").html($("#discount").val());
});
$("#member").click(function() {
$("#count").html($("#member").val());
var price = $("#member").val();
price = price * 5;
$("#amount").html(price);
});
Html:
<div class="box shadow_box purchase_cm_box" >
<h4>Order</h4>
<hr>
<input type="text" class="form-control" id="name" placeholder="Your name"><br>
<input type="text" class="form-control" id="channelInput" placeholder="Your Id"><br>
<input type="text" class="form-control" id="discount" placeholder="discount code"><br>
<div class="form-group">
<select class="form-control" id="member">
<option value="9000">9000 Value</option>
<option value="2000">2000 Value</option>
</select>
<br>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left" id="leftmenu">
<div class="box shadow_box purchase_cm_box" >
<h4>Factor</h4>
<hr>
Your Name : <label id="payerName">don't entered</label><br>
Your id : <label id="channel"></label><br>
discount code : <label id="disdis"></label><br>
Pay Count
<label id="amount">7,000</label>
$
<br><br>
<button class="getBtn" id="payBtn">Pay</button><br>
<p id="payStatus"></p>
</div>
</div>
I tried not to officially answer this question because I am unsure what LeVi needs. But as a result of our conversation in the comments, I was asked to provide code.
Here's my best guess of what LeVi is asking:
let inputCode = "stackoverflow";
let savedCode = "stackoverflow--20"; // derived from file s.txt
let splitSavedCode = savedCode.split('--'); // this will return ['stackoverflow', '20']
if( inputCode == splitSavedCode[0] ) {
// edited after further discussion in comments
let discountPercentage = splitSavedCode[1] / 100;
let discountAmount = price * discountPercentage;
$('#discount').val(discountAmount);
}
I've got this set up on JsFiddle: http://jsfiddle.net/melissal/FmEcw/
Now when I change the selection of the 'Quantity' dropdown, it changes the price of the paper (above). I want this to show in the 2nd drop down. So when you select the 'Paper' dropdown you see two options, 'Regular' and 'Premium (+ $XXX)', but I can't figure out how to get the new price to show up. Is that possible?
Here's the HTML:
Paper: $<span id="paper_div"></span><br />
<div id="product-options">
<form action="/cart/add" id="ProjectProductForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST"/>
</div>
<div id="product-options-qty">
<span class="text">Quantity: </span>
<span class="form">
<div class="input select">
<select name="field_6" class="text_select" id="field_6">
<option value="225">15 # $225.00</option>
<option value="240">20 # $240.00</option>
<option value="250">30 # $250.00</option>
<option value="270">40 # $270.00</option>
</select>
</div>
</span>
</div>
<div id="product-options-paper">
<span class="text">Paper: </span>
<span class="form">
<div class="input select">
<select name="field_6" class="text_select">
<option value="1">Regular</option>
<option value="2">Premium (+ $<span id="paper_div"></span>)</option>
</select>
</div>
</span>
</div>
</form>
And the JS:
$(document).ready(function() {
$("#field_6").change(function() {
var id = $(this).val();
$('#price_div').html($(this).val());
var premium_paper = id * .25;
var premium_paper = parseFloat(Math.round(premium_paper * 100) / 100).toFixed(2);
$('#paper_div').html(premium_paper);
}).change();
});
Try using $('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')'):
Note that I added an ID to the second select. You may also want to give your drop downs different name attributes.
$(document).ready(function () {
$("#field_6").change(function () {
var id = $(this).val();
$('#price_div').html($(this).val());
var premium_paper = id * .25;
var premium_paper = parseFloat(Math.round(premium_paper * 100) / 100).toFixed(2);
$('#paper_div').html(premium_paper);
$('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')')
}).change();
});
jsFiddle example