使用HTML中的输入来运行函数

时间:2016-04-08 21:25:09

标签: javascript jquery html

所以我正在使用HTML和JS在股市模拟器上工作。我有一个获得当前股票价格的api here。这是我的HTML http://pastebin.com/ymcGKtin抱歉,对于SO格式化不太擅长。但在功能添加库存中,我试图将提交的表单stock推送到数组stocks。但是,我遇到了一个问题,试图找出如何获取提交的表单stock并将其推送到数组。如果我能得到一些关于如何做到这一点的指示,那就会被批评。具体来说,我想帮助将属性stock推送到数组Stocks。想法?



var Market = {};
var Stocks = [];


Market.getQuote = function(symbol, fCallback){
    this.symbol = symbol;
    this.fCallback = fCallback;
    this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
    this.makeRequest();
}
Market.getQuote.handleSuccess = function(jsonResult){
    this.fCallback(jsonResult);
}
Market.getQuote.handleError = function(jsonResult){
    console.error(jsonResult);
}
Market.makeRequest = function () {
    //Abort any open requests
    if (this.xhr) { this.xhr.abort(); }
    //Start a new request
    this.xhr = $.ajax({
        data: { symbol: this.symbol },
        url: this.DATA_SRC,
        dataType: "jsonp",
        success: this.handleSuccess,
        error: this.handleError,
        context: this
    });
};
function addStock(){
   alert("derp");
  // Stocks.push(ele.getAttribute)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Stock Market Game PRE ALPHA BETA</title>
</head>
<body>
    <form onsubmit = "addStock()">
        <input type="text" name="stock" value =""><br><br>
        <input type="submit" value="Get Price">
    </form>
        
</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

使用JQuery,您可以在表单对象(this - 处理程序中的onsubmit)上使用find

...
    function addStock(form){
        var value = $(form).find('input[name="stock"]').val();
        alert(value);
        Stocks.push(value);

        //prevents a submit of the form
        return false;
    }

</SCRIPT>
<form onsubmit = "return addStock(this);">
    <input type="text" name="stock" value =""><br><br>
    <input type="submit" value="Get Price">
</form>
...

答案 1 :(得分:1)

更改addStock()功能以使用form element collection方法。

function addStock(){
    var xForm = document.forms[0];
    var xField = xForm.elements[0];
    alert("Stock: "+xField.value);
    Stocks.push(xField.value);
    console.log(Stocks);

 }

&#13;
&#13;
var Market = {};
var Stocks = [];


Market.getQuote = function(symbol, fCallback) {
  this.symbol = symbol;
  this.fCallback = fCallback;
  this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
  this.makeRequest();
}
Market.getQuote.handleSuccess = function(jsonResult) {
  this.fCallback(jsonResult);
}
Market.getQuote.handleError = function(jsonResult) {
  console.error(jsonResult);
}
Market.makeRequest = function() {
  //Abort any open requests
  if (this.xhr) {
    this.xhr.abort();
  }
  //Start a new request
  this.xhr = $.ajax({
    data: {
      symbol: this.symbol
    },
    url: this.DATA_SRC,
    dataType: "jsonp",
    success: this.handleSuccess,
    error: this.handleError,
    context: this
  });
};

function addStock() {
  var xForm = document.forms[0];
  var xField = xForm.elements[0];
  alert("Stock: " + xField.value);
  Stocks.push(xField.value);
  console.log(Stocks);

}
&#13;
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <title>Stock Market Game PRE ALPHA BETA</title>
</head>

<body>
  <form onsubmit="addStock()">
    <input type="text" name="stock" value="">
    <br>
    <br>
    <input type="submit" value="Get Price">
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
</body>

</html>
&#13;
&#13;
&#13;