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);
});
});
Related
I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.
For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html" . and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).
I'm struggeling for days to make this work. I feel some how this must be possible. Please help!
This is the code I use. When I replace the value to a page name (ex. westsummer.html) . The page will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit. Finaly there should be 16 different html page name.
Iwant this solution with jQuery or javascript.
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
Next, let's write a function to compose a link using the values from those select tags. I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
//Assuming that the html files are in the same folder as the current page
return "./" + direction + season + ".html";
}
Finally, let's update our button to change the page location to the new link when clicked:
<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>
Here's everything altogether:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="selCont">
<h2>pick an option</h2>
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
</div>
</body>
<script>
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
return "./" + direction + season + ".html";
}
</script>
</html>
Right now I have two dropdowns and the goal is to have the User select "OFF" on the first option, the second dropdown automatically selects "ON" and vice versa.
The code currently below with the JavaScript works, but works for only one pair of the dropdown. I was wondering what I need to change to make it work for both pairs or even four pairs in the future.
Code:
<!DOCTYPE html>
<html>
<body>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
<option value="">Select Option</option>
<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class="microphone select2" name = "microphone">
<option value=" " selected="selected">Select Option</option>
<option value="ON. Thank you.">ON</option>
<option value="OFF. Thank you.">OFF</option>
</select>
</div>
<br>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
<option value="">Select Option</option>
<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class="microphone select2" name = "microphone">
<option value=" " selected="selected">Select Option</option>
<option value="ON. Thank you.">ON</option>
<option value="OFF. Thank you.">OFF</option>
</select>
</div>
</form>
</div>
<script>
const cmicrophone = document.querySelectorAll('.select1')[0];
const microphone = document.querySelectorAll('.select2')[0];
function inputHandler(thisSelect, otherSelect) {
otherSelect.selectedIndex =thisSelect.selectedIndex
}
cmicrophone.addEventListener('change', event => {
inputHandler(cmicrophone, microphone);
});
microphone.addEventListener('change', event => {
inputHandler(microphone, cmicrophone);
});
</script>
</body>
</html>
Here is your solution
<!DOCTYPE html>
<html>
<body>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
<option value="">Select Option</option>
<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class="microphone select2" name = "microphone">
<option value=" " selected="selected">Select Option</option>
<option value="ON. Thank you.">ON</option>
<option value="OFF. Thank you.">OFF</option>
</select>
</div>
<br>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
<option value="">Select Option</option>
<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class="microphone select2" name = "microphone">
<option value=" " selected="selected">Select Option</option>
<option value="ON. Thank you.">ON</option>
<option value="OFF. Thank you.">OFF</option>
</select>
</div>
</form>
</div>
<script>
var cmicrophone = document.querySelectorAll('.select1');
var microphone = document.querySelectorAll('.select2');
function inputHandlerCmicrophone(thisSelect, otherSelect, j) {
var test = document.querySelectorAll('.select1');
for(i=0; i<test.length; i++){
if(test[i] == j){
otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
break;
}
}
}
function inputHandlerMicrophone(thisSelect, otherSelect, j) {
var test = document.querySelectorAll('.select2');
for(i=0; i<test.length; i++){
if(test[i] == j){
otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
break;
}
}}
for(i=0; i<cmicrophone.length; i++) {
cmicrophone[i].addEventListener('change', function (e) {
inputHandlerCmicrophone(cmicrophone, microphone, e.target);
});
}
for(k=0; k<microphone.length; k++) {
microphone[k].addEventListener('change', function (e) {
inputHandlerMicrophone(microphone, cmicrophone, e.target);
});
}
</script>
</body>
</html>
I would suggest using document.getElementById() instead of querySelectorAll(). The problem is that you're always accessing the first one, element 0. You also need to ensure you have unique values for each 'id' property; in the code above you have duplicate values for microphone and cmicrophone.
You will need to add a loop for dynamic number of selects by fetching all of them and iterating over them to map each of the event handlers:
const cmicrophones = document.querySelectorAll('.select1');
const microphones = document.querySelectorAll('.select2');
for (var i = 0; i < cmicrophones.length; i++) {
const cmicrophone = cmicrophones[i];
const microphone = microphones[i];
....
}
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>
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);
});
As the title says, I'm wondering if there's a way to change the value of html items that are generated by jquery. Here's the code that I currently have:
the javascript
<script type="text/javascript">
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
$(".row:first").clone(true).insertAfter(".row:last");
$('#dateDueMonth['+i+']').val(curentMonth + 1);
})
});
</script>
My thought here was that after the row was cloned, I could then change the dropdowns content based upon it's current name, but obviously that's not working, and I've been unable to find a way to "hook" into dynamic html content.
and the base html
<select id="months" name="months">
<option selected 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>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td><div id="showRows"><div class="row" id="row[]"><td class="td_alt"><select id="dateDueMonth[]" name="dateDueMonth[]" >
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option selected value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="dateDueYear[]" name="dateDueYear[]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected value="2011">2011</option>
</select>
Now the generation of dynamic html and form submission works great. Gives me the data that I can use for my back end code. However having it so that I can increment the values in the various dropdowns as I see fit would make data entry by the folks using this page a whole lot easier, hence the issue.
To all that reply, thanks for your help with this jquery/JS noob.
EDIT: For this what I want to have is a form that can spawm multiples copies of the first line encased within the showRows div. When this is submitted, I want it to be able to collect that information in arrays for each select/input statement for the rows that are generated. For example if I selected two months, dateDueMonth, dateDueYear, and amount would be arrays in my form that would have two entries each. The current code does this, but by default it has the default elements for the dropdown menus set the same as the row of HTML that it is cloning.
Not sure what you want to do, but it should work like this
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
var arr;
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
arr=[$(".row:first").clone(true).insertAfter(".row:last")];
$('#dateDueMonth['+i+']').val(curentMonth + 1); //don't know why its here
arr[0].text("your value"); //apply the index you wanna change
})
});
Are you trying to achieve this kind of markup? Demo
<div id="showRows"><div class="row" id="row[0]"><select id="dateDueMonth[0]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[0]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
</div><div class="row" id="row[1]"><select id="dateDueMonth[1]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[1]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
...
This may be what you need. See my demo linked above.
for (var i = 1; i <= this.selectedIndex; i++) {
row = $(".row:first").clone(true)[0];
row.id = "row["+i+"]";
$(row).find("[id^='dateDueMonth']").attr("id","dateDueMonth["+i+"]").val((curentMonth + i) % 12 + 1);
$(row).find("[id^='dateDueYear']").attr("id","dateDueYear["+i+"]");
$(row).insertAfter(".row:last");
}
you cannot use ids as array in JavaScript. if you want, you have to put array index as well when you create element. or else just access the select element as bellow
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++) {
$(".row:first").clone(true).insertAfter(".row:last");
$('.row:last select').val(curentMonth + 1);
}
})
});
Working sample