JS未阻止表单提交，localStorage未存储数据问题排查求助

我有如下build.html页面，预期需求为阻止表单提交，收集表单变量并存储至localStorage后跳转至loading页面。但目前表单仍会直接提交，跳过了e.preventDefault()逻辑，也未将数据存入localStorage，脚本似乎完全未执行，请问可能的原因是什么？

<form method="post" id="main_form">
<h3> Enter company name and choose from the dropdown </h3>
<h5> Symbols taken from Yahoo finance can be also added manually. After adding it once, the symbol will appear in the list. </h5>
<p>(note that GBP stocks are converted to USD, currently only US and UK stocks are compatible with conversion. The current rate is ${{ GBP }} to £1)</p>
<div class="autocomplete" style="width:300px;">
  <input id="myInput" type="text" name="stock" placeholder="Company Name">
</div>
<div style="width: 60%; float:right">
    <input type="button" style="width: 40%; height: 40px; font-size: 13px" value="Top 50 crypto coins" name="no" onclick="enter_crypto()"/>
    <input type="button" style="width: 40%; height: 40px; font-size: 13px" value="Top 60 world stocks" name="no1" onclick="enter_world()"/>
    <input type="button" style="width: 40%; height: 40px; font-size: 13px" value="Top 40 US stocks" name="no2" onclick="enter_US()"/>
    <input type="button" style="text-align: center; width: 40%; height: 40px; font-size: 13px" value="Top 40 mcap +10% div" name="no3" onclick="enter_top_div()"/>
</div>
<div class="form-group">
    <textarea rows=10 id="myTxt" class="form-control" name="symbols" placeholder="symbols" type="text">{{ cached_symbols }}</textarea>
</div>
<h3>Please enter the time range to pull data from</h3>
        <div class="form-group">
            <input autocomplete="off" id="start" value="2015-01-01" class="form-control" name="start" placeholder="start" type="date">
            <input autocomplete="off" id="today" class="form-control" name="end" placeholder="end" type="date">
        </div>

<h3>Please enter the amount to be invested</h3>
        <div class="form-group">
            <input autocomplete="off" value={{ availableCash }} id="amount" class="form-control" name="funds" placeholder="amount" type="number" min="1">
        </div>


<h3>Please enter your upper bounds volatility constraint</h3>
        <div class="form-group">
            <input autocomplete="off" value="25" id="vol" class="form-control" name="volatility" placeholder="volatility" type="number" min="0">%
        </div>

<h3>Please enter your gamma</h3>
<p>Gamma is the tuning parameter. Larger gamma pulls portfolio weights towards an equal allocation. Gamma range is between 0 and 10, floats are also acceptable</p>
        <div class="form-group">
            <input autocomplete="off" value="0.1" id="gamma" class="form-control" name="gamma" placeholder="gamma" type="number" step=".1" min="0" max="10">
        </div>

<h3> Please enter target annual rate of return</h3>
        <div class="form-group">
            <input autocomplete="off" id="target" value="10" class="form-control" name="return" placeholder="rate of return" type="number" min="1">%
        </div>
        <button class="btn btn-primary" type="submit">Build</button>
</form>

<!-- <form name="form1" action="{{url_for('loading')}}" method="post">
</form> -->

<script type="text/javascript">
  const form = document.getElementById('main_form');
  const symbols = document.getElementById('myTxt');
  const start_date = document.getElementById('start');
  const end_date = document.getElementById('today');
  const amount = document.getElementById('amount');
  const volatility = document.getElementById('vol');
  const gamma = document.getElementById('gamma');
  const target = document.getElementById('target');

  form.addEventListener('sumbit', function(e) {
    e.preventDefault();

    const symbolsValue = symbols.value;
    const startDateValue = start_date.value;
    const endDateValue = end_date.value;
    const amountValue = amount.value;
    const volatilityValue = volatility.value;
    const gammaValue = gamma.value;
    const targetValue = target.value;

    localStorage.setItem('symbols-Value', symbolsValue);
    localStorage.setItem('startDate-Value', startDateValue);
    localStorage.setItem('endDate-Value', endDateValue);
    localStorage.setItem('amount-Value', amountValue);
    localStorage.setItem('volatility-Value', volatilityValue);
    localStorage.setItem('gamma-Value', gammaValue);
    localStorage.setItem('target-Value', targetValue);

    window.location.href = {{url_for('loading')}};
  });
</script>

核心问题及修正方案 #

1. 事件名称拼写错误 #

脚本中绑定表单事件时，将正确的submit拼写成了sumbit，导致浏览器无法识别该事件，自定义的拦截逻辑根本不会触发。

修正：将事件名称改为submit：

form.addEventListener('submit', function(e) {
  // ... 原有逻辑 ...
});

2. URL赋值语法错误 #

window.location.href = {{url_for('loading')}};这行代码中，模板引擎生成的URL字符串没有被引号包裹，会直接作为JS代码执行，引发语法错误。即使事件绑定正确，执行到此处也会中断脚本，导致数据无法存入localStorage。

修正：给URL添加双引号：

window.location.href = "{{url_for('loading')}}";

补充验证建议 #

• 打开浏览器开发者工具（F12）的Console面板，提交表单时查看是否有语法报错，这是快速定位JS问题的关键。
• 可以在事件回调开头添加console.log('触发提交逻辑')，验证事件是否正常绑定。

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