I have a button with a link that needs to change based on what the user selects from two dropdown menus.
I found this brilliant solution with one dropdown menu in here:
var sel = document.getElementById('basic_plan');
sel.onchange = function () {
document.getElementById("abc").href = this.value + ".html";
}
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri">3 Years - Rs. 100/month</option>
<option value="bi">2 Years - Rs. 200/month</option>
<option value="ann">1 Year - Rs. 100/month</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>
http://jsfiddle.net/MHh46/1/
However I need a solution where the output link is based on two dropdown menus. For example:
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" name="bill_cycle2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>
But how would the Javascript part look in order for this to work?
For example if you select option "1" from dropdown #1 and option "A" from dropdown #2 the button links to www.link1.com, if you select "2" and "A" it links to www.link2.com, 3A = www.link3.com, 1B = www.link4.com and etc.
I hope my question makes sense.
Kind regards. :-)
Change the drop downs so they both have the same class (class="dropdown-plans") and then you can tie a change event to both. When either is selected, the event will trigger, and combine the value of both selections, and then assign the result to the href.
JQuery
$('.dropdown-plans').change(function() {
var val = $('#basic_plan').val() + $('#basic_plan2').val();
$('#abc').prop('href',val);
});
JS Fiddle demo
UPDATE
Here is an updated fiddle showing how to assign a link based on the selectiosn made from the drop downs. With this approach, you will need to define the mapping between the various combinations possible with the dropdowns and the related link that should be assigned. I have only shown 2 combinations in the demo.
var sel = document.getElementById('basic_plan');
var sel2 = document.getElementById('basic_plan2');
if(sel.value){
sel2.onchange = function () {
document.getElementById("abc").href = sel.value+""+this.value + ".html";
}}
This part works only if the first -select- is set. Hope this helps.
Register an event handler that handles a change of any of your two dropdowns and gets the value of the selected options.
var sel = document.getElementById('basic_plan1');
var sel2 = document.getElementById('basic_plan2');
sel.onchange = dropdownChange;
sel2.onchange = dropdownChange;
function dropdownChange() {
var fd = document.getElementById("basic_plan1");
var sd = document.getElementById("basic_plan2");
var firstValue = fd.options[fd.selectedIndex].value;
var secondValue = sd.options[sd.selectedIndex].value;
document.getElementById("abc").href = firstValue + secondValue + ".html";
}
See this JSFiddle.
You can add change event to both selects, and build the url after any change
var basic_plan = document.getElementById("basic_plan");
var basic_plan2 = document.getElementById("basic_plan2");
function changeUrl() {
document.getElementById("def").innerHTML = "www.site.com/" + basic_plan.value + basic_plan2.value;
}
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle" onchange="changeUrl()">
<option value="tri">3 Years - Rs. 100/month</option>
<option value="bi">2 Years - Rs. 200/month</option>
<option value="ann">1 Year - Rs. 100/month</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" name="bill_cycle2" onchange="changeUrl()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
<br/>
<span id="def"></span>
</div>
You can see my code below or this link for reference:
function GotoLink() {
var sel = $('.basic_plan option:selected').text();
var sel2 = $('.basic_plan2 option:selected').text();
alert('www.site.com/' + sel + '' + sel2 + '');
document.getElementById("abc").href = 'www.site.com/' + sel + '' + sel2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dropdown-plans">
<select id="basic_plan" class="basic_plan" name="bill_cycle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" class="basic_plan2" name="bill_cycle2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="#" onclick='GotoLink()'> Order now </a>
</div>
Related
This may come out very convoluted but I will try to keep it as clear as possible.
I am trying to to find out if its possible to have an simple html form. That has 3 drop-downs that have similar options for different variable, that I want to be able to then use in JavaScript functions to return a sum. Ultimately I am trying to keep this all local without having to submit the info to a server to return the answer but if that is the way I have to go I will try to figure it out.
Example: I have 3 drop-downs in a form. They are numberOfDice, sidesPerDice, and constMod; all three drop downs are loaded with numbers (no text strings) numberOfDice values= 1-10, sidesPerDice values = 4sides, 6sides, 8sides, upto 20sides, and constmod values are plus0, plus1, plus2 etc upto plus10, I believe that each individual option in the drop-down has to have its own unique value (correct me if I'm wrong)
the below is the HTML for the form/user interface. I don't have any JavaScript as of yet as I was not sure if this would even work with JavaScript or if I would have to use asp.net or php. (Currently not working on server side scripting, but hopefully soon).
Any insight into this would be much appreciated. Also if you can make any recommendations to the form/drop-down code is correct.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="Script.js"></script>
</head>
<body>
<form id="totalHitPoints">
<div class="w3-container w3-center w3-blue">
<h1>Monster Stat Generater</h1>
</div>
<div class="w3-container">
<p>Number of Dice:</p>
<select id="numberOfDice">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="w3-container">
<p>Number of Sides per Dice</p>
<select id="sidesPerDice">
<option value="4sides">4</option>
<option value="6sides">6</option>
<option value="8sides">8</option>
<option value="10sides">10</option>
<option value="12sides">12</option>
<option value="20sides">20</option>
</select>
</div>
<div class="w3-container">
<p>Constitution Modifier</p>
<select id="constMod">
<option value="plus0">0</option>
<option value="plus1">1</option>
<option value="plus2">2</option>
<option value="plus3">3</option>
<option value="plus4">4</option>
<option value="plus5">5</option>
<option value="plus6">6</option>
<option value="plus7">7</option>
<option value="plus8">8</option>
<option value="plus9">9</option>
<option value="plus10">10</option>
</select>
</div>
<br>
</form>
<button id="form_submit" type="submit">Get Hit Points</button>
<div class="w3-container" style="width:128px;">
<p>Total Hit Points:</p>
<p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
</div>
</body>
I don't think that i was clear enough in my original description. I think that all of the solutions (which are great and provided me with information that will come in handy in the near future) are totaling the sum's of the values in the drop downs. Which reading back is what it sounds like I was attempting. However there is more that I am looking to do.
What I want to happen is the user (ME) Will select the variables with the drop downs. i.e. 4 die rolls of 8 sided dice with a + 4 modifier. All of the solutions appear to be taking the values (4, 8, 4) and adding them for a total of 16 when I am trying to get the total of 4 eight sided dice + 4. which should return a value between 8 (1,1,1,1,4) and 36 (8,8,8,8,4). I hope that clears it up.
This might help as well, Currently this is part of another script.
function getRandom() {
return Math.floor(Math.random() * 6) + 1;
for this function I would want the drop down for sidePerDie to change the multiplier to the value of the drop down. Either 4, 6, 8, 10, 12 or 20.
and also the following
for(var i = 0; i < 4; ++i) {
roll = getRandom();
diceTotal += roll;
d.push(roll);
}
This rolls the dice 4 times. I would like the drop down to change the 4 to the number of rolls that i would like.
That way when I click the Get hit points button. the function will fire and roll the type of die (4, 6, 8, etc side) a number of times (1-10) and then add the modifier to the total.
var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);
function getSum() {
var constMod = parseInt(document.getElementById("constMod").value),
sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
numberOfDice = parseInt(document.getElementById("numberOfDice").value);
var total=0;
var div_to_fill = document.getElementById("getHitPoints");
var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);
console.log(randomVariableArray);
for(var i in randomVariableArray) {
total += randomVariableArray[i];
}
div_to_fill.innerHTML = total;console.log(total);
}
function getRandom(numberOfDice, sidesPerDice, constMod) {
var arr = [];
for(var i = 0; i < numberOfDice; ++i) {
rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
arr.push(rollDie);
}
arr.push(constMod);
return arr;
}
<html>
<head></head>
<body>
<form id="totalHitPoints">
<div class="w3-container w3-center w3-blue">
<h1>Monster Stat Generater</h1>
</div>
<div class="w3-container">
<p>Number of Dice:</p>
<select id="numberOfDice">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="w3-container">
<p>Number of Sides per Dice</p>
<select id="sidesPerDice">
<option value="4">4 sides</option>
<option value="6">6 sides</option>
<option value="8">8 sides</option>
<option value="10">10 sides</option>
<option value="12">12 sides</option>
<option value="20">20 sides</option>
</select>
</div>
<div class="w3-container">
<p>Constitution Modifier</p>
<select id="constMod">
<option value="0">0plus</option>
<option value="1">1plus</option>
<option value="2">2plus</option>
<option value="3">3plus</option>
<option value="4">4plus</option>
<option value="5">5plus</option>
<option value="6">6plus</option>
<option value="7">7plus</option>
<option value="8">8plus</option>
<option value="9">9plus</option>
<option value="10">10plus</option>
</select>
</div>
<br>
</form>
<button id="form_submit" type="submit">Get Hit Points</button>
<div class="w3-container" style="width:128px;">
<p>Total Hit Points:</p>
<p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
</div>
</body>
</html>
EXPLANATION: first of all your option values should be integers and unqiue.. make your html as follows:
<form id="totalHitPoints">
<div class="w3-container w3-center w3-blue">
<h1>Monster Stat Generater</h1>
</div>
<div class="w3-container">
<p>Number of Dice:</p>
<select id="numberOfDice">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="w3-container">
<p>Number of Sides per Dice</p>
<select id="sidesPerDice">
<option value="4">4 sides</option>
<option value="6">6 sides</option>
<option value="8">8 sides</option>
<option value="10">10 sides</option>
<option value="12">12 sides</option>
<option value="20">20 sides</option>
</select>
</div>
<div class="w3-container">
<p>Constitution Modifier</p>
<select id="constMod">
<option value="0">0plus</option>
<option value="1">1plus</option>
<option value="2">2plus</option>
<option value="3">3plus</option>
<option value="4">4plus</option>
<option value="5">5plus</option>
<option value="6">6plus</option>
<option value="7">7plus</option>
<option value="8">8plus</option>
<option value="9">9plus</option>
<option value="10">10plus</option>
</select>
</div>
<br>
</form>
<button id="form_submit" type="submit">Get Hit Points</button>
<div class="w3-container" style="width:128px;">
<p>Total Hit Points:</p>
<p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
</div>
next your javascript function add a event listener click:
var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);
then define the actual function which calculates sum.
Then first parse the options to int:
function getSum() {
var constMod = parseInt(document.getElementById("constMod").value),
sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
numberOfDice = parseInt(document.getElementById("numberOfDice").value);
Then dine another function getRandom which gets the number of random dies as array
var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);
function getRandom(numberOfDice, sidesPerDice, constMod) {
var arr = [];
for(var i = 0; i < numberOfDice; ++i) {
rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
arr.push(rollDie);
}
arr.push(constMod);
return arr;
}
Then loop through the array and add all the values
for(var i in randomVariableArray) {
total += randomVariableArray[i];
}
the fill the div with the sum using innerHtml
var div_to_fill = document.getElementById("getHitPoints");
div_to_fill.innerHTML = total;console.log(total);
}
on whole you js will be
var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);
function getSum() {
var constMod = parseInt(document.getElementById("constMod").value),
sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
numberOfDice = parseInt(document.getElementById("numberOfDice").value);
var total=0;
var div_to_fill = document.getElementById("getHitPoints");
var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);
console.log(randomVariableArray);
for(var i in randomVariableArray) {
total += randomVariableArray[i];
}
div_to_fill.innerHTML = total;console.log(total);
}
function getRandom(numberOfDice, sidesPerDice, constMod) {
var arr = [];
for(var i = 0; i < numberOfDice; ++i) {
rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
arr.push(rollDie);
}
arr.push(constMod);
return arr;
}
Link to fiddle: [https://jsfiddle.net/qfxvydmp/][1]
This is indeed possible. This post on eduMaven does a good job of showing how to do pretty much this exact thing: http://edumaven.com/javascript-programming/get-value-of-selected-option . This post gives an example in pure JS:
var selector = document.getElementById('id_of_select');
var value = selector[selector.selectedIndex].value;
This is easy enough to do is pure JS, but another search for the same problem in jQuery pulls up this example: https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/ . This post shows that the jQuery way is just:
var value = $( "#myselect" ).val();
It is a little bit unclear exactly what you want to do with this information. I am assuming based on what you did say that you want to do something with the selected values when the user clicks "submit", without actually sending an HTTP request.
To do this part, I would actually skip the "submit" type of the button, and instead define an "onclick" event for the button, as shown here: http://www.w3schools.com/jsref/event_onclick.asp . The example given is:
<button onclick="myFunction()">Click me</button>
Then, you will need to define a function in your JS file to actually perform whatever computation you want to do. This could really be any calculation you want--this is just a matter of manipulating javascript variables. From what you say you want above, it would look something like:
function myFunction(){
// get the integer values from your select options
var numDice = parseInt( $( "#numberOfDice" ).val() );
var sidesDice = parseInt( $( "#sidesPerDice" ).val() );
var mod = parseInt( $( "#constMod" ).val() );
// "roll" numDice times
var sum = 0;
for (i = 0; i < numDice; i++) {
// roll a random number and add mod, then add to sum
sum += Math.floor((Math.random() * sidesDice) + 1) + mod;
}
// output answer in whatever form you see fit --
// could be put back into the html (as shown in the links provided), printed to console, or used in a later calculation
console.log(sum);
}
I hope this walkthrough will help point you and others in the right direction with some of this stuff. However, you should really look into some of the basics of using jQuery of JS to select html elements--this really is pretty much the basic use case of these technologies! It would be helpful for you to get more familiar with the basics before trying to fell your way blindly here. There are plenty of resources online, including the ones I linked to (which were found by a quick search; that said, knowing the proper search terms can, admittedly, be tricky).
First of all - remove the value attribute from each option element as this will make things easier when obtaining the values from the select elements
<div class="w3-container">
<select id="numberOfDice">
<option>1</option>
<option>2</option>
<option>3</option>
....
</select>
</div>
<div class="w3-container">
<p>Number of Sides per Dice</p>
<select id="sidesPerDice">
<option>4</option>
<option>6</option>
<option>8</option>
...
</select>
</div>
<div class="w3-container">
<p>Constitution Modifier</p>
<select id="constMod">
<option>0</option>
<option>1</option>
<option>2</option>
...
</select>
</div>
You can remove the form element also.
You need to add a JavaSCript event to the button so it knows what to do once you click on the button.
<button id="form_submit" onclick='doCalc()'>Get Hit Points</button>
You need a JavaScript function
function doCalc() {
//--- get the input values
var parseInt(numberOfDice = document.getElementById('numberOfDice').value,10);
...
//-- do you calculations
...
//--- display your results
document.getElementById('getHitPoints').innerHTML = myResults;
}
The values for your select dropdowns don't have to be unique, they can be anything you like. You've given each of your selects a unique id e.g id="numberOfDice" which is good - the <option> tag in each of them is a child of the <select> tag, and we can get that value using javascript.
I'd remove the text from your values so you're just dealing with numbers - e.g value="plus0" should become value="0" for everything.
Include the jquery library in your head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Then in your Script.js add the following
$( document ).ready(function() {
// listen for a click event on your button
$('#form_submit').click(function(event) {
// stop the form submitting data - we just want to update your html
event.preventDefault();
// get the values of your selects as variables
var numberOfDice = $('#numberOfDice').val();
var sidesPerDice = $('#sidesPerDice').val();
var constMod = $('#constMod').val();
// do the calculation
var sum = numberOfDice + sidesPerDice + constMod;
// now update your html with your calculation
$('p#getHitPoints').html(sum);
});
});
I want to show The licorice flavor, chocolate color, and topping chosen. I.e. "Green apple, white, christmas sprinkles."
please help not sure if i should have given each option a numeric value. I just did it just because. Feel free to change it to text or whatever you feel will work. I would love some advice on structuring if you see anything. Thank you in advance.
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>
<script type="text/javascript">
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = (a,b,c);
document.getElementById('result').innerText = answer;
};
</script>
Close. Try this:
var answer = [a,b,c].join(" ");
document.getElementById('result').innerText = answer;
Check this if you can use jquery or this if you are using javascript only
Using the code from the link
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
I guesh you want to do this.
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = "("+a + "," + b + ","+ c +")";
document.getElementById('result').innerText = answer;
};
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>
Try this:
document.getElementById('link').onclick = function() {
var a = document.getElementById('Licorice').value;
var b = document.getElementById('Chocolate').value;
var c = document.getElementById('Toppings').value;
var answer = [a,b,c].join(", ");
document.getElementById('result').innerText = answer;
};
Fiddle
I hope I can explain this well. Note the attached image below. Each has a classname of "classtime" and contains a list of available schedules for a class.
As you can see in the "instructions" in the image, I need to validate that a user doesn't select classes on back-to-back days. I'm not sure how to do this in jQuery; I'm fairly sure it can be done, and probably easily, but I don't know how.
So the plan is to act on the change() event of a given drop-down, and then look at the value of the select before and the select after, and if the value is not 0, complain to the user and reset the value of the current drop-down to 0.
Thanks!
This is one way with disables.
$('select').change(function(){
var hasVal = $(this).val() != 0;
var index = $('select').index(this);
var total = $('select').length;
//before select
if((index-1) >= 0){
var disableBefore = hasVal;
// check incase 2 before has a value
if(!disableBefore && ((index-2) > 0)){
disableBefore = $('select:eq(' + (index-2) + ')').val() != 0;
}
$('select:eq(' + (index-1) + ')').prop('disabled', disableBefore);
}
//after select
if((index+1) < total){
var disableAfter = hasVal;
// check incase 2 after has a value
if(!disableAfter && ((index+2) < total)){
disableAfter = $('select:eq(' + (index+2) + ')').val() != 0;
}
$('select:eq(' + (index+1) + ')').prop('disabled', disableAfter);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select>
<option value="0">a</option>
<option value="1">aa</option>
</select>
</div>
<div>
<select>
<option value="0">b</option>
<option value="1">bb</option>
</select>
</div>
<div>
<select>
<option value="0">c</option>
<option value="1">cc</option>
</select>
</div>
<div>
<select>
<option value="0">d</option>
<option value="1">dd</option>
</select>
</div>
<div>
<select>
<option value="0">e</option>
<option value="1">ee</option>
</select>
</div>
<div>
<select>
<option value="0">f</option>
<option value="1">ff</option>
</select>
</div>
<div>
<select>
<option value="0">g</option>
<option value="1">gg</option>
</select>
</div>
i'm a bit confused about how to go about this problem. Currently when a user changes the "quantity" from the dropdown, it checks the checkmark, but when its moved to zero the checkmark is unchecked.
var val = 0
$('.drop').on('change',function() {
var val = $(this).val();
if(val > 0) {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', true);
}
else {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', false);
}
});
part of the form:
<input class='check' id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='col-lg-8'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="4" />
test
<br>
<div class='subheader'>$22.00</div>
</div>
<div class='col-lg-2'>
<select class="drop" data-cost-per-unit="2200" id="test" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</div>
</div>
</div>
I want to make it so if the checkmark is not checked and you check it, it changes the quantity to 1 and if you uncheck it, it goes to zero. But since I have this other jquery here, if i use $('.checkbox').on('change',fucntion(){} it will change every time the dropdown is moved. Whats a better solution to this problem?
The following code seems to work, from my tests on your fiddle. Both the checkbox and the select affect each other. This code assumes, as your code hints, that all checkboxes will have an id of the form switchName#, where # is a number.
Don't forget to change the 10 (switchName length) on your actual code to match your ids.
var $drops = $('.drop');
$('.check').on('change', function() {
var val = $(this).prop('checked'),
product = this.id.slice(10);
$drops.filter(function (i, e) {
return $(this).attr('prodindex') == product;
}).val(val ? '1' : '0');
});
$drops.on('change',function() {
var val = +(this.value),
product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', val > 0);
});
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have