如何将JavaScript获取的股票数据显示在表单字段中？

嘿，问题根源很明显啦——你页面里有两个id完全相同的元素：一个是用来展示价格的<span id="DataID">，另一个是表单里的隐藏<input id="DataID">。HTML规范里明确要求id必须是页面唯一的，所以你的JavaScript代码只会找到第一个匹配的元素（也就是那个span）来更新内容，自然不会同步到input字段里。

下面是具体的修复步骤和代码：

1. 修正HTML的id重复问题 #

把表单里隐藏input的id改成唯一值，比如stockPriceInput：

<div>
  <span id="DataID"></span>
</div>
<form role="form" action="{{url('user/name')}}" method="post">
  <div class="form-group mb-3">
    <div class="input-group input-group-merge input-group-alternative">
      <div class="input-group-prepend">
        <span class="input-group-text"> USD</span>
      </div>
      <input type="number" step="any" class="form-control" placeholder="" name="amount" required>
      <input type="hidden" class="form-control" value="AMZN" name="symbol">
      <!-- 这里修改了id为唯一值 -->
      <input type="hidden" class="form-control" id="stockPriceInput" name="price">
    </div>
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-primary my-4">Purchase</button>
    <h4><span id="amznstock_changp"></span></h4>
  </div>
</form>

2. 同步更新表单字段的JavaScript代码 #

在AJAX请求的success回调里，除了更新span的内容，再添加一行代码来设置隐藏input的value属性：

var amzntheURL = "https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=AMZN&apikey=demo";
$(document).ready(function() {
  $("#amznstockIndicator").show();
  doAjax(amzntheURL);
  $('.ajaxtrigger').click(function() {
    $("#amznstockIndicator").show();
    doAjax(amzntheURL);
    return false;
  });
  function amznnumberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }
  function doAjax(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      contentType: "application/json",
      success: function(data) {
        var amznsymbol = data['Global Quote']['01. symbol']
        var amznlastTradePriceOnly = data['Global Quote']['05. price']
        var amznlastVolume = data['Global Quote']['06. volume']
        var amznchangep = data['Global Quote']['10. change percent']
        
        // 更新span显示（顺便用你的格式化函数处理了千分位）
        $('#DataID').html(amznnumberWithCommas(amznlastTradePriceOnly));
        // 同步更新隐藏表单字段的value
        $('#stockPriceInput').val(amznlastTradePriceOnly);
        
        $("#amznstockIndicator").hide();
      },
      // 额外添加错误处理，方便调试请求失败的情况
      error: function(xhr, status, error) {
        $("#amznstockIndicator").hide();
        console.error('获取股票数据失败:', error);
      }
    });
  }
});

额外提示 #

• 以后写HTML一定要注意id唯一性，重复id不仅会导致JS选择器出错，还可能影响CSS样式应用和页面可访问性。
• 如果不需要千分位格式化，把span更新的代码改回$('#DataID').html(amznlastTradePriceOnly)即可。
• 错误处理能帮你快速排查接口请求失败的问题，比如API密钥过期、网络异常等情况。

内容的提问来源于stack exchange，提问作者MSU Rubel