Calculating two persisted bootstrap-select values on .load - javascript

Using bootstrap-select -- I am multiplying the values of two select fields in a form, and changing the value of an input field to display the total -- after page load.
How can I have the input field stay empty when just one or neither of the select fields are selected?
Below code only works if both fields are selected.
When neither of the fields are selected, it calculates with the first values of both fields - output becomes $10.
When either one of the fields is selected, it multiplies the selected value with the first value of the non-selected field - output becomes 1 * selected value, or selected value * $10.
PS. Reason I am using .load and not .change is that the fields are persisted with garlic.js
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option>$10</option>
<option>$20</option>
<option>$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
$(window).on("load", function(){
var price = parseInt($('.price').val());
var multiply = parseInt($('.multiply').val());
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
});

The problem was that the 'title' attribute of 'bootstrap-select', does not use a '0' value default option field. So the above code takes the value from the first selectable option when form is loaded.
To go around this issue:
Added the first default option with a zero value in the select tag.
Used the built in 'show.bs.select' to trigger an event when drop-down list is shown, and the built in 'refresh' method to remove it.
Complementary code:
$('.selectpicker').on('show.bs.select', function () {
$('.selectpicker').find('[value=0]').remove();
$('.selectpicker').selectpicker('refresh');
});
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="0"></option>
<option value="10">$10</option>
<option value="20">$20</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>

I hope this will helps you
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://garlicjs.org/garlic.js"
type="text/javascript"></script>
<form data-persist="garlic" method="POST">
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="10">$10</option>
<option value="20">$20</option>
<option value="30">$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
</form>
In script side
<script>
$(window).on("load", function(){
calculate();
$('.selectpicker').on('change',function(){
calculate();
})
});
function calculate()
{
var price = $('.price').val()?parseInt($('.price').val()):10;
var multiply =$('.multiply').val()? parseInt($('.multiply').val()):1;
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
}
</script>

Related

Javascript issue with selector session storage

Hello so I added some javascript to keep selection stored when page is reloaded in my select menu , but the issue is when I load the page for the first time nothing appears in my select menu (First choice of the select menu)
what appears
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#date').val(selItem);
}
$('#date').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<label class="op" for="date">Periode : </label>
<select id="date">
<option value="toutes">Toutes</option>
<option value="2019">Année en cours</option>
<option value="2018">Année pécédente</option>
<option value="2017">Année -2</option>
<option value="2016">Année -3</option>
<option value="2015">Année -4</option>
</select>
<br/><br/>
<input type="hidden" name="date" id="date1" class="datepicker w100" value="2015-01-01"type="date" placeholder="Du jj/mm/aaaa"> <input type ="hidden"name="date2" id="date2" value="2026-12-31"class="datepicker w100" type="date" placeholder="Au jj/mm/aaaa">
<br/>
So only set the value if there is something in storage.
if (selItem) $('#date').val(selItem);

Fix Error in Form when Select field options trigger another select field

I have the following Select fields and some input fields.
jsfiddle.net/kvb5hb6f/6
The select field [id="subject"] is the PARENT. When the value "Order Related" is selected, it triggers a select field [id="OrderRelatedSelect"] and the text field [id="OrderNo"].
This [id="OrderRelatedSelect"] further triggers some other fields. When the value "ReturnExchange" is selected, one Text field [id="ProductCode"] and a Select Field [id="ReturnTypeSelect"] is triggered.
This is where the problem is. Once the value "ReturnExchange" gets selected, even if we change the option value of the PARENT Select field, this select field [id="ReturnTypeSelect"] shows up in all the other PARENT options. It can only be disabled when we revert back to Order Selected and Change the value of the [id="OrderRelatedSelect"] to something else. How can I fix this so that this [id="ReturnTypeSelect"] only shows when the PARENT option value is "Order Related".
This is the code I'm using -
<select id="subject" required="required">
<option value="" disabled="disabled" selected="selected">Please select a Subject</option>
<option value="Order Related">Order Related</option>
<option value="Product Related">Product Related</option>
<option value="Store Related">Store Related</option>
<option value="Media Related">Media Related</option>
<option value="Kollab Requests">Kollab Requests</option>
<option value="Other Inquiry">Other Inquiry</option>
</select>
<select id="OrderRelatedSelect" style="display:none" required="required">
<option value="" disabled="disabled" selected="selected">Please select a Subject</option>
<option value="OrderStatus">Order Status</option>
<option value="ReturnExchange">Request a Return/Exchange</option>
<option value="Store Related">Shipping Information</option>
</select>
<input type="text" id="OrderNo" placeholder="Enter Order #" style="display:none" required="required">
<input type="text" id="ProductCode" placeholder="Enter Product Code (Separate multiple products with commas)" style="display:none" required="required">
<input type="text" id="OtherInquiry" placeholder="Enter Subject" style="display:none" required="required">
<select id="ReturnTypeSelect" style="display:none" required="required">
<option value="" disabled="disabled" selected="selected">Please select a Return Type</option>
<option value="Refund">Refund</option>
<option value="Exchange">Exchange</option>
</select>
<script>
$('#subject').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#OrderRelatedSelect").toggle($(this).val()=="Order Related");
$("#OrderNo").toggle($(this).val()=="Order Related");
$("#ProductCode").toggle($(this).val()=="Product Related");
$("#OtherInquiry").toggle($(this).val()=="Other Inquiry");
});
$('#OrderRelatedSelect').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#ProductCode").toggle($(this).val()=="ReturnExchange");
$("#ReturnTypeSelect").toggle($(this).val()=="ReturnExchange");
});
</script>
EDIT : Modified Code
This is the Script that I run now instead of what's above. Nested a toggle off inside.the OrderRelatedSelect onchange function.
<script>
$('#subject').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#OrderRelatedSelect").toggle($(this).val()=="Order Related");
$("#OrderNo").toggle($(this).val()=="Order Related");
$("#ProductCode").toggle($(this).val()=="Product Related");
$("#OtherInquiry").toggle($(this).val()=="Other Inquiry");
});
$('#OrderRelatedSelect').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#ProductCode").toggle($(this).val()=="ReturnExchange");
$("#ReturnTypeSelect").toggle($(this).val()=="ReturnExchange");
// Toggle off ReturnTypeSelect
$('#subject').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#ReturnTypeSelect").toggle($(this).val()=="Order Related");
});
});
</script>

Call onchange function from Document.Ready with pre selected item from update

I have a user form that contains many option boxes, one of them has (onChange()) function to hide/show some text inputs based on its value. In the add form every thing works like a charm, but when editing a pre-added record, the select option is populated with (Selected), which was selected when adding the form, my question here, When I select a record to update, can I hide/show input boxes based on option box selected value using javascript.
and example of what I want can be found
As many already mentioned, it's hard to help without any example code given. I'll still give it a try.
HTML:
<select id="select" onchange="toggleInputs()">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" class="toggleInputs" placeholder="Input 0" id="inp0"/>
<input type="text" class="toggleInputs" placeholder="Input 1" id="inp1"/>
<input type="text" class="toggleInputs" placeholder="Input 2" id="inp2"/>
<input type="text" class="toggleInputs" placeholder="Input 3" id="inp3"/>
JS:
function toggleInputs() {
// value of select field
var x = document.getElementById("select").value;
// ID of targeted input field to hide
var targetInput = "inp"+x;
// get all input fields and the amount of them
var inputFields = document.getElementsByClassName("toggleInputs");
var ln = inputFields.length;
// show all input fields (by resetting the style)
for (var i=0; i<ln; i++) {
inputFields[i].setAttribute("style", "");
}
// hide the targeted input field
document.getElementById(targetInput).setAttribute("style", "display: none");
}
In case you're having multiple selects, you should also group your HTML elements.
HTML:
<select id="select1" onchange="toggleInputs('select1', 'grp1')">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="grp1">
<input type="text" class="toggleInputs" placeholder="Input 0" id="grp1-0"/>
<input type="text" class="toggleInputs" placeholder="Input 1" id="grp1-1"/>
<input type="text" class="toggleInputs" placeholder="Input 2" id="grp1-2"/>
<input type="text" class="toggleInputs" placeholder="Input 3" id="grp1-3"/>
</div>
<select id="select2" onchange="toggleInputs('select2', 'grp2')">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="grp2">
<input type="text" class="toggleInputs" placeholder="Input 0" id="grp2-0"/>
<input type="text" class="toggleInputs" placeholder="Input 1" id="grp2-1"/>
<input type="text" class="toggleInputs" placeholder="Input 2" id="grp2-2"/>
<input type="text" class="toggleInputs" placeholder="Input 3" id="grp2-3"/>
</div>
JS:
function toggleInputs(targetedSelect, targetedGrp) {
// value of select field
var x = document.getElementById(targetedSelect).value;
// ID of targeted input field to hide
var targetInput = targetedGrp+"-"+x;
// get all input fields and the amount of them
var inputFields = document.getElementsByClassName("toggleInputs");
var ln = inputFields.length;
// show all input fields (by resetting the style)
for (var i=0; i<ln; i++) {
inputFields[i].setAttribute("style", "");
}
// hide the targeted input field
document.getElementById(targetInput).setAttribute("style", "display: none");
}
Haven't tested the version for multiple selects and input groups, but it should do the job.

generate an auto prefix number in jquery

<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain"><option value="ESS">Employee Satisfaction Survey</option><option value="CSS">Customer Satisfaction Survey</option><option value="VSS">Vendor Satisfaction Survey</option><option value="OQ">Orientation Quiz</option><option value="TQ">Training Quiz</option><option value="EI">Exit Interview</option><option value="EO">Employee Opinion</option></select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="" id="questionnaire_code" readonly="">
I want to generate an auto prefix number in the text field according to the selected drop down's option value.
E.g: If I select Exit Interview the auto generated prefix will be 'EI12345',here 'EI' comes from drop down value and '12345' is an auto sequence number.
You can use Math.random() to generate random number of any number of digits. Try this:
$("#questionnaire_domain").change(function() {
var val = $(this).val();
var random = Math.floor(Math.random()*90000) + 10000; // this will generate random number
$("#questionnaire_code").val(val+""+random);
});
Update input value when onchange of select by nextElementSibling:
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
up vote 0 down vote favorite
<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain" onchange="this.nextElementSibling.value = this.value + this.nextElementSibling.value.match(/(\d+)/)[1];">
<option value="ESS">Employee Satisfaction Survey</option>
<option value="CSS">Customer Satisfaction Survey</option>
<option value="VSS">Vendor Satisfaction Survey</option>
<option value="OQ">Orientation Quiz</option>
<option value="TQ">Training Quiz</option>
<option value="EI">Exit Interview</option>
<option value="EO">Employee Opinion</option>
</select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="11" id="questionnaire_code" readonly="">
</body>
I suppose the generation of the sequence number is based on the selectedindexchange of the dropdownlist? If so, consider the following snippets
$(document).ready(function(){
var sequence_no = 1;
$('#questionnaire_domain').change(function() {
$("#questionnaire_code").val($(this).id + sequence_no);
sequence_no += 1;
});
});
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
up vote 0 down vote favorite
<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain" onchange="this.nextElementSibling.value = this.value + this.nextElementSibling.value.match(/(\d+)/)[1];">
<option value="ESS">Employee Satisfaction Survey</option>
<option value="CSS">Customer Satisfaction Survey</option>
<option value="VSS">Vendor Satisfaction Survey</option>
<option value="OQ">Orientation Quiz</option>
<option value="TQ">Training Quiz</option>
<option value="EI">Exit Interview</option>
<option value="EO">Employee Opinion</option>
</select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="11" id="questionnaire_code" readonly="">
</body>

Multiple option selects to create unique shopping cart SKU

Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">
Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">

Categories