Jquery option:selected not working

Jquery option:selected not working - javascript

I am trying to grab the selected option from the color but each time it returns the blank. When it goes to the cart page after it adds it to the car it returns the blank and not the selected color option.
// Adds items to the shopping cart
handleAddToCartForm: function() {
var self = this;
self.$formAddToCart.each(function() {
var $form = $(this);
var $product = $form.parent();
var price = self._convertString($product.data("price"));
var name = $product.data("name");
//Problem here
var color1 = $("#color1 option:selected").val();
$form.on("submit", function() {
var qty = self._convertString($form.find(".qty").val());
var subTotal = qty * price;
var total = self._convertString(self.storage.getItem(self.total));
var sTotal = total + subTotal;
self.storage.setItem(self.total, sTotal);
self._addToCart({
product: name,
price: price,
qty: qty,
color1: color1
});
var shipping = self._convertString(self.storage.getItem(self.shippingRates));
var shippingRates = self._calculateShipping(qty);
var totalShipping = shipping + shippingRates;
self.storage.setItem(self.shippingRates, totalShipping);
});
});
},
<div class="product-description" data-name="Rainbow" data-price="12">
<h3 class="product-name">Rainbow</h3>
<p class="product-price">$ 12</p>
<p class="select-color">Color 1:
<select id="color1">
<option value="blank"></option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</p>

You need to get the color inside the submit event handler. You are currently trying to do it before user has changed anything
Change
var color1 = $("#color1 option:selected").val();
$form.on("submit", function() {
To
$form.on("submit", function() {
// get color when user submits . Need to also do some validation
var color1 = $("#color1 option:selected").val();

Related

Sorting selectbox with Javascript

I'm Setup a <select> dropdown list and I trying to make options sorting in numerical order (Ascending) :
HTML
<select id="singleSelector">
<option value="/single?id=544">1</option>
<option value="/single?id=598">4</option>
<option value="/single?id=605">6</option>
<option value="/single?id=604">3</option>
<option value="/single?id=603">7</option>
<option value="/single?id=602">5</option>
<option value="/single?id=601">2</option>
</select>
Edit :
When using the following JS by #Sanjay, the order is not correct :
JavaScript :
$(function() {
// choose target dropdown
var select = $('select');
select.html(select.find('option').sort(function(x, y) {
// to change to descending order switch "<" for ">"
return $(x).text() > $(y).text() ? 1 : -1;
}));
});
Output :
It's possible to make order 1,2,3,4,5 instead of 1,10,11...,2,20,21 ?

Here is working example.
$(function() {
var select = $('select');
select.html(select.find('option').sort(function(x, y) {
var num1 = parseInt($(x).text());
var num2 = parseInt($(y).text());
return num1> num2 ? 1 : -1;
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
<select>
<option selected>Choose a number</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">0</option>
<option value="2">2</option>
<option value="8">8</option>
</select>
</div>

try THIS
var target = document.getElementById('singleSelector');
function sortIt(target ) {
var tmp = new Array();
for (var i=0;i<target.options.length;i++) {
tmp[i] = new Array();
tmp[i][0] = target.options[i].text;
tmpA[i][1] = target.options[i].value;
}
tmp.sort();
while (target.options.length > 0) {
target.options[0] = null;
}
for (var i=0;i<tmp.length;i++) {
var op = new Option(tmp[i][0], tmp[i][1]);
target.options[i] = op;
}
return;

Dropdown with 4 Levels identical selections

I've this modified script I found online.
It works very well to have dropdown select menu with 4 posiblities.
The problem here. If a menu is identical like here with Mexico (for Mexico the city and Mexico the country), it won't work correctly.
How i can correct that? Thanks for help!
var categories = [];
// list1
categories["startList"] = ["America","Europe"]
// list2
categories["America"] = ["USA","Mexico"];
categories["Europe"] = ["France","UK"];
// list3
categories["USA"] = ["New York","Texas"];;
categories["Mexico"] = ["Mexico","Guadalajara"];
categories["France"] = ["Alsace","Normandie"];
categories["UK"] = ["Wales", "Scotland", "England"];
// list4
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"];
categories["Texas"] = ["Dallas","Eagle Pass"];
categories["Mexico"] = ["DF"];
categories["Guadalaraja"] = ["East","West"];
categories["Alsace"] = ["Strasbourg","Kronenbourg"];
categories["Normandie"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"];
categories["Wales"] = ["Cardiff", "New Port"];
categories["Scotland"] = ["Edimbourg"];
categories["England"] = ["London","Manchester","Exeter","Dover"];
var nLists = 4; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select One</option>
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<select name='List4' onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Select Four</option>
</select>
</form>
Original adaptation of https://jsfiddle.net/nbz9atmv/ and https://www.sitepoint.com/community/t/country-state-city-dropdown-list/2438

I noticed a few errors from this snippet.
I would say instead of declaring the city in Mexico as 'Mexico', why not declare it as 'Mexico City'? From what I understand this is what the city is formally recognized as and your code will recognize this as well. So, I changed 'Mexico' the city to 'Mexico City' and it worked perfectly well. This also allows your resulting code to be understood more easily by your target audience.
The second error I noticed was you had 'Guadalajara' spelled incorrectly in 'list 4'.
Also, you had getValue for the list4 select. Removed and changed to this.value. If you need to grab the value simply call the id using JS, if that was your intention.
the replace() will throw an eror but it still works properly as it sitll continues to refrain from multiple values being added to the final dropdown(list4) if changes are made to the previous dropdown(list3).
Below is the code running correctly.
Let me know if this helped!
var categories = [];
// list1
categories["startList"] = ["America","Europe"]
// list2
categories["America"] = ["USA","Mexico"];
categories["Europe"] = ["France","UK"];
// list3
categories["USA"] = ["New York","Texas"];;
categories["Mexico"] = ["Mexico City","Guadalajara"];
categories["France"] = ["Alsace","Normandy"];
categories["UK"] = ["Wales", "Scotland", "England"];
// list4
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"];
categories["Texas"] = ["Dallas","Eagle Pass"];
categories["Mexico City"] = ["DF"];
categories["Guadalajara"] = ["East","West"];
categories["Alsace"] = ["Strasbourg","Kronenbourg"];
categories["Normandy"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"];
categories["Wales"] = ["Cardiff", "New Port"];
categories["Scotland"] = ["Edimbourg"];
categories["England"] = ["London","Manchester","Exeter","Dover"];
var nLists = 4; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select One</option>
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<select name='List4' onchange="fillSelect(this.value, this.form['List3'].value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Select Four</option>
</select>
</form>

Obtain value from select menu and perform operations on that in javascript

I want to create a javascript function for the following:
<td>
<h4 class="subject-name">Construction Management</h4>
</td>
<td>
<select id="sub9Score">
<option selected value="Select Grade">Grade</option>
<option value="10">S</option>
<option value="9">A</option>
<option value="8">B</option>
<option value="7">C</option>
<option value="6">D</option>
<option value="5">E</option>
<option value="0">F</option>
</select>
</td>
Here, I want to get a selected value by user and assign the letter a value(number). Then I want to use that value for calculation and display that in an alert box. Please give me a code to assign a numerical value to user selected option. Use only javascript. No jquery
Can anyone find an error in my code here:
function calculator(){
var sub1score = document.getElementById('sub1Score');
var sub1 = sub1score.options[sub1score.selectedIndex].value;
var sub2score = document.getElementById('sub2Score');
var sub2 = sub2score.options[sub2score.selectedIndex].value;
var sub3score = document.getElementById('sub3Score');
var sub3 = sub3score.options[sub3score.selectedIndex].value;
var sub4score = document.getElementById('sub4Score');
var sub4 = sub4score.options[sub4score.selectedIndex].value;
var sub5score = document.getElementById('sub5Score');
var sub5 = sub5score.options[sub5score.selectedIndex].value;
var sub6score = document.getElementById('sub6Score');
var sub6 = sub6score.options[sub6score.selectedIndex].value;
var sub7score = document.getElementById('sub7Score');
var sub7 = sub7score.options[sub7score.selectedIndex].value;
var sub8score = document.getElementById('sub8Score');
var sub8 = sub8score.options[sub8score.selectedIndex].value;
var sub9score = document.getElementById('sub9Score');
var sub9 = sub9score.options[sub9score.selectedIndex].value;
var total = (sub1*4)+(sub2*4)+(sub3*4)+(sub4*3)+(sub5*4)+(sub6*1.5)+(sub7*1.5)+(sub8*1.5)+(sub9*4);
var gpa = total/27.5;
var final = gpa.tofixed(2);
alert('Your CGPA is '+final+'');
}
Updated my javascript function. But this isnt displaying alert box:
function calculator(){
var sub1score = document.getElementById('sub1Score');
var sub1 = sub1score.options[sub1score.selectedIndex].value;
var a = parseInt("sub1");
var sub2score = document.getElementById('sub2Score');
var sub2 = sub2score.options[sub2score.selectedIndex].value;
var b = parseInt("sub2");
var sub3score = document.getElementById('sub3Score');
var sub3 = sub3score.options[sub3score.selectedIndex].value;
var c = parseInt("sub3");
var sub4score = document.getElementById('sub4Score');
var sub4 = sub4score.options[sub4score.selectedIndex].value;
var d = parseInt("sub4");
var sub5score = document.getElementById('sub5Score');
var sub5 = sub5score.options[sub5score.selectedIndex].value;
var e = parseInt("sub5");
var sub6score = document.getElementById('sub6Score');
var sub6 = sub6score.options[sub6score.selectedIndex].value;
var f = parseInt("sub6");
var sub7score = document.getElementById('sub7Score');
var sub7 = sub7score.options[sub7score.selectedIndex].value;
var g = parseInt("sub7");
var sub8score = document.getElementById('sub8Score');
var sub8 = sub8score.options[sub8score.selectedIndex].value;
var h = parseInt("sub8");
var sub9score = document.getElementById('sub9Score');
var sub9 = sub9score.options[sub9score.selectedIndex].value;
var i = parseInt("sub9");
var total = (a*4)+(b*4)+(c*4)+(d*3)+(e*4)+(f*1.5)+(g*1.5)+(h*1.5)+(i*4);
var gpa = (total/27.5);
var final = gpa.toFixed(2);
alert('Your CGPA is '+final+'');
}
https://drive.google.com/file/d/0B_mI455BxLOWS3V0UFNaVnNEUlU/view?usp=sharing Link to my full codes

You have forgotten to use parseInt because of it. It is not performing proper operations. Please check my updated answer.
var selectElement = document.getElementById("sub9Score");
function getSelectedVlue(){
var selectValue = selectElement.options[selectElement.selectedIndex].value;
if(selectValue== "Select Grade") return;
alert("select value is: "+
selectValue);
alert("adding 1 and selected value with out parse int "+ (1 + selectValue)); alert("adding 1 and selected value with parse int "+ (1 + parseInt(selectValue)));
}
<td>
<h4 class="subject-name">Construction Management</h4>
</td>
<td>
<input type="button" value="Get Selected Value" onclick="getSelectedVlue()"> <br/><br/>
<select id="sub9Score">
<option selected value="Select Grade">Grade</option>
<option value="10">S</option>
<option value="9">A</option>
<option value="8">B</option>
<option value="7">C</option>
<option value="6">D</option>
<option value="5">E</option>
<option value="0">F</option>
</select>
</td>

If you want number then assign value to letters
function getSelectedVlue(){
var e = document.getElementById("sub9Score");
alert("you have selected : " + (e.options[e.selectedIndex].value));
}
<td>
<h4 class="subject-name">Construction Management</h4>
</td>
<td>
<input type="button" value="Get Selected Value" onclick="getSelectedVlue()"> <br/><br/>
<select id="sub9Score">
<option selected value="NA">Grade</option>
<option value="19">S</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select>
</td>

Get the element using the ID you've already defined. Then define a handler for the change event which does something with the value property.
var sub9Score = document.getElementById('sub9Score');
sub9Score.onchange = function() {
console.log(this.value)
};
<select id="sub9Score">
<option selected value="Select Grade">Grade</option>
<option value="S">S</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>

change event in jquery

I need the total price from ( the base value + logo value + material value )
I had tried this code mycode
condition
1) if select the logo type and material type i need to get the total value.
2) if i selected both the value, now am changing the logo value i need to get the correct total
3) total to be displayed after selecting each option dynamical
4) no submit button to be used.
HTML
<p class="logotype left customLabel"><span>base price :</span>1000</p>
<p class="logotype left customLabel"><span>Logo Type :</span></p>
<form class="left margin0" name="logotypeform" method="post">
<select name="logoprice" id="logotypeprice">
<option value="">--</option>
<option value="50">Default logo</option>
<option value="100">Imported logo</option>
<option value="25">Text</option>
<option value="0">None</option>
</select>
</form>
<input class="logoTypeVal" type="" value="">
<p class="Material left customLabel"><span>Material :</span></p>
<form class="left margin0" name="priceform" method="post">
<select name="price" id="materialprice">
<option value="">--</option>
<option value="10">Nylon</option>
<option value="20">Sticker</option>
<option value="30">Printed</option>
<option value="30">Embroiding</option>
<option value="0">None</option>
</select>
</form>
<input class="materialVal" type="" value="">
<p class="Material left customLabel"><span>Total Value :</span></p><input class="totalVal" type="" value="total value">
JS
jQuery(document).ready(function(){
var baseValue = 1000;
jQuery('#logotypeprice').change(function(){
var logotypeprice = jQuery(this).val();
jQuery('input.logoTypeVal').val(logotypeprice);
});
jQuery('#materialprice').change(function(){
var materialprice = jQuery(this).val();
jQuery('input.materialVal').val(materialprice);
var baseprice = "<?php echo $basePrice ?>";
var logoval = logotypeprice;
var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
alert(totalprice);
jQuery('input.totalVal').val(totalprice);
});
});

Update:
Since you need the total value to update based on changing each select you should calculate the total on both handlers. Like below
var baseValue = 1000,
logotypeprice = 0,
materialprice = 0;
$(document).ready(function () {
$('#logotypeprice').change(function () {
logotypeprice = jQuery(this).val();
$('input.logoTypeVal').val(logotypeprice);
calculateTotal();
});
$('#materialprice').change(function () {
materialprice = $(this).val();
$('input.materialVal').val(materialprice);
calculateTotal();
});
});
function calculateTotal() {
var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logotypeprice);
$('input.totalVal').val(totalprice);
}
Here is an updated demo
PS: Instead of writing jQuery for each element you can use the short version $
You are trying to access logotypeprice variable which is not accessible inside materialprice change handler
Either declare logotypeprice globally like this
var baseValue = 1000;
var logotypeprice;
jQuery('#logotypeprice').change(function(){
logotypeprice = jQuery(this).val();
jQuery('input.logoTypeVal').val(logotypeprice);
});
jQuery('#materialprice').change(function(){
var materialprice = jQuery(this).val();
jQuery('input.materialVal').val(materialprice);
var baseprice = "100";
var logoval = logotypeprice;
var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
alert(totalprice);
jQuery('input.totalVal').val(totalprice);
});
Or
access logo value from input.logoTypeVal or #logotypeprice value like this
jQuery('#materialprice').change(function(){
var materialprice = jQuery(this).val();
jQuery('input.materialVal').val(materialprice);
var baseprice = "100";
var logoval = jQuery('input.logoTypeVal').val(); // OR logoval = jQuery('#logotypeprice').val();
var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
alert(totalprice);
jQuery('input.totalVal').val(totalprice);
});
Here is a demo

How can we create the another select box with some options through JQuery

I would like to create another select box from a select box value. through Jquery.
We have applied this codes and it's not working at the moment.
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
var rooms = $("#rooms");
var ROOMS = rooms.val() ;
var max_adults_a = 3;
var min_adults_a = 2;
var max_adults = max_adults_a;
var min_adults = min_adults_a;
var num = min_adults * ROOMS;
ROOMS.change(function() {
while (num <= max_adults_a * ROOMS) {
$('#person').append($('<option></option>').val(num).html(num)
)};
});
});
</script>
</head>
<body>
<h1>Populating Select Boxes</h1>
Category:
<select name="rooms" id="rooms">
<option Selected value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
person
<select name="person" id="person">
</select>
</body>
we have 2 select box one for rooms, and other for Persons, We have a list for Rooms, but we have to update the Persons according to the rooms size, if we have a room type "3" then the persons will be allowed for this room is 6,7,8,9.
The options for Persons will change accordingly.
Please provide me suitable solutions
Thanks
Rod

$(document).ready(function () {
var max_adults = 3;
var min_adults = 2;
$('#rooms').change(function(){
var room_num = $(this).val();
var options = '';
for (var i = min_adults * room_num; i <= max_adults * room_num; i++) {
options += '<option value="'+i+'">'+i+'</option>'
}
$('#person').html(options);
});
$('#rooms').change();
});

On jsfiddl.net
<head>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
var rooms = $("#rooms");
var ROOMS = rooms.val() ;
var max_adults_a = 3;
var min_adults_a = 2;
var max_adults = max_adults_a;
var min_adults = min_adults_a;
$("#rooms").change(function() {
$('#person').html("");
var selectedRoom = parseInt($("#rooms option:selected").val(), 10)
var num = min_adults * selectedRoom ;
while (num <= max_adults_a * selectedRoom ) {
$('#person').append($('<option></option>').val(num).html(num));
num++;
}
});
});
</script>
</head>
<body>
<h1>Populating Select Boxes</h1>
Category:
<select name="rooms" id="rooms">
<option Selected value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
person
<select name="person" id="person">
</select>
</body>

Develop Reference

JavaScript is the programming language of the Web.

Jquery option:selected not working - javascript

Related

Sorting selectbox with Javascript

Dropdown with 4 Levels identical selections

Obtain value from select menu and perform operations on that in javascript

change event in jquery

How can we create the another select box with some options through JQuery

Categories

Resources