前端之家

  1. 首页
  2. 问答

如何将URL中的电子邮件以多步骤形式添加到隐藏的电子邮件表单字段中？

• 问答

我已经在Webflow中创建了一个包含两个页面的多步骤表单：

第1步：/开始使用 步骤2：/ get-started-final

首先，我在代码之前添加了以下代码

<script>
Webflow.push(function() {
  $('form').submit(function() {
    setTimeout(function() {
      location.href = 'https://websitedomain.com/get-started-final?email=' + $('#emailget').val();
    },100);
  });
});
</script>

此页面是表单输入的第一页，仅询问姓名和电子邮件。

现在入门入门，我需要另外4个字段，但我也想从URL中提取电子邮件并将其添加到入门入门中的隐藏表单字段中。

<script>
function getParameterByName(url) {
    if(!url) url = window.location.href;
    var matches = url.match(/[\?|\&]?email=(.+)/)
    if (!matches[1]) return '';
    return decodeURIComponent(matches[1]);
}
Webflow.push(function() {
  $('#emailget').val(getParameterByName('email'));
});
</script>

我在“入门-最终版”中有一个非隐藏的电子邮件输入，以测试代码是否有效，但不会用电子邮件填充输入。

电子邮件输入的ID为emailget。确认它确实可以抓取电子邮件后，我将其切换为隐藏。

我的代码有什么问题？

iCMS 回答：如何将URL中的电子邮件以多步骤形式添加到隐藏的电子邮件表单字段中？

这里的问题是，您正在函数url中的getParameterByName参数上应用正则表达式匹配，而不是实际的URL本身，并且在if (!matches[1])上会发生错误因为没有匹配项：

function getParameterByName(url) {
    if(!url) url = window.location.href;
    var matches = url.match(/[\?|\&]?email=(.+)/)
    if (!matches[1]) return '';
    return decodeURIComponent(matches[1]);
}

我猜您只是想在URL中获取特定参数，因此您的功能可能就这么简单：

const getParameterByKey = key => new URLSearchParams(location.search).get(key);

完整代码：

<script>
const getUrlParameterFor = key => new URLSearchParams(location.search).get(key);
Webflow.push(function() {
  $('#emailget').val(getUrlParameterFor('email'));
});
</script>
formsfunctionjavascriptjquerywebflow
本文链接：https://www.f2er.com/1830693.html

大家都在问