dropbox onchange with jquery-ui - javascript

I'm trying to get a onselect and then javascript function but it doesn't work.
It only works when I take away jquery-ui script, but then I get ugly forms.
<select id="productkleur" style="width: 200px;" onchange="productkleurchange()" data-theme="c" data-native-menu="true">
<option value="1" id="1">Zwart</option>
<option value="2" id="2">Rood</option>
<option value="3" id="3">Groen</option>
<option value="4" id="4">Paars</option>
<option value="5" id="5">Blauw</option>
<option value="6" id="6">Geel</option>
</select>
I tried this:
$("#productkleur").combobox({
select: function (event, ui) {
alert("the select event has fired!");
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
}
}
);
I tried this
function productkleurchange() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
};
The last one works fine when I remove jquery-ui, but when I don't nothing happens.
Anyone knows why or how to fix this?

Try the working code using jquery
$( "#productkleur" ).change(function() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
});
Remove onchange="productkleurchange()" from the HTML before trying with the above code.

Just remove onChange event in `select' it should work.
<select id="productkleur" style="width: 200px;" data-theme="c" data-native-menu="true">
<option value="1" id="1">Zwart</option>
<option value="2" id="2">Rood</option>
<option value="3" id="3">Groen</option>
<option value="4" id="4">Paars</option>
<option value="5" id="5">Blauw</option>
<option value="6" id="6">Geel</option>
</select>
Demo

Also try this,
$('#productkleur').on('change', function() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change " + kleur + " to " + productid + " stock " + voorraad);
});

Related

Select child elements when parent ID is selected

I made a multi-choice select box. I used select2.
I want all child elements to be selected when Parent is selected.
For example, when ex1 is selected, every element should be selected.
When ex2 is selected, 4,5,7,8,9 and itself should be selected.
I tried to create a loop for this, but it just didn't make sense because there could be too many elements under each other.
jsfiddle link here https://jsfiddle.net/ph40eomt/2/
Thanks for the help in advance.
$('.js-select2-custom').select2({
"minimumResultsForSearch": "Infinity",
"singleMultiple": true,
})
function selectNumber() {
let select = $('.js-select2-custom')
select.next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li style='font-size: 14px;line-height: 26px;color: black;'>" + count + " units Selected" + "</li>"
})
}
selectNumber()
$('.js-select2-custom').on('select2:close', function() {
let select = $(this)
$(this).next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li style='font-size: 14px;line-height: 26px;color: black;'>" + count + " units Selected" + "</li>"
})
})
$('.js-select2-custom').on('select2:select', function(e) {
var data = e.params.data;
var userArrOptions = $("select[name='organizationUnitSelect'] option")
var i;
for (i = 0; i < userArrOptions.length; i++) {
var childId = $(userArrOptions[i]).attr("data-parent-id")
var selectedChildId = []
if (data.id == childId) {
var selectedOption = $('.js-select2-custom option[data-parent-id=' + childId + ']')
selectedOption.prop('selected', true);
}
}
$('.js-select2-custom').select2({
"minimumResultsForSearch": "Infinity",
"singleMultiple": true,
})
selectNumber()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select class="js-select2-custom form-control" multiple name="organizationUnitSelect">
<option class="options" value="1" data-parent-id="">ex1</option>
<option class="options" value="2" data-parent-id="1">ex2</option>
<option class="options" value="3" data-parent-id="1">ex3</option>
<option class="options" value="4" data-parent-id="2">ex4</option>
<option class="options" value="5" data-parent-id="2">ex5</option>
<option class="options" value="6" data-parent-id="3">ex6</option>
<option class="options" value="7" data-parent-id="4">ex7</option>
<option class="options" value="8" data-parent-id="4">ex8</option>
<option class="options" value="9" data-parent-id="7">ex9</option>
</select>
</div>

Trigger change for custom attr select 2

I have a select option that uses select 2 plugin like this
<select id ="temp">
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24" >Second</option>
<option value="1" data-width="16" data-length="16" >Third</option>
<option value="1" data-width="8" data-length="4" >Fourth</option>
</select>
I want to get data width and length from user inputs from keyboard. I call them is customWidth and customLength.
Expert results:
When user type true customWidth and customLength select2 trigger
change selected value. Example: customWidth = 8 and customLength =
4, select 2 should be trigger selected this option
<option value="1" data-width="8" data-length="4" >Fourth</option>
Thank you for help.
You can achieve this by finding an option that has same width and length by data attribute the, if found select it then trigger change so the slect2 take new val .
See below working snippet :
$(function() {
$customWidth = $("#customwidth");
$customLength = $("#customlength");
$customWidth.on("input", function(e) {
if( $customLength.val() && this.value ) {
var el = $("#temp").find('option[data-width=' + this.value + '][data-length=' + $customLength.val() + ']');
if (el.length > 0)
el.attr('selected', 'selected').trigger("change");
}
});
$customLength.on("input", function(e) {
if( $customWidth.val() && this.value ) {
var el = $("#temp").find('option[data-width=' + $customWidth.val() + '][data-length=' + this.value + ']');
if (el.length > 0)
el.attr('selected', 'selected').trigger("change");
}
});
$('#temp').select2({
placeholder: 'Select'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
customWidth : <input id="customwidth" /><br/><br/> customLength : <input id="customlength" /><br/><br/>
<select id="temp" style="width: 300px">
<option></option>
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24">Second</option>
<option value="1" data-width="16" data-length="16">Third</option>
<option value="1" data-width="8" data-length="4">Fourth</option>
</select>
This is perfectly working only for width. Try yourself to implement length too.
HTML
<select id ="temp">
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24" >Second</option>
<option value="1" data-width="16" data-length="16" >Third</option>
<option value="1" data-width="8" data-length="4" >Fourth</option>
</select>
<input type="text" id="width">
JQUERY
$('#temp').select2({
});
$('#width').keyup(function(){
var widthVal= $(this).val()
$("#temp option").each(function(){
if($(this).attr('data-width')==widthVal){
$('#temp option[data-width="'+widthVal+'"]').prop('selected','selected').change()
}
})
})

Calculate total price script not working

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/

Change radio by Id attr to checked on select change

Trying to set the radio inputs attribute to checked on select change.
Select HTML
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option onclick="jsFunction()" value="slides_1">subject1</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
</select>
jQuery
<script>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
var mySlide = myselect.options[myselect.selectedIndex].value;
document.getElementById.mySlide.prop('checked', 'checked');
}
</script>
Radio HTML
<input type="radio" name="slides" check="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
Thanks -Hector
For JS, see the function below.
For the HTML part, remove the onclick="jsFunction()" field on the options, and changed the last option to "slides_3".
See the working code at:
JSFiddle
JS:
function jsFunction() {
var selectedID = $('select#selectOpt').val();
$('input[type=radio]').filter('#'+selectedID).prop('checked', true);
}
HTML(updated):
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option value="slides_1">subject1</option>
<option value="slides_2">subject2</option>
<option value="slides_3">subject3</option>
</select>
<div>
<input type="radio" name="slides" checked="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
</div>
Import jquery:
<script type="text/javascript" src="you_jquery_file"></script>
You can download here: http://jquery.com/download/
Then change:
document.getElementById.mySlide.prop('checked', 'checked');
to:
$("#"+mySlide).prop('checked', 'checked');
For this particular problem, you don't need jQuery. Something like this will do:
function checkRadio(name, id) {
var rGroup = document.getElementsByName(name);
var theRadio = document.getElementById(id);
// uncheck the checked ones
for (var i=0;i<rGroup.length;i++) {
rGroup[i].checked = false;
}
// check the appropriate button
theRadio.checked = true;
}
// bind custom event to your select list
var mylist = document.getElementById('some_select_list');
mylist.addEventListener('change', function() {
var selected = this.options[this.selectedIndex].value;
checkRadio('radio_group_name', selected);
}, false);

Javascript code hide show price * quantity to show total

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

Categories