Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Textbox

Outputting Data On A Webpage Based On Dropdown Menu/form Value Inputs

Post a Comment
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);
}
});

functionr2d (i) {
  returnMath.round(i * 100) / 100
}

$(".selectStock").change(updateAmount);
$("#numberOfStocks").on('keyup', updateAmount);

functionupdateAmount() {
  $(".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;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><inputvalue="1"type="text"id="numberOfStocks" /><divstyle="display:block;"><divclass="side"><selectclass="selectStock"><option>Pick a stock!</option></select><br><br><divclass="result"></div></div><divclass="side"><selectclass="selectStock"><option>Pick a stock!</option></select><br><br><divclass="result"></div></div></div></body>

Post a Comment for "Outputting Data On A Webpage Based On Dropdown Menu/form Value Inputs"