javascript - 如何在预建表单上将表单数据存储到 localStorage（编辑：“无法设置未定义的 'onsubmit' 的属性”）

Question

我正在尝试为我的企业创建一个登录页面，用户到达该页面，填写表格，然后被重定向到预订页面，并嵌入 Calendly。为了让用户不必输入他们的详细信息两次，我希望将第一个表单中的数据（收集姓名和电子邮件）保存到localStorage，然后在他们到达预订页面后进行检索。

我已经弄清楚了在 html 测试器中工作的主要组件，但是当我尝试在我的网站构建器 (MailerLite) 上运行我的脚本时，它不会保存表单数据。

这是应该运行的脚本：

<script>
window.onload = function(){
var submitButton = document.getElementsByClassName("btn btn-block primary")
submitButton[0].onclick = function() {saveInfo()};
function saveInfo() {
  var name = document.getElementsByClassName("form-control")
  localStorage.setItem("name", name[0].value);
  var email = document.getElementsByClassName("form-control")
  localStorage.setItem("email", name[1].value);
}
}
</script>

这是表单的代码：

<form class="mb-0" action="https://static.mailerlite.com/webforms/submit/t4e2c9" data-webform-type="popup" data-code="t4e2c9" data-redirect="https://landing.exaudium.com/calendar_submission" data-redirect-target="_self" method="POST">
  <div class="row">
    <div class="col">
      <div>
        <div class="form-group ml-field-name mb-2">
          <input aria-label="name" type="text" class="form-control" data-inputmask="" name="fields[name]" placeholder="Name" autocomplete="name" aria-invalid="false">
        </div>
      </div>
      <div>
        <div class="form-group ml-field-email ml-validate-email ml-validate-required mb-0">
          <input aria-required="true" aria-label="email" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email" autocomplete="email" aria-invalid="false">
        </div>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <div class="form-group button-block mb-0">
        <button class="btn btn-block primary" type="submit"> LET'S GO! </button>
        <button style="display:none;border-top-right-radius:12px;border-bottom-right-radius:12px" class="btn btn-block loading" type="button" disabled="disabled">
          <div class="spinner-border" style="width:1.25rem;height:1.25rem" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </button>
      </div>
    </div>
  </div>
  <input type="hidden" name="ml-submit" value="1" aria-invalid="false">
</form>

问题似乎是当按下表单按钮时，它会在运行我的脚本之前执行表单的操作，因此它被绕过了。

所以问题是，我怎样才能让我的脚本在表单操作完成之前运行？

请注意，表单的代码是自动生成的，因此我无法编辑它（至少据我所知）。我只能对脚本进行更改。

我的猜测是，我需要更改submitButton提交表单时运行的定义，可能类似于：

var submitButton = document.getElementsByClassName("mb-0")
submitButton[0].onsubmit = function() {saveInfo()};

任何帮助将不胜感激！谢谢

仅供参考：我无论如何都不是开发人员，所以任何复杂的答案都需要一些解释。

编辑：

经过一番挖掘，我注意到我的代码片段被 Mailerlite “缩小”了，缩小后的代码似乎存在错误，据我所知，这是不应该发生的。

以下是代码的结束方式：

window.onload=function(){
  document.getElementsByClassName("mb-0")[0].onsubmit=function(){
    !function(){
      var e=document.getElementsByClassName("form-control");
      localStorage.setItem("name",e[0].value);
      document.getElementsByClassName("form-control");
      localStorage.setItem("email",e[1].value)}()}};

我在开发人员控制台中遇到的错误是：“book_a_call:1 Uncaught TypeError: Cannot set property 'onsubmit' of undefined at window.onload”

不知道为什么要这样做，因为我没有使用变量来执行onsubmit操作。

标签： javascriptformslocal-storageundefined