Develop Reference

Element does not display text when condition met

I am relatively new to JavaScript and I am stuck on this last little bit.
I have a set of three drop-downs. The first one is displayed automatically, the 2nd have you select an option in the first. Once you select an option in the 2nd, a 3rd and final drop-down is displayed. A selection here displays a total price and an 'add to cart' button.
The hiccup is... if the user decides to change their selection in the first drop-down, I remove the third, price, and add to cart. However, once I re-select an item in the 2nd drop-down, I can no longer get the third to display.
I have attached my code below, and I believe after stepping through in DevTools, the problem lies here:
document.getElementById("show_SizeSelections").style.display = 'block';
I have tried various methods, but I cannot get the show_sizeSelections to display anything.
Thanks
$(document).ready(function() {
var $style = $('select[name=style]'),
$finish = $('select[name=finish]'),
$size = $('select[name=size]');
$style.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $finish.find('option.' + rel);
if ($set.size() < 0) {
$finish.hide();
return;
}
$finish.show().find('option').hide();
$set.show().first().prop('selected', true);
});
$finish.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $size.find('option.' + rel);
if ($set.size() < 0) {
$size.hide();
return;
}
$size.show().find('option').hide();
$set.show().first().prop('selected', true);
});
});
var print_Name = 'Test Image',
Luster = 'Luster',
Metallic = 'Metallic',
print_Style,
abbrv_Finish,
print_Size,
print_Price,
_toCart,
finish_Counter = 0,
size_Counter = 0;
//stores Print Style selection
function showStyle(element) {
print_Style = element.options[element.selectedIndex].text;
if (finish_Counter > 0) {
document.getElementById('show_Size').innerHTML = '';
document.getElementById('print_Cost').innerHTML = '';
document.getElementById('cart_Button').innerHTML = '';
document.getElementById('show_SizeSelections').innerHTML = '';
} else {
document.getElementById("show_Finish").innerHTML = '<h4>2. Select a Finish</h4>';
}
finish_Counter++;
}
//stores Print Finish selection
function showFinish(element) {
var finish_Style = element.options[element.selectedIndex].text;
if (finish_Style == Luster) {
abbrv_Finish = 'L';
} else if (finish_Style == Metallic) {
abbrv_Finish = 'M';
}
if (size_Counter > 0) {
document.getElementById('print_Cost').innerHTML = '';
document.getElementById('cart_Button').innerHTML = '';
document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>';
document.getElementById("show_SizeSelections").style.display = 'block';
} else {
document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>';
}
size_Counter++;
}
//stores Print Size and Price selection
function showSize(element) {
var szpr_Selection = element.options[element.selectedIndex].text;
var szpr_Split = szpr_Selection.split(" ");
print_Size = szpr_Split[0];
print_Price = szpr_Split[1].replace('$', '');
//if Price exists, display it and Add2Cart
var image = document.getElementById("button");
if (print_Price != undefined) {
document.getElementById("print_Cost").innerHTML = '<h4>' + ' Total: $' + print_Price + '</h4>';
//add items for onClick event
_toCart = print_Name + '_' + print_Style + '_' + abbrv_Finish + '_' + print_Size + '_' + print_Price;
document.getElementById('cart_Button').innerHTML = "<div class='show-image thumbnail'><a style='text-decoration:none;' onclick='alert(" + _toCart + ")'>Add To Cart</a></div>";
//image.style.display = 'block';
}
}
.finish {
display: none;
}
.size {
display: none;
}
.button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h4>1. Select a Style</h4>
<br />
<div class="selected_Dropdowns">
<select name="style" onChange="showStyle(this);">
<option value="0">- Select a Style -</option>
<option value="0" rel="print">Print</option>
<option value="0" rel="matted_print">Matted Print</option>
<option value="0" rel="canvas">Canvas</option>
<option value="0" rel="framed_plaque">Framed Plaque</option>
</select>
<br />
<div id="show_Finish"></div>
<select name="finish" class="finish" onchange="showFinish(this);">
<option value="1" class="print">- Select a Finish -</option>
<option value="1" rel="p_l_size" class="print">Luster</option>
<option value="1" rel="p_m_size" class="print">Metallic</option>
<option value="1" class="matted_print">- Select a Finish -</option>
<option value="1" rel="mp_l_size" class="matted_print">Luster</option>
<option value="1" rel="mp_m_size" class="matted_print">Metallic</option>
<option value="1" class="canvas">- Select a Finish -</option>
<option value="1" rel="cvs_l_size" class="canvas">Luster</option>
<option value="1" rel="cvs_m_size" class="canvas">Metallic</option>
<option value="1" class="framed_plaque">- Select a Finish -</option>
<option value="1" rel="fp_m_size" class="framed_plaque">Metallic</option>
</select>
<br /><br />
<div id="show_Size"></div>
<div id="show_SizeSelections">
<select name="size" class="size" onchange="showSize(this);">
<option value="2" class="p_l_size">- Select a Size -</option>
<option value="2" class="p_l_size">8x12 $60</option>
<option value="2" class="p_l_size">12x18 $90</option>
<option value="2" class="p_l_size">16x24 $120</option>
<option value="2" class="p_l_size">20x30 $150</option>
<option value="2" class="p_l_size">24x36 $180</option>
<option value="2" class="p_m_size">- Select a Size -</option>
<option value="2" class="p_m_size">8x12 $70</option>
<option value="2" class="p_m_size">12x18 $105</option>
<option value="2" class="p_m_size">16x24 $140</option>
<option value="2" class="p_m_size">20x30 $180</option>
<option value="2" class="p_m_size">24x36 $220</option>
<option value="2" class="mp_l_size">- Select a Size -</option>
<option value="2" class="mp_l_size">8x12 $85</option>
<option value="2" class="mp_l_size">12x18 $135</option>
<option value="2" class="mp_l_size">16x24 $175</option>
<option value="2" class="mp_l_size">20x30 $225</option>
<option value="2" class="mp_l_size">24x36 $275</option>
<option value="2" class="mp_m_size">- Select a Size -</option>
<option value="2" class="mp_m_size">8x12 $95</option>
<option value="2" class="mp_m_size">12x18 $150</option>
<option value="2" class="mp_m_size">16x24 $195</option>
<option value="2" class="mp_m_size">20x30 $255</option>
<option value="2" class="mp_m_size">24x36 $315</option>
<option value="2" class="cvs_l_size">- Select a Size -</option>
<option value="2" class="cvs_l_size">8x12 $100</option>
<option value="2" class="cvs_l_size">12x18 $150</option>
<option value="2" class="cvs_l_size">16x24 $250</option>
<option value="2" class="cvs_l_size">20x30 $375</option>
<option value="2" class="cvs_l_size">24x36 $500</option>
<option value="2" class="cvs_m_size">- Select a Size -</option>
<option value="2" class="cvs_m_size">8x12 $125</option>
<option value="2" class="cvs_m_size">12x18 $180</option>
<option value="2" class="cvs_m_size">16x24 $280</option>
<option value="2" class="cvs_m_size">20x30 $425</option>
<option value="2" class="cvs_m_size">24x36 $550</option>
<option value="2" class="fp_m_size">- Select a Size -</option>
<option value="2" class="fp_m_size">12x18 $425</option>
<option value="2" class="fp_m_size">16x24 $525</option>
<option value="2" class="fp_m_size">20x30 $650</option>
<option value="2" class="fp_m_size">24x36 $800</option>
</select>
</div>
</div>
<br /><br />
<div id="print_Cost"></div>
<div id="cart_Button"></div>
<br /><br /><br />
<button id="button" class="button" onClick="_add2Cart()">Add to Cart</button>

<div id="show_SizeSelections">
<select name="size" class="size" onchange="showSize(this);">
You're setting style.display for the above div.
document.getElementById("show_SizeSelections").style.display = 'block';
But what you hid earlier was the select element inside it.
if ($set.size() < 0) {
$size.hide();
You could use
document.getElementById("show_SizeSelections").children[0].style.display = 'block';
...or even just $size[0].style.display = 'block'; since you already defined that collection.

Drop-down for discount calculation in javascript

I tried to get gross total value from discount calculation to sub total value.
Below is my code:
HTML/PHP
<select class="select" id="discount" onchange="discountedGrossTotal()">
<option selected>0</option>
<option value=".02">2</option>
<option value=".03">3</option>
<option value=".04">4</option>
</select> </td>
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="<?php $sql=mysqli_query($connection,'select sum(amount) from sales_temp');
$row = mysqli_fetch_array($sql);
echo $row[0]; ?>"/>
Javascript
function discountedGrossTotal(){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal");
discountOption.addEventListener('change', function (e) {
grossTotal.value = subTotal - subTotal * this[this.selectedIndex].value;
});
}
When selects the first option of the drop down, it displays nothing in the Gross Total text box. From then, it displays as "NaN" in the text box, whatever option selects.
Appreciate your help on this.

function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal");
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal);
}
<select class="select" id="discount" onchange="discountedGrossTotal(this.value)">
<option value="0">0</option>
<option value=".02">2</option>
<option value=".03">3</option>
<option value=".04">4</option>
</select>
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" value="" readonly/>
<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="200"/>

I would suggest either way to do this:
HTML/PHP
<select class="select" id="discount">
<option selected>0</option>
<option value=".02">2</option>
<option value=".03">3</option>
<option value=".04">4</option>
</select> </td>
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
<input name="txtSubTotal" type="text" id="txtSubTotal" size="15" value="<?php $sql=mysqli_query($connection,'select sum(amount) from sales_temp');
$row = mysqli_fetch_array($sql);
echo $row[0]; ?>"/>
Javascript
var discountOption = document.getElementById("discount");
discountOption.addEventListener('change', function (e) {
var dropdownVal = document.getElementById("discount").value;;
var subTotal = document.getElementById("txtSubTotal").value;
var grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = (subTotal) - (subTotal * dropdownVal);
});
}

Changing Variable in forms onclick

Okay guys... I've built an eCommerce site for my wife, who sells eLiquids.. The problem I am having has to do with the e-junkie cart I'm using... I am trying to change the hidden value of "amount" when a bottle size is selected from a dropdown box.. I would like the "amount" value to change depending on each size selection... nothing i've tried has worked.. here's the snippet
<form action="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2" target="ej_ejc" method="POST">
<input type="hidden" name="amount" value="12.00"/>
<input type="hidden" name="quantity" value="1"/>
Bottle Size:
<input type="hidden" name="on1" value="Size"/>
<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
<input type="hidden" name="shipping2" value="0.5">
<input type="hidden" name="handling" value="0.5">
<input type="hidden" name="tax" value="0.50"/>
<input type="hidden" name="return_url" value="http://www.e-junkie.com/"/>
<input type="hidden" name="currency_code" value="USD"/>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">
I've tried using onClick with the on1, but it doesn't change the amount value...
I'm trying to change the hidden "amount" value to either 12 20 or 30 depending on which size is selected... any help would be great

You can change the value of the amount field by assigning an onchange function to the os1 select box. Here is an example javascript function:
function changePrice() {
var size = document.getElementById('os1').value;
var price = 12;
switch(size){
case '15':
price = 12;
break;
case '30':
price = 20;
break;
case '50':
price = 30;
break;
}
document.getElementById('amount').value = price;
}
You would then also need to give you amount input an ID:
<input type="hidden" name="amount" value="12.00" id="amount" />
And give the select box an ID, and assign it an onclick event:
<select name="os1" id="os1" onchange="changePrice();">
<option value="15">15 ML</option>
<option value="30">30 ML</option>
<option value="50">50 ML</option>
</select>
However - I don't recommend doing this if you are dealing with payments. It would be too easy for someone to change the amount value themselves in their browser and submit any amount they want to the payment process. At the very least you need to validate the bottle size and amount to pay on your server before processing the payment to prevent this kind of attack.

This is not nice and raw JavaScript but it should work for you.
Change
<input type="hidden" name="amount" value="12.00"/>
to
<input type="hidden" id="amount" name="amount" value="12.00"/>
And change:
<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
to
<select id="os1" name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
And finally change:
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">
To
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="return changeCost();">
<script type="text/javascript">
function changeCost(){
var amountElm = document.getElementById("amount");
var selectList = document.getElementById("os1");
var selectedValue = selectList .options[selectList .selectedIndex].value;
if(selectedValue == "15"){
amountElm.value "12.00";
}else if(selectedValue == "30"){
amountElm.value "20.00";
}else if(selectedValue == "50"){
amountElm.value "30.00";
}
return true;
}
</script>

Change option values as per the input value

I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help

I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});

Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});

Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>

Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())

Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/

And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>

if then statement that allows me to have a price of a 4th selection be based on a, b, or c, selected

<input type="checkbox" name="KingBed" id="KingBed" />
<input type="checkbox" name="queenbed" id="queenbed" />
<input type="checkbox" name="FullBed" id="FullBed" />
<input type="checkbox" name="headboard" id="headboard" />
check = document.getElementById("headboard").checked;
if(check) { maxTotal += 25 /*PRICE*/; minTotal += 17/*PRICE*/; }
I am looking for an if then statement that if bed1 is chosen, then when headboard is chosen, it will issue one set of prices, but if queenbed, and so forth is chosen, it will list another price.

I think you should take it in a different direction:
<div>
<h1>Buy a new bed now!</h1>
<p>
<label for="size">Size</label><br />
<select id="size">
<option value="twin">Twin</option>
<option value="full">Full</option>
<option value="queen">Queen</option>
<option value="king">King</option>
</select>
</p>
<p>
<label for="headBoard">Head Board</label><br />
<select id="headBoard">
<option value="none">None</option>
<option value="modelA">Model A</option>
<option value="modelB">Model B</option>
<option value="modelC">Model C</option>
</select>
</p>
<p>
<input type="button" onclick="buy()" value="Buy!" />
</p>
</div>
Then include the following JavaScript
var pricing = {
size: {
twin: 100,
full: 200,
queen: 300,
king: 400
},
headBoard: {
none: 0,
modelA: 100,
modelB: 200,
modelC: 300
}
};
function buy() {
var sizeSelection = document.getElementById("size").value,
headBoardSelection = document.getElementById("headBoard").value,
sizePrice = pricing.size[sizeSelection],
headBoardPrice = pricing.headBoard[headBoardSelection],
grandTotal = sizePrice + headBoardPrice;
alert("Grand Total: $" + grandTotal.toFixed(2));
}