Javascript does not prevent submission of form

Question

I have the follwoing build.html which should not submit the form but gather the variables and move it to another html page. I am showing currently the page where I want to gather the variables.

<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>

But for some reason I am not sure why, the form does submit and skip the script e.preventDefault(); and does not store the value in localStorage. It seems that the script does not run at all. Any idea whats going on here?