[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.
Related
I have a form that sends the input
diff=easy&know=high&lang=francais (example)
When I set form action to <form action="https://adressedetest.tumblr.com/tagged/">
The forms successfully sends you to the address https://adressedetest.tumblr.com/tagged/?diff=easy&know=high&lang=francais
How do I format the output of the code so that the output
diff=easy&know=high&lang=francais becomes the output
easy_high_francais ? I know oninput="diff.value_know.value_lang.value" formats it that way but it doesn't make the form send you on https://adressedetest.tumblr.com/tagged/?easy_high_francais, it's still the previous adress.
How do I make the code send you to https://adressedetest.tumblr.com/tagged/easy_high_francais instead of https://adressedetest.tumblr.com/tagged&easy_high_francais (nor https://adressedetest.tumblr.com/tagged/&easy_high_francais) ? I can't use the '&' like that because tumblr always then sends me 404.
Here is a version of the code I wrote, without its distracting visual formatting :
<!DOCTYPE html>
<html>
<body>
<div>
<form action="https://adressedetest.tumblr.com/tagged/" oninput="diff.value_know.value_lang.value">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
You can do that using a bit of javascript.
What I do is extract the parameters values, join them with your desired _ character, and then re-construct a URL.
Hope it helps, otherwise get back to me in the comments.
// Somehow obtain a ref to the form. In this case it's the
// first and only one.
// (If you don't know what I'm talking about, you probably want
// to give the form an id and use `document.getElementById`)
const form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", submitted);
function submitted(e) {
// Prevent the default request
e.preventDefault();
const data = new FormData(form);
const custom_path = Array.from(data)
// You might want to sort the values here first
.map(([_, value]) => value)
.join("_");
const url = new URL(`https://adressedetest.tumblr.com/tagged/${custom_path}`);
// Send your custom request here
console.log(String(url));
}
<!DOCTYPE html>
<html>
<body>
<div>
<form action="">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
First of all, why would you want to get rid of the "?" character ?
Maybe you should read about this : https://www.semrush.com/blog/url-parameters/
" ? " character identify url portion that contains the parameter, which are separated by " & " character. So this is just normal behaviour.
I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
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;
}
I'm trying to create a dropdown with three colors in each option, so the user can select his preferred color scheme.
I was trying to use Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for this, with the following code:
<select class="selectpicker" name="color_scheme" id="color_scheme">
<option value="1" data-content="<div style='height:15px;width:15px;background:red;float:left'></div><div style='height:15px;width:15px;background:green;float:left'></div><div style='height:15px;width:15px;background:blue;float:left;clear:right'></div>"></option>
<option value="2" data-content="<div style='height:15px;width:15px;background:gray;float:left'></div><div style='height:15px;width:15px;background:orange;float:left'></div><div style='height:15px;width:15px;background:yellow;float:left'></div>"></option>
</select>
That doesn't work that well though, because of the floating. Is there a way to fix that, or is there a better way to achieve what I need?
I ended up using Select2, with the templating option:
<select>
<option value="0" data-foo="bar">option one</option>
...
</select>
function format(state) {
var originalOption = state.element;
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}
I've got a select option menu for example with 10 options. When I open the page I want it to be on the 5 element. Example
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
When I open the page I see the first option Volvo,but I what to be for example BMW. If you are going to say to change their place, this is not the idea because I gave you a simple example. In my case the idea is other
I also forget to say that "selected" can't help because I read all of the values from database
<select name="categories" id="news_cat" selected="1">
<option value="0"></option>
{foreach from=$categories item=i}
<option value="{$i.id}"> {$i.name|stripslashes} </option>
{/foreach}
</select>
You need to apply selected or selected="selected" to your chosen element.
so with your example:
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4" selected>Lada</option>
<option value="5">Porsche</option>
</select>
Add selected or selected='selected' to option
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3" selected>Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
JavaScript solution: selectObj.options[2].selected=true;
http://jsfiddle.net/8dWzB/16/
No sure what server side technology you are using , but regardles of that, you can do what you like on the client side using JQuery. Try the following:-
1) Get the data from your database into a list of objects having the id and name of the each car. Something like the following:-
`var categorylist = [{"id":"1","name":"volvo"},{"id":"2","name":"Mercerdes"},{"id":"3","name":"BMW"},{"id":"4","name":"Kia"},{"id":"5","name":"Toyota"},{"id":"6","name":"Honda"},{"id":"7","name":"Seat"},{"id":"8","name":"Nissan"}];'
You can then get this list to the client-side using ajax post or get
2) Then you can iterate through the object like this
$.each(categorylist, function (index, car) {
if(car.id !='5') {
$("#news_cat").append('<option value="' + car.id + '">' + car.name + '</option>');
}else
{
$("#news_cat").append('<option selected=selected value="' + car.id + '">' + car.name + '</option>');
}
});
Have a look at this fiddle