I am new to Stack Overflow and this is my first question.
Please, I hope the question is not very silly and waste any of your time because my knowledge in coding/programming is not very high (I did a database course a few years ago and most I learned to do about coding was to create an exchange between EUR/USD and a clock lol)
So I have been trying to create some sort of presentation with HTML where you can see the results of several years (2020, 2019, etc) and we would like to display immediately below the results to the corresponding year, for example, if I select the year 2019 then below show results for 2019 (earnings, profit, losses and different numbers)
Here there is some basic example of the html code:
<p>Select the year results:</p>
<select id="Year" name="Year">
<option hidden="" disabled="disabled" selected="selected"
value="none">Select an Option</option>
<option value="Year 2021">Year 2021</option>
<option value="Year 2020">Year 2020</option>
<option value="Year 2019">Year 2019</option>
<option value="Year 2018">Year 2018</option>
</select>
I have been looking at some tutorials about HTML and testing a little bit and I already know how to link the results to another page, for example, if I select the year 2019 then a new page is opened and it shows the results of the 2019 year, but I would like to know how to show the results in the same page just below the selection menu. I mean the results change together with the "option value" selected.
So does anyone please know how to do this or have some example to show me so I can work on it?
Thank you all very much for your time and I am sorry if the question is very silly.
You can add onchange to the select, so when the value changes, a javascript function is executed that updates the rest of the HTML on your page.
Here is a simple example without any formatting
const twenty = [3, 42, 100]
const twentyone = [4, 24, 1]
const updateInfo = () => {
const select = document.getElementById('selector')
const div = document.getElementById('output')
let output
if (select.value === '2020') {
output = twenty
}
else if (select.value === '2021'){
output = twentyone
}
div.innerHTML = '' + output
}
<select id='selector' onchange='updateInfo()'>
<option value=2020>2020</option>
<option value=2021>2021</option>
</select>
<div id='output'></div>
For this you need a programming language that allows you to interact with the browser, such as Javascript. This is very necessary as it will allow you to dynamically insert, delete and update elements on the same page.
File index.html
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Select the year results:</p>
<select id="Year" name="Year" onchange="showResults(this.options[this.selectedIndex].value)">
<option hidden="" disabled="disabled" selected="selected" value="none">Select an Option</option>
<option value="2021">Year 2021</option>
<option value="2020">Year 2020</option>
<option value="2019">Year 2019</option>
<option value="2018">Year 2018</option>
</select >
<div id="result"></div>
</body>
</html>
File script.js
function showResults(selectedObject) {
//Inside this function the variable "selectedObject" contains the value of the selected option.
//From now on, Do what you want with the selected value.
//For example: Get data from a database and display it in a table, etc.
document.getElementById("result").innerHTML = "You selected: "+selectedObject;
}
Related
[HTML, JS, CSS]
.
I'm trying to make code for a dining calculator that takes an inputted value, inputted tip amount (from a drop-down menu), and an inputted amount of customers (also from a drop-down menu), then calculates ([startPrice * tipAmount] + [startPrice/peopleEating]) and prints the results.
The problem is that I don't know how to calculate and print results using the inputted values of those drop-down menus. Can anyone give me a simple explanation?
Thanks.
You simply need to use the .value of the dropdown. I have attached a runnable code snippet below:
function processForm() {
var startPrice = document.getElementById("startPrice").value;
var tipAmount = document.getElementById("tipAmount").value;
var peopleEating = document.getElementById("peopleEating").value;
console.log("Start price is " + startPrice);
console.log("Tip Amount is " + tipAmount);
console.log("People Eating is " + peopleEating);
console.log((startPrice * Number(tipAmount)) + (startPrice/Number(peopleEating)) + " Is the calculated number");
}
<!DOCTYPE html>
<html>
<body>
<label for="startPrice">Start Price</label>
<input type="number" name="startPrice" id="startPrice"><br><br>
<label for="tipAmount">Tip Amount</label>
<select id="tipAmount" name="tipAmount">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select><br><br>
<label for="peopleEating">People Eating</label>
<select id="peopleEating" name="peopleEating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button onclick="processForm()">Calculate</button>
</body>
</html>
PS: I have used the Number() function in the dropdown values, because by default they are stored as strings, and converting them into numbers is important.
Hi Ladies and Gentlemen,
Where I work is currently transitioning to a site using Drupal 7. We are trying to get a temporary site up and running until our new site is finished. I am a complete newbie to Drupal, but managing ok. Anyway I have a page that has an onchange select box which is supposed to open a PDF file. I am unclear how to make the onchange function work. I have looked on several pages but everything is a little confusing. Here is the code I need to change :
<form name="cataloglinks" action="">
<p class="style2">
<span class="style3">
Other editions of the online DACC catalog are also available:
<select name="cataloglinks-list" size="1" id="cataloglinks-list onchange="goPage(this.options[this.selectedIndex].value)">"
<option value="." selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
Your issue has nothing to do with Drupal, it might be a HTML tags issue or missing goPage() javascript function.
Try to implement the following code:
<script type="text/javascript">
function goPage(path) {
if(path != '') {
window.location = [location.protocol, '//', location.host, '/'].join('') + path;
}
}
</script>
<select name="cataloglinks-list" size="1" id="cataloglinks-list" onchange="goPage(this.options[this.selectedIndex].value);">
<option value="" selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
</select>
Note: I assumed that catalog folder is in the root directory of your site.
I have a select menu with the weekdays. I would like this menu to have todays day selected. From W3Cschools, I got this simple code for getting an int for todays date:
var d = new Date();
var n = d.getDay();
This would output a 3, since it's wednesday. My problem here is to make the specific day in the list selected. Here is my code for the sropdown:
<div class="matmenu">
<select id="selectDagMat" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="wilink/mandag">Måndag</option>
<option value="wilink/tisdag">Tisdag</option>
<option value="wilink/onsdag">Onsdag</option>
<option value="wilink/torsdag">Torsdag</option>
<option value="wilink/fredag">Fredag</option>
<option value="wilink/lordag">Lördag</option>
<option selected="selected" value="wilink/sondag">Söndag</option>
</select>
Also, an example of the page can be found here:
http://stilius.se/wilink/
Thanks in advance!
Do you mean like this: http://jsfiddle.net/xuPz2/1/ ? You get the element via getElementById and then you set the value.
Is there a way to place the user's HTML form selections into a table? So, say they select the first option "Apples" from the drop down menu labled "Favorite Fruits". "Apples" would then appear in a table on the same page. Any help is greatly appreciated.
EXAMPLE OF WHAT I WANT TO DO:
I have the following drop down menu. The user selects his or her favorite game, and when they do a new div appears asking why. Each selection must get printed in a table. I am not sure how.
<tr><td>
<script>
var sections = {
'TF2': 'section2',
'why': 'section3',
};
var selection = function(select) {
for(i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
</script>
<form id="survey" action="#" method="post">
<tr><td><div id="section1" style="display:block;">
<label for="game">Select Your Favorite Game</label>
<select id="game" onchange="selection(this);">
<option disabled selected>Choose</option>
<option value="TF2">TF2</option>
<option value="LoL">League of Legends</option>
<option value="Minecraft">Minecraft</option>
</select>
</div></tr></td>
<tr><td><div id="section2" style="display:none;">
<label for="type">Why do you like it?:</label>
<select id="type" onchange="selection(this);">
<option disabled selected>Options</option>
<option value="fun">Fun</option>
<option value="easy">Easy</option>
<option value="difficult">Difficult</option>
</select>
</div></tr></td>
And I want to display the user's selection in a table on the page. Any ideas?
Take a look at this fiddle I just created. It should get you going.
I have almost no experience with jquery and was able to figure it out quickly, based on the link provided by #Billy Moat above as well as this one on :selected
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>