Here is my jsfiddle:
The end result I am wanting is that once you make a selection from each dropdown, the selection appears in the first line of text, and then get's reversed in the 2nd line of text. However, the apostrophe S needs to remain in the first spot. So for example, if you selected "Mother" from the first dropdown, and "Father" from the 2nd drop down, the two lines of text should look like this:
My Mother's Father
My Father's Mother
I don't know how to swap the apostrophe S so that it remains so that it comes first.
I tried using:
document.getElementById('third').innerHTML = strUser2 + "'s";
but that causes the apostrophe s to appear before I have anything selected.
That's because to run two functions before selecting. Remove them and try.
function functionOne() {
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.replace("'s", '');
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo() {
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = strUser2+ "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first,
span#second,
span#third,
span#fourth {
min-width: 40px;
display: inline-block;
border-bottom: solid 1px;
height: 18px;
vertical-align: bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father's">Father's</option>
<option value="Mother's">Mother's</option>
<option value="Sister's">Sister's</option>
<option value="Brother's">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
I would change the values in the option tags, but keep the display the same. Ex: <option value="Father">Father's</option>
Then append 's after the values you want to have 's.
Also don't execute each function by default, only execute them onchange. That way you'll never get something like 's when the page loads.
I would then make sure - Select - is the first option (selected) for both option tags, but make them disabled so the user cannot choose those as options.
--note--
I would strongly recommend using textContent as supposed to innerHTML to avoid possible code injection, depending on what you're using this for.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').textContent = strUser + "'s";
document.getElementById('fourth').textContent = strUser;
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').textContent = strUser;
document.getElementById('third').textContent = strUser2 + "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first, span#second, span#third, span#fourth{
min-width:40px;
display:inline-block;
border-bottom:solid 1px;
height:18px;
vertical-align:bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father's</option>
<option value="Mother">Mother's</option>
<option value="Sister">Sister's</option>
<option value="Brother">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
Simple solution:
Remove the apostrophe's from the list values and add on the string only if defined:
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
Fiddle here
EDIT - New solution:
Full code solution keeping the 2 lines from populating until both dropdowns are selected, as requested:
var firstSelect = false;
var secondSelect = false;
var dd1 = document.getElementById("dropdown_1");
var dd2 = document.getElementById("dropdown_2");
function clearAllContainers(){
document.getElementById('first').innerHTML = '';
document.getElementById('second').innerHTML = '';
document.getElementById('third').innerHTML = '';
document.getElementById('fourth').innerHTML = '';
}
function updateAllContainers(){
var strUser = dd1.options[dd1.selectedIndex].value;
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('fourth').innerHTML = strUser;
var strUser2 = dd2.options[dd2.selectedIndex].value;
document.getElementById('second').innerHTML = strUser2;
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
}
function functionOne(){
if(dd1.options[dd1.selectedIndex].value){
firstSelect = true;
}else{
firstSelect = false;
}
if(secondSelect && dd1.options[dd1.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionOne()
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
if(dd2.options[dd2.selectedIndex].value){
secondSelect = true;
}else{
secondSelect = false;
}
if(firstSelect && dd2.options[dd2.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
Updated fiddle for final solution is here.
I looked at your Javascript file on JSFiddle. The solution is very simple. First you'll have to remove apostrophe s from the content of <span id="fourth"></span>
You can do that easily by slicing off last two characters from the content of that span. Here is how you need to do it.
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
Now, the next part is to add apostrophe s in the content of <span id="third"></span>.
But you'll have to make sure that if the content of the span is empty then it should not append apostrophe s.
For that you can check whether on not the content is empty and if not empty then you can append apostrophe s.
Here is how you can do it.
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
Here is the overall modified code of your Javascript file.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
}
functionOne();
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
//var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;
Related
i am creating a webpage using html,php and javascript.
i have used script for select option. The problem i am encountering on executing the code is that the first input field doesn't disappear on selecting the option again. instead i get the second input box and first input box as well. i.e. i get both even if i use if else condition.
var fil = document.getElementById("filter");
fil.onchange = function filteron() {
var filtertag = document.getElementById("filter");
var tag = filtertag.options[filtertag.selectedIndex].value;
var searchbox = document.createElement("input");
var filter = document.getElementById("criteriain");
searchbox.setAttribute("id", "criteria");
if (tag === 'ed') {
searchbox.setAttribute("type", "date");
searchbox.setAttribute("name", "searchin");
} else if (tag === 'gw') {
searchbox.setAttribute("type", "number");
searchbox.setAttribute("name", "searchin");
}
filter.appendChild(searchbox);
};
<form action="" method="post">
<label for="filter" id="filterin">Filter by</label>
<select id="filter" size="1" name="filter" onchange="filteron()">
<option value='slno' >Sl No</option>
<option value='ed' >Entry Date</option>
<option value='lot' >Lot No</option>
<option value='par' >Party</option>
<option value='var' >Variety</option>
<option value='cst' >Current status</option>
<option value='gw' >Gray width</option>
</select>
<br/>
<label for='criteria' id='criteriain'>Search for</label>
It is because irrespective of your selection you are creating a new element every time and only changing the type in if/else block for new element.
var fil = document.getElementById("filter");
fil.onchange = function filteron() {
var filtertag = document.getElementById("filter");
var tag = filtertag.options[filtertag.selectedIndex].value;
var searchbox = document.getElementById("criteria");
var filter = document.getElementById("criteriain");
if(undefined === searchbox || null === searchbox) {
searchbox = document.createElement("input");
searchbox.setAttribute("id", "criteria");
}
if (tag === 'ed') {
searchbox.setAttribute("type", "date");
searchbox.setAttribute("name", "searchin");
} else if (tag === 'gw') {
searchbox.setAttribute("type", "number");
searchbox.setAttribute("name", "searchin");
}
filter.appendChild(searchbox);
};
<form action="" method="post">
<label for="filter" id="filterin">Filter by</label>
<select id="filter" size="1" name="filter" onchange="filteron()">
<option value='slno' >Sl No</option>
<option value='ed' >Entry Date</option>
<option value='lot' >Lot No</option>
<option value='par' >Party</option>
<option value='var' >Variety</option>
<option value='cst' >Current status</option>
<option value='gw' >Gray width</option>
</select>
<br/>
<label for='criteria' id='criteriain'>Search for</label>
I have two select boxes. Only the second select is being updated.
If I remove the ff.add the tf.add works.
function copyToFrame(selectedOption) {
if (selectedOption == "New") {
var tf = document.getElementById("sCopyToFrame");
var option = document.createElement("option");
document.getElementById('copyToFrameCounter').value = parseInt(document.getElementById('copyToFrameCounter').value) + 1;
option.text = "Frame " + document.getElementById('copyToFrameCounter').value;
tf.add(option);
var ff = document.getElementById("sCopyFromFrame");
ff.add(option);
}
}
<INPUT type="hidden" id="copyToFrameCounter" value="0">
<p> Copy to frame:
<select id="sCopyToFrame" onchange="copyToFrame(this.value);">
<option selected disabled hidden style='display: none' value=''></option>
<option>New</option>
</select>
</p>
<p> Copy from frame:
<select id="sCopyFromFrame">
<option selected disabled hidden style='display: none' value=''></option>
<option></option>
</select>
</p>
If you want to add new option to both of the drop downs, you need two elements
function copyToFrame(selectedOption){
if(selectedOption == "New"){
var tf = document.getElementById("sCopyToFrame");
var tf_option = document.createElement("option");
document.getElementById('copyToFrameCounter').value = parseInt(document.getElementById('copyToFrameCounter').value) + 1;
tf_option.text = "Frame " + document.getElementById('copyToFrameCounter').value;
tf.add(tf_option);
var ff = document.getElementById("sCopyFromFrame");
var ff_option = tf_option.cloneNode(true);
ff.add(ff_option);
}
}
function copyToFrame(selectedOption) {
if (selectedOption == "New") {
var tf = document.getElementById("sCopyToFrame");
var ff = document.getElementById("sCopyFromFrame");
var option = document.createElement("option");
var optionCopy = document.createElement("option");
var cTFC = parseInt(document.getElementById('copyToFrameCounter').value) + 1 || 0;
option.text = "Frame " + cTFC;
optionCopy.text = "Frame " + cTFC;
tf.add(option);
ff.add(optionCopy);
}
}
<input type="hidden" id="copyToFrameCounter" value="0">
<p> Copy to frame:
<select id="sCopyToFrame" onchange="copyToFrame(this.value);">
<option selected disabled hidden style='display: none' value=''></option>
<option>New</option>
</select>
</p>
<p> Copy from frame:
<select id="sCopyFromFrame">
<option selected disabled hidden style='display: none' value=''></option>
<option></option>
</select>
</p>
Hi I have a drop down like this and I have a textarea field . I want when ever uses a option from the dropdown the dropdown selected value will append in the text area field and I have used change event for the dropdown but the problem with it is that when I am selecting the same value again then the change event is not firing. I have searched and many people suggest to use click event of dropdown but when I am using the click event then the test I am selecting is appearing two times but I want only the selected text of the dropdown to be appear.My JS code is like this.
<select class="form-control" id="drpLinkType">
<option value="2" selected="selected">Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select>
$('#drpLinkType').click(function () {
debugger;
var $txt = $("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $('#drpLinkType :selected').text();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
})
jsfiddle.net/w0c9o7ox create the js fiddle. Here you can see that if I click the same option for then it is not working
Set .value of <select> to empty string "" using this.value = "" or $(this).val("") at last line of change event, else if same <option> is selected in succession the .value has not changed.
You can also include <label> element with for attribute set to <select> .id value to set current .textContent of selected <option>.
$('#drpLinkType').on('change', function () {
//debugger;
var $txt = $("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $('#drpLinkType :selected').text();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
this.labels[0].innerHTML = this.selectedOptions[0].textContent;
$('#drpLinkType').val("");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="0">Please select a option</option>
<option value="2">Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select><label for="drpLinkType"></label>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>
Use click even instead. Like so (I moved the appending of the text into a separate function for clarity):
$('#drpLinkType').on('click', function (event) {
var text = $('#drpLinkType :selected').text();
appendText(text);
});
function appendText(text) {
var $txt = $('#txt');
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
$txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="0">Please select a option</option>
<option value="2" >Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>
But, if you have control over the HTML, this would be optimal:
$('#drpLinkType').on('click', function (event) {
appendText(event.target.value);
});
function appendText(text) {
var $txt = $('#txt');
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
$txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="">Please select a option</option>
<option value="Post" >Post</option>
<option value="Pre">Pre</option>
<option value="Test">Test</option>
</select>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>
I want to calculate the total price and display the subtotal at the bottom of the form, but it's not working and I don't know why.
The subtotal should be showing the total price after substraction or addition of the elements "prijsvolwassenen", "prijskinderen", "prijspeuters" and "prijskamertype"
FIDDLE HERE
this is my script
$(document).ready(function calculatePrice(formclear) {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen+kinderen+peuters+kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;
}
}
And here is the HTML:
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label>
<span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" onChange="calculatePrice()" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label>
<span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" onChange="calculatePrice()" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label>
<span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" onChange="calculatePrice()" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label>
<span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" onChange="calculatePrice()" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label>
<button type="button" onclick="calculatePrice()">Calculate</button>
</label>
<label>
<span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10"/>
</label>
</form>
You are actually mixing up things there. You tried to use document ready that's part of the jQuery library (which you're not loading nor using anywhere in your code), when actually you just needed to declare a function.
This script should work for you:
<head>
<script type="text/javascript">
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
</script>
</head>
Demo
Your problem is a simple syntax error.
At the end of your code, you have
}
}
The first } closes the function, but the second } is causing an error. Try replacing it with a ) to close the ready function.
Also, I noticed that you didn't reference jQuery, so that is also causing an error. In the left, change the text-box that says "No-Library (pure JS)" to a version of jQuery.
You should make more use of jQuery when referencing it (which you forgot to do in your fiddle by the way). What I think you want to achieve is something like this:
FIDDLE
HTML
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label> <span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label> <span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label> <span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label> <span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label> <span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10" />
</label>
</form>
JS
$(document).ready(function () {
$("select").on("change", function () {
CalculatePrice();
});
$("#CalculatePrice").on("click", function () {
CalculatePrice();
});
});
function CalculatePrice()
{
var pv = parseInt($("#prijsvolwassenen").val(), 10);
var pk = parseInt($("#prijskinderen").val(), 10);
var pp = parseInt($("#prijspeuters").val(), 10);
var pkt = parseInt($("#prijskamertype").val(), 10);
if (!isNaN(pkt))
$("#PicExtPrice").val(pv+pk+pp+pkt);
}
EDIT: Updated answer using vanilla JS:
Make your JS like this:
JS
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//check if each value is a number and calculate total value
if (!isNaN(volwassenen) && !isNaN(kinderen) && !isNaN(peuters) && !isNaN(kamertype)) {
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
}
VANILLA FIDDLE
More DRY code http://jsfiddle.net/B6mPP/6/
$(function(){
var fields = $('#prijsvolwassenen,#prijskinderen,#prijspeuters,#prijskamertype'),
total = $('#PicExtPrice');
function calculateTotal(){
var sum = 0;
fields.each(function(){
var value = parseInt($(this).val());
value == value && (sum += value);
})
total.val(sum);
};
fields.change(calculateTotal);
$('#calculate').click(calculateTotal);
});
demo: https://so.lucafilosofi.com/calculate-total-price-script-not-working/
$(function(){
$('.autowidthselect').on('change', function(){
calculatePrice();
});
$('button').on('click', function(){
calculatePrice();
return false;
});
function calculatePrice() {
var total = 0;
$('.autowidthselect').each(function(){
total += !isNaN(this.value) ? parseInt(this.value) : 0;
});
$("#PicExtPrice").val(total);
}
});
vanila javascript fix
http://jsfiddle.net/B6mPP/10/
I have this problem with my code I cant make it to deliver me the answer I want. I want to select one of the options for the product and then one of the options for price then input the quantity and to have the Sub-Total delivered by the code.
The problem is that since I have different products and each product has 3 different prices I need my code to deliver the right answer.
The code I have right now is only taking the value of the first price of the first product, and I can't seem to make it work, I feel like I almost have the code... please help me :)
<div>Product<br />
<select id="producto1">
<option >Selecciona</option>
<option value="00">---ALARMAS---</option>
<option value="01">EXTREME BLACK</option>
<option value="02">EXTREME COBRA</option>
<option value="03">EXTREME GALACTIC</option>
</select></div>
<table>
<tbody>
<tr class="e01">
<td class="0"> </td>
<td class="01"><label>Price</label><br />
<select id="elias">
<option value="180">180</option>
<option value="200">200</option>
<option value="220">220</option>
</select></td>
<td class="02"><label>Price</label><br />
<select id="elias1">
<option value="50">50</option>
<option value="20">20</option>
<option value="22">22</option>
</select></td>
<td class="03"><label>Price</label><br />
<select id="elias2">
<option value="80">80</option>
<option value="100">100</option>
<option value="120">120</option>
</select></td>
</tr>
</tbody>
</table>
<div>
<label for="CAT_Custom_500436">Quantity</label><br />
<input type="text" maxlength="255" name="CAT_Custom_500436" id="CAT_Custom_500436" /></div>
<div><label for="CAT_Custom_500440">Sub-Total</label><br />
<input type="text" maxlength="255" name="CAT_Custom_500440" id="CAT_Custom_500440" /></div>
<br />
Java___
(function($) {
$("document").ready(function() {
$("td").hide();
$("#producto1").change(function() {
$(".e01 td").hide();
$("td." + $(this).val()).show();
});
});
})(jQuery);
var e = document.getElementById("elias");
var strUser = e.options[e.selectedIndex].value;
var e = document.getElementById("elias1");
var strUser1 = e.options[e.selectedIndex].value;
var e = document.getElementById("elias2");
var strUser2 = e.options[e.selectedIndex].value;
$(function () {
$('input').keyup(function (){
var quantity1 = $("#CAT_Custom_500436").val();
var total1 = quantity1 * strUser;
var total1 = quantity1 * strUser1;
var total1 = quantity1 * strUser2;
$("#CAT_Custom_500440").val(total1);
});
});
You can try something in these lines
$(document).ready(function () {
// Cache the variables
var $elias = $('#elias'),
$elias1 = $('#elias1'),
$elias2 = $('#elias2'),
$product = $('#producto1'),
$error = $('.error'),
$container = $('.container');
$("td").hide();
var productValue;
$product.change(function () {
$(".e01 td").hide();
$("td." + $(this).val()).show();
// Only show the container when the selections are not first 2
if (this.value !== 'Selecciona' && this.value !== '00') {
$error.addClass('hide');
$container.removeClass('hide');
} else {
$error.removeClass('hide');
$container.addClass('hide');
}
productValue = this.value;
}).change();
// Bind the change event for Dropdowns
var $quantity = $('#CAT_Custom_500436'),
$total = $("#CAT_Custom_500440");
$elias.add($elias1).add($elias2).change( findTotal);
$quantity.keyup(findTotal);
function findTotal() {
// Get the value
var quan = $quantity.val();
var pri = $('.'+ productValue).find('select').val();
var tot = pri * quan;
$total.val(tot);
}
});
Check Fiddle