Outputting Data On A Webpage Based On Dropdown Menu/Form Value Inputs
What I need to do is have some sort of textbox form where someone can input a number, and based on this number a variable will multiply certain values by the number of shares: So
Solution 1:
Add an input and also add the corresponding keyup event to monitor for changes. I wrote up an example in jQuery.
var stocks = [
['Apple', 141.63, 144.77, 90.34],
['Microsoft', 65.48, 65.78, 48.43]
];
$(".selectStock").each(function (){
for (var i = 0, len = stocks.length; i < len; i++) {
$("<option>").html(stocks[i][0]).attr("value", i).appendTo(this);
}
});
function r2d (i) {
return Math.round(i * 100) / 100
}
$(".selectStock").change(updateAmount);
$("#numberOfStocks").on('keyup', updateAmount);
function updateAmount() {
$(".selectStock").each(function () {
index = Number($(this).val());
if (isNaN(index)) {
return;
}
amt = Number($("#numberOfStocks").val());
if (isNaN(amt) || amt == 0) {
amt = 1;
}
$(this).nextAll(".result:first").html("")
.append("$" + r2d(amt*stocks[index][1]) + " per share<br />")
.append("$" + r2d(amt*stocks[index][2]) + " high year<br />")
.append("$" + r2d(amt*stocks[index][3]) + " low year<br />");
});
}.side {
float:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input value="1" type="text" id="numberOfStocks" />
<div style="display:block;">
<div class="side">
<select class="selectStock">
<option>Pick a stock!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
<div class="side">
<select class="selectStock">
<option>Pick a stock!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
</div>
</body>
Post a Comment for "Outputting Data On A Webpage Based On Dropdown Menu/Form Value Inputs"