There is some JS code which should count an amount from given data-id.
I climbed a lot, but didn’t find an answer how to do it, maybe there’s a person who can help me.
Values were repeated only 1 time.
The amount was made up of data-id.
And the total amount was displayed to be entered in the database.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<select id="goods" onchange="func()" size="4">
<option value="-">--</option>
<option value="milk" dataid="10">milk</option>
<option value="banana" data-id="12">banana</option>
<option value="apple" data-id="13">apple</option>
</select>
<br>
Сумма: <span id="summ">0</span>рублей<br>
<select id="go" onchange="fu()" size="4">
<option value="-">--</option>
<option value="milk" dataid="100">milk</option>
<option value="banana" data-id="120">banana</option>
<option value="apple" data-id="130">apple</option>
</select>
<br>
Сумма: <span id="sum">0</span>рублей<br>
Было выбрано:<br>
<span id="list"></span>
Общая сумма равна: <span id="test4" name="test4">0</span>рублей<br>
<script>
function func() {
if (goods.selectedIndex) {
summ.innerText = +summ.innerText + +goods.options[goods.selectedIndex].value;
list.innerHTML += goods.options[goods.selectedIndex].text + '<br>';
}
}
function fu() {
if (go.selectedIndex) {
sum.innerText = +sum.innerText + +go.options[go.selectedIndex].value;
list.innerHTML += go.options[go.selectedIndex].text + '<br>';
}
}
</script>
</body>
</html>
Im not quite sure what you are trying to do but I guess you're trying to display the value of data-id (Summa: [data-id] rub).
You can achieve it like this:
summ.innerText = +summ.innerText + +goods.options[goods.selectedIndex].getAttribute('data-id');
Related
To practice my javascript skills, I took on a side project creating a paycheck calculator. I am running into issues with my 'if...else' statement. For the life of me, I can't get the correct tax rate to show based on the user's input. No matter what I enter, the console shows .10
Here is the HTML:
const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');
if (parseInt(userSalary.value) >= 100000) {
var taxRate = 0.37;
} else {
var taxRate = 0.10;
}
button.addEventListener('click', event => {
console.log(parseInt(taxRate));
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background-color: white;">
<form>
<label for="contribution">Enter contribution percentage</label>
<input type="number" id="contribution" name="contribution"><br><br>
<label for="salary">Enter your annual salary:</label>
<input type="text" id="salary" name="salary"><br><br>
<label for="tax">Select your tax filing status:</label>
<select id="tax">
<option value="single">Single</option>
<option value="married_joint">Married Filing Jointly</option>
<option value="married_separately">Married Filing Separately</option>
<option value="head_household">Head of Household</option>
</select><br><br>
<label for="paycheck_frequency">Paycheck Frequency</label>
<select id="paycheck_frequency">
<option value="weekly">Weekly</option>
<option value="biweekly">Biweekly</option>
<option value="twice_monthly">Twice a Month</option>
<option value="monthly">Monthly</option>
</select>
</form>
</body>
<button class="calculate">Calculate</button>
<script src="main.js"></script>
</html>
Here is the javascript:
const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');
if (parseInt(userSalary.value) >= 100000) {
var taxRate = 0.37;
} else {
var taxRate = 0.10;
}
button.addEventListener('click', event => {
console.log(parseInt(taxRate));
});
Thank you in advance!
Try following javascript instead:
const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');
let taxRate;
function recalculateTaxRate() {
if (parseInt(userSalary.value) >= 100000) {
taxRate = 0.37;
} else {
taxRate = 0.10;
}
}
button.addEventListener('click', event => {
// Recalculate the rate before printing it.
recalculateTaxRate();
console.log(taxRate);
});
Your "if-else" block runs when the page loads. At that time, userSalary.value is nothing. Why? Because no one has entered anything into that input yet.
You want your "if-else" block to run when the user clicks the button. So move it into your event listener. Then it behaves as you want and recalculates the tax rate each time the button is clicked. Hope it helps.
const userSalary = document.querySelector('#salary');
const button = document.querySelector('.calculate');
button.addEventListener('click', event => {
if (parseInt(userSalary.value) >= 100000) {
var taxRate = 0.37;
} else {
var taxRate = 0.10;
}
console.log("User Salary value:", parseInt(userSalary.value));
console.log("Tax Rate:", taxRate);
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label for="contribution">Enter contribution percentage</label>
<input type="number" id="contribution" name="contribution"><br><br>
<label for="salary">Enter your annual salary:</label>
<input type="text" id="salary" name="salary"><br><br>
<label for="tax">Select your tax filing status:</label>
<select id="tax">
<option value="single">Single</option>
<option value="married_joint">Married Filing Jointly</option>
<option value="married_separately">Married Filing Separately</option>
<option value="head_household">Head of Household</option>
</select><br><br>
<label for="paycheck_frequency">Paycheck Frequency</label>
<select id="paycheck_frequency">
<option value="weekly">Weekly</option>
<option value="biweekly">Biweekly</option>
<option value="twice_monthly">Twice a Month</option>
<option value="monthly">Monthly</option>
</select>
</form>
</body>
<button class="calculate">Calculate</button>
<script src="main.js"></script>
</html>
How about, I have a <select> tag which is filled with the BD.
What I want to do is that when selecting the desired option, that the <select> values are assigned to different <input> tags.
Currently I select some of the options, I get the value and the text of the option. I want to have them as 2 different options.
In my example I have this <select>
<option value = "1"> Pizza1 Pizza2 </ option>
My question is how to separate the text of the option so that Pizza 1 is in one option and Pizza2 is in a different option.
So that something like this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1 Pizza2</option>
<option value="2">Hamburger1 Hamburger2</option>
<option value="3">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
Just put them in different option values as follows:
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
I hope I got what you mean. To make them different options, you just have to put them into different option tags, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
<option value="3">Hamburger1 Hamburger2</option>
<option value="4">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
I hope someone will help me with this, here's the problem. All I want is when choose single in the drop down, I want the numbers in that textbox to be multiply by 1 and whether I choose double in the drop down it will only multiply by 2. Thank you in advance for the help. :)
Also here's my code, I think we can use onchange in here. But I don't know how? Thank you again for the help.
<html>
<head>
<title>Sample</title>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
</body>
</html>
Go ahead and try this.
The variable value will contain the value that you have in your select (dropdown)
<html>
<head>
<title>Sample</title>
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
<script>
$('document').ready(function(){
$('select').change(function(){
var value = $('select').val();
var fnum = $('#fnum').val();
if(value == 'Single'){
var result = fnum*1;
$("#result").val(result);
}
else if(value == 'Double'){
var result = fnum*2;
$("#result").val(result);
}
})
})
</script>
</body>
</html>
I have the min value and max value. If I want to create a drop down show from minimum to maximum number. Any expert can help me solve? Thanks
You can use input time number for that. Which will allow you to set min and max value.
Check following:
<input type="number" min="1" max="5" placeholder="how many person you want?" style="width: 200px;" >
Working Fiddle
your question is very easy , so that I hope I can clear understand what do you want , as following code maybe is you want . Please let me know if it isn't you need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-2.1.4.js"></script>
</head>
<body>
<select id="test1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="min" value="1"/>
<input id="max" value="10" />
<select id="test2">
</select>
</body>
</html>
<script>
var mySelect = $('#test2');
for (i = $('#min').val() ; i <= $('#max').val() ; i++)
{
mySelect.append(
$('<option></option>').val(i).html(i)
);
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create an online quote based on two variables.
The user needs to enter a postcode, and then select an item from a dropdown (1, 2 or 3). Each drop down has a different cost (£10.00, £20.00 and £30.00).
The user must enter their postcode, select 1/2/3 and then press "Get Quote".
If their postcode does not start with a B followed by a number, then text must appear informing that we do not deliver to this area. If the postcode is within B1-B99 then text must appear saying the cost is £10/£20/£30 dependent on which dropdown item they have selected.
I have managed to get the drop down and price alert to work but I am unsure how you integrate the postcode function above this (also I don't want an alert I want the cost to appear underneath the button).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!</center>
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price();"><br>
</form>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
alert(price);
}
</script>
</body>
</html>
Any help would be greatly appreciated, I am no Javascript expert but this one is bugging me! Thanks
You can use a regular expression to check the postcode.
/[B][1-9]-[B][0-99]/
Something like this:
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span>
<br/>
</form>
</div>
<script>
function price() {
var postcode = document.priceCalc.postcode;
var Amt = document.priceCalc.Product;
var price = Amt.value;
var regex = /[B][1-9]-[B][0-99]/;
if (!isNaN(price)) {
if (postcode.value.match(regex) !== null) {
document.getElementById('priceOut').innerHTML = "£" + price;
} else {
document.getElementById('priceOut').innerHTML = "We do not deliver to this area.";
}
} else {
document.getElementById('priceOut').innerHTML = price;
}
}
</script>
Your question is not precise enough, but here is what I've understood, you can use this code :
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span><br/>
</form>
</div>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
document.getElementById('priceOut').innerHTML = price;
}
</script>
The price will be displayed next to the button (what does underneath means exactly?)
You can move the #priceOut div to place the price wherever you want.