I am attempting to have 10 drop down selections with 3 choices: 1,2, or 3, and save each selection as an integer, then add them all up and have them displayed. I'm not sure how to do this in HTML and would like some help.
This is an example of a selection I have attempted to use (from w3schools), but I don't see how to temporarily store the input as an integer and then use it later.
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="number">Choose a number:</label>
<select name="numbers" id="numbers">
<optgroup label="Numbers">
<option value="three">3</option>
<option value="two">2</option>
<option value="one">1</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Any kind of help is appreciated.
Most of the html you posted is not necessary, all you really need is your selects. The form element is really only used for communicating information from a user to a server. As far as what your HTML should look like:
<body>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
To collect input from multiple selects, as you are describing would use javascript. The following code returns a list of html elements with the class of '.select'.
let selectArray = document.querySelectorAll('.select');
Next you would want to loop through and add them to a variable.
let number = 0;
for(let i = 0; i < selectArray.length; i++){
number += parseInt(selectArray[i].value);
}
There are a few ways to save variables, for your use I recommend using localStorage.
Related
currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look
Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
I want to make the contains of a second drop down menu dependent on what is selected in the the first. In my case wish to do it for a car selection option. i.e when the car make is selected this then populates the model drop down menu with the relevant models.
As there are a lot of makes of car I would like to keep it concise if possible I presume arrays of models for each make is the solution but how do implement this.
I have look at various solutions and cannot find a suitable answer to this, any suggestions/examples would be gratefully appreciated.
I am using jsp.
Make:<select>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
</select>
You could do it with some simple JS and css ( here is a JSFiddle: http://jsfiddle.net/N7Q57/1/)
Make:
<select name="cars" id="cars">
<option selected value="Choose">Choose</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Toyota">Toyota</option>
</select>
<div id="brands">
<select class="audi">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="bmw">
<option value="3">3</option>
<option value="4">4</option>
</select>
</div
the jQuery
$("#cars").change(function () {
var string = "";
string = $("select#cars option:selected").text();
if (string == "Audi"){
$("#brands .bmw").hide();
$("#brands .audi").show();
$("#brands").show();
} else if (string == "BMW"){
$("#brands .audi").hide();
$("#brands .bmw").show();
$("#brands").show();
}
})
and the CSS:
#brands{
display: none;
}
In the atoms tab of my Periodic Alchemy game, I have dropdowns that allow users to select how many protons, neutrons, and electrons they want in their atom. If a user strikes upon a certain atom, say, hydrogen, (1 Proton, 1 Neutron, 1 Electron), then the text "Hydrogen: 1" should appear signifying that you've discovered Hydrogen. Unfortunately, I can't find anything in the Bootstrap Information website: getboostrap.com
Other than Modals, which didn't suit my needs. Is there a solution to this?
This isn't a bootstrap feature. You can hide text with the CSS: display: none;. You can show it with the jQuery .show().
Does that fit your needs?
JSFiddle
HTML:
<select class="selection" id="protons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="selection" id="neutrons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="selection" id="electrons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="1">Hydrogen</div>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="2">Whatever</div>
JS:
$('.selection').change(function() {
$('.atom').addClass('hide');
$('.atom[data-protons=' + $('#protons').val() + '][data-neutrons=' + $('#neutrons').val() + '][data-electrons=' + $('#electrons').val() + ']').removeClass('hide');
});
I have html in my JSP which ask simple questions, as well as having drop-down boxes for users to select their responses. I also set default responses as well incase they decide to just hit next however I always get null returned. JSP:
<div id="startQrtQuestion" align="left">1) When did you first arrive here?</div>
<div id="startQrtResponse" align="left">
<select name="quarterStart">
<option value="summer">Summer Quarter</option>
<option value="fall" selected="selected">Fall Quarter</option>
</select>
</div>
<div id="programQuestion" align="left">2) What program are you taking?</div>
<div id="programResponse" align="left">
<select name="programSelect">
<option value="bscs" selected="selected">BSCS</option>
<option value="bstm">BSTM</option>
<option value="bsgd">BSGD</option>
<option value="bswd">BSWD</option>
</select>
</div>
<div id="extendedQuestion" align="left">3) Will you be staying extra quarters?</div>
<div id="extendedResponse" align="left">
<div name="extendedStayResponses">
<input type="checkbox" name="extendedStay" id="extendedStay"/>Yes
</div></br>
<div id="extendedFullTime" style="display:none">
Full Time:<select name="extraFullQuarters">
<option value="0" selected="selected">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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>(Taking 12 Credits or More)
</div></br>
<div id="extendedPartTime" style="display:none">
Part Time:<select name="extraPartQuarters">
<option value="0" selected="selected">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="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>
This is all wrapped in a form that will call the post method in my servlet. However when I retrieve those values like so:
String startQuarter = request.getParameter("quarterStart");
String programSelect = request.getParameter("programSelect");
String extendedStay = request.getParameter("extendedStay");
I get null pointer exceptions. Is the value not automatically set to what I have as my default selected option?
Am I not accessing these inputs correctly?
I found out it wasn't any of this code. But another set of code in my group's project.
It turned out to be a session attribute that's suppose to be set, but isn't.
it might be your request object is null.Check it once.
I have a drop down:
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
How would I select item 2 programmatically?
First get a handle on that select somehow:
var select = document.getElementsByTagName("SELECT")[0];
Then manipulate the selectedIndex property (I believe it's a zero-based index):
select.selectedIndex = 1;
If you're talking about pre-selecting an item, simply set the item as "selected" as follows:
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
If you're using plain HTML:
<option selected value="2">2</option>
If you're able to use jQuery, use the val() method:
<select id="foo"> //give it an id
$("#foo").val("2");
jQuery edition...
$('#your_select').val('2');
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
The easiest solution is this:
<select>
<option value="1">1</option>
<option selected value="2">2</option>
</select>