var select;
window.onload = function () {
var select = document.getElementById("money");
console.log(select);
}
function changedepositedInput(objDropDown) {
console.log(parseInt(objDropDown));
var objdeposited = document.getElementById("deposited");
objdeposited.value=parseInt(objdeposited.value);
var total=parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value+total);
objdeposited.value = parseInt(objdeposited.value);
}
</script>
<h1>Vending Machine Project</h1>
<form name="vendingmachine" action=" ">
Choose Bevrage<br>
<input name="item" type="radio" value="water" checked="checked">Water 75 cents<br>
<input name="item" type="radio" value="soda">Soda $1.50<br>
<input name="item" type="radio" value="coffee">Coffee $1.00<br>
<input name="item" type="radio" value="beer">Beer $2.00<br>
<p>
<label>Deposit Money:
<select name="money" id="money" onchange="changedepositedInput(this)">
<option>Choose Amount</option>
<option value="10">10 cents</option>
<option value="25">25 cents</option>
<option value="50">50 cents</option>
<option value="75">75 cents</option>
<option value="100">$1.00</option>
</select>
</label>
</p>
<p>Total Deposited:<input name="deposited" id="deposited" type="text" readonly="TRUE" value=" "></p>
using this code I am not getting a return of a solid number, for example in a drop down menu I would select two values ie 50 and 75 and they would combine as 5075, does this mean it is still running it through as string somewhere and if so where?
for example in a drop down menu I would select two values ie 50 and 75 and they would combine as 5075, does this mean it is still running it through as string somewhere and if so where?
Yes, here:
objdeposited.value = parseInt(objDropDown.value+total);
objDropDown.value is a string, e.g. '50', and total is a number, e.g. 75.
In JavaScript, '50'+75 is '5075'.
You can replace these 3 lines
var total=parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value+total);
objdeposited.value = parseInt(objdeposited.value);
with
var total = parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value||'0') + total;
Edit:
The default value for the deposited value was a space " " which was causing problems. Change this to the empty string "". Also add a ||'0' to all calls to parseInt (or parseFloat). See http://jsfiddle.net/es2yS/1/ .
Related
How do I display the value of an option on a drop down in an output box when a button with an assigned function is clicked on?
I am new to programming and don't really understand.
/* This function is meant to take the value of the selected option and
display it in the output textbox */
function scoringValue() {
var chosenOne = document.getElementById("totalPoints").value + document.getElementById("options").value;
document.getElementById("totalPoints").value = chosenOne;
}
I am confused on assigning values below here
<p>
Scoring:
<select id="options">
<option value="3">1</option>
<option value="2">2</option>
<option value="7">3</option>
<option value="6">4</option>
<option value="8">5</option>
</select>
<input type="button" id="findScore" value="Score" onclick="return scoringValue()" />
Total Points: <input type="text" id="totalPoints" value=0 disabled="disabled" class="output" />
You need to parseInt values in your code, because they exists as string. So if you will sum two strings "2" + "2", the result will be "22". So the answer is: use parseInt to transform the string to a number to sum them properly. Here is an example:
function scoringValue() {
var chosenOne = parseInt(document.getElementById("totalPoints").value, 10) +
parseInt(document.getElementById("options").value, 10);
document.getElementById("totalPoints").value = chosenOne;
}
<p>Scoring:<select id="options">
<option value="3">3</option>
<option value="2">2</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
<input type="button" id="findScore" value="Score" onclick="scoringValue()" />
Total Points: <input type="text" id="totalPoints" value=0
disabled="disabled" class="output" />
You can use parseInt to convert you values from string to int and then perform your calculation.
Example:
function scoringValue() {
var totalPoints = parseInt(document.getElementById("totalPoints").value, 10);
var optionsValue = parseInt(document.getElementById("options").value, 10);
var chosenOne = totalPoints + optionsValue;
document.getElementById("totalPoints").value = chosenOne;
}
I've created a form with 5 inputs:
Service type
Number of days
Number of children
Number of adults
and I would like to change the value of a button based on these variables using JavaScript.
So Far This is what i got.
JS
$(document).ready(function(){
$('#button').click(function(e) {
var servicetype = $("#servicetype").val();
var service = $("#service").val();
var adults = $("#adults").val();
var children = $("#children").val();
var days = $("#days").val();
window.open("https://secure.sample.com/service.aspx?&days="+days"&service="+service"&adults="+adults"&children="+children"&servicetype="+servicetype , '_blank');
});
});
HTML
<select type="hidden" name="service_type" id="servicetype">
<option type="hidden" value="">Select service</option>
<option type="hidden" value="AK">Service 1</option>
<option type="hidden" value="BK">Service 2</option>
<option type="hidden" value="IK">Service 3</option>
<option type="hidden" value="HK">Service 4</option>
</select>
<input type="number" name="days" min="1" id="days">
<input type="number" name="service" min="1" id="serviceamount">
<input type="number" min="1" name="adult" id="adults">
<input type="number" min="0" name="children" id="children">
<button type="button" id="button">Click Me!</button>
I'm pretty new at this so any help would be great. Sorry for the mishap earlier.
Thanks so much guys!
Here you go. Your mistake was:
1) your variables should read "+foo+" and not just "+foo";
2) the first argument in window.open (i.e. the link) should end with an apostrophe, the same way it started.
tested and working.
$('#button').click(function() {
var servicetype = $("#servicetype").val();
var service = $("#service").val();
var adults = $("#adults").val();
var children = $("#children").val();
var days = $("#days").val();
window.open("https://secure.sample.com/service.aspx?&days="+days+"&service="+service+"&adults="+adults+"&children="+children+"&servicetype="+servicetype+"", "_blank");
});
This is my code. I am attempting to get values from the drop down menu and text, put them into the equation. What am I doing wrong so that the function is stopping half way through. I know it is probably really easy to solve but I cannot find a solution anywhere. Please help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h3> Question 6 </h3>
<h4> How long can you safely tan for? </h4>
<script language="javascript">
function calculate5() {
var skin = document.getElementById("skinselect");
var skinselect = Math.floor(skinselect.options[skinselect.selectedIndex].value);
var cloud = document.getElementById("cloudselect");
var cloudselect = Math.floor(cloudselect.options[cloudselect.selectedIndex].value);
var temp = Math.floor(document.getElementById("temp").value);
var time = ((skinselect + cloudselect) * temp) - 50;
alert("Your safe sunbaking time is " + time + " minutes");
}
</script>
<select id="skinselect">
<option value="error">Skin type: 0 is light, 5 is dark </option>
<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>
</select>
<select id="cloudselect">
<option value="error">Cloud Cover: 0 is clear, 5 is overcast </option>
<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>
</select>
<input type="text" value="Temperature (C)" id="temp" size="16">
<input type="button" value="Calculate" onClick="calculate5()">
</body>
</html>
inside your function you need to access option from select id
var skin = document.getElementById("skinselect");
var skinselect = Math.floor(skin.options[skin.selectedIndex].value);
var cloud = document.getElementById("cloudselect");
var cloudselect = Math.floor(cloud.options[cloud.selectedIndex].value);
var temp = Math.floor(document.getElementById("temp").value);
var time = ((skinselect + cloudselect) * temp) - 50;
you can refer
Get selected value in dropdown list using JavaScript?
In your function:
var skinselect = Math.floor(skin.options[skin.selectedIndex].value);
and
var cloudselect = Math.floor(cloud.options[cloud.selectedIndex].value);
document.getElementById("skinselect").value contains its selected option value.
Set a default value in case any option hasn't already been selected.
Eg.
<select id="skinselect" value="error">
(because error is the default value due to the fact it's on the top of the options list)
I have this form:
<form accept-charset="UTF-8" action="type.php" id="form" method="post">
<label id="type" for="type" class="">Type</label>
<select class="" id="Type" name="type">
<option id="a" value="A">Type A</option>
<option id="b" value="B">Type B</option>
<option id="c" value="C">Type C</option>
<option id="d" value="C">Type D</option>
<option id="e" value="C">Type E</option>
</select>
<label for="type_number" class="inner_text">Type Number</label>
<input name="type_number" type="text" class="false" id="type_number">
<input type="submit" value="Confirm">
</form>
What I need to do is to validate the Type Number. Type Number must start with a number that I choose. For Example:
Type A - 1234
Type B - 2234
Type C - 3234
Type D - 4234
Type E - 5234
So Type A must start with 1, Type B with 2 and so on. I need to check only the first number.
I must to mention that I have a similar question here: Redirect to 3 pages depending of selected option with validation , it's not same thing, but is similar, also I don't get a good answer there to figure this out.
I apreciate any and all comments, thank you.
P.S. Please excuse my English.
Check below Code this will help you.
Page Code
<form accept-charset="UTF-8" action="verify.php" id="form" method="post">
<label id="type" for="type" class="">Type</label>
<select class="" id="Type" name="type">
<option id="a" value="1">Type A</option>
<option id="b" value="2">Type B</option>
<option id="c" value="3">Type C</option>
<option id="d" value="4">Type D</option>
<option id="e" value="5">Type E</option>
</select>
<label for="type_number" class="inner_text">Type Number</label>
<input name="type_number" type="text" class="false" id="type_number">
<input type="button" id="Confirm" value="Confirm" >
</form>
Script
document.getElementById('Confirm').onclick = function () {
var letter =document.getElementById("type_number").value.match(document.getElementById("Type").value);
if (letter !== null) {
letter = letter[0].toLowerCase();
this.value = letter + this.value.substring(1);
}
else {
alert('Number is not correct!');
}
}
You can do something like this.
var startNumbers = {'A': 1, 'B': 2, 'C': 3, 'D': 4, 'E': 5};
function validate() {
// get type
var type = document.getElementById('type').value;
// get number
var number = document.getElementById('number').value;
// get first digit
while (number > 0) {
nr = number;
number = Math.floor(number / 10);
}
// validate
if (nr != startNumbers[type])
return false;
else
return true;
}
Call validate when you need it (onkeyup, on submit, whatever).
Note... this script was directly written as an answer so it may need a few tweaks.
I am trying to make work my price estimator using jQuery and some basic javascript functions.
What I want to do is to change to value of my total variable, depending on the choices made in the dropdown menus. My prices aren't made from a unit price, so I need to set a price for a set of options. You'll understand by seeing my JS code (what I tried that is not working)
Here's my fiddle.
And here's my JS code :
var total=0;
$('#total span').text(total);
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "Front Only" && document.getElementById("quantitySelect").value == "500" && document.getElementById("turnaroundSelect").value == "4 days")
{
total=150;
}
Here's my HTML code :
<form id="calculator">
<center>
<label class="titleLabels">Business cards</label></center>
<label class="formLabels">Dimensions :</label>
<select id="sizeSelect" class="formSelects">
<option value="3.5x2">3.5" x 2"</option>
<option value="3.5x1.25">3.5" x 1.25"</option>
</select>
<label class="formLabels">Paper :</label>
<select id="paperSelect" class="formSelects">
<option value="14 PT 1" selected="selected">14 PT Cardstock Gloss</option>
<option value="14 PT 2">14 PT Cardstock Matte</option>
</select>
<label class="formLabels">Printed :</label>
<select id="printedSelect" class="formSelects">
<option value="Front Only" selected="selected">Front Only</option>
<option value="Front and Back">Front and Back</option>
</select>
<label class="formLabels">Quantity :</label>
<select id="quantitySelect" class="formSelects">
<option value="250">250</option>
<option value="500" selected="selected">500</option>
</select>
<label class="formLabels">Production :</label>
<select id="turnaroundSelect" class="formSelects">
<option value="5 days" selected="selected">5 days</option>
<option value="4 days">4 days</option>
</select>
<div id="totalBox">
<label class="formLabels" id="total"> Total : $<span></span></label>
</div>
<!-- hidden values -->
<input type="hidden" id="sizeSelect_value" value="50" name="formValues" />
<input type="hidden" id="paperSelect_value" value="20" name="formValues" />
<input type="hidden" id="printedSelect_value" value="0" name="formValues" />
<input type="hidden" id="quantitySelect_value" value="25" name="formValues" />
<input type="hidden" id="turnaroundSelect_value" value="5" name="formValues" />
</form>
Here's a working fiddle: http://jsfiddle.net/manishie/72Jbe/3/
Here's the revised Javascript:
var total=0;
$('#total span').text(total);
$('form').on('change', 'select', function() {
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "0" && document.getElementById("quantitySelect").value == "30" && document.getElementById("turnaroundSelect").value == "15")
{
total=150;
$('#total span').text(total);
}
});
First problem is that you were matching agains the text descriptions, not against the values for the second, third and fourth parts of the if statement.
Second problem was that you need to attach this to the change event for the select tags.
Third problem is that you weren't saving the new total after it changed.
Run the fiddle, and change the bottom value to 4 days and it will work.
You must actually change the line
<option value="14 PT 2">14 PT Cardstock Matte</option>
to
<option value="14 PT 2" selected="selected">14 PT Cardstock Matte</option>
And not just change the "value" of the Select.
You could do with:
$("#paperSelect option[selected=selected]").removeAttr("selected") ;
$("#paperSelect option[value=" + value + "]").attr("selected","selected") ;
edit: Just making things prettier