如何根据表单输入创建自定义 url 供用户共享？答案

【问题标题】：How can I create a custom url for users to share based off of their form input?如何根据表单输入创建自定义 url 供用户共享？
【发布时间】：2020-11-11 11:40:20
【问题描述】：

我对编程还很陌生，但想知道如何在我的域之后附加用户的名字/姓氏以创建自定义 URL？

我有一个表格，询问用户姓名、电子邮件、电话以及他们需要多少个孩子。一旦他们提交了表单，我希望成功页面显示一个自定义网址：domain.com/firstLast，然后理论上他们可以与其他人分享他们的链接以获得可能的折扣。

我可以使用复制功能，但似乎无法显示要显示的网址。请帮忙！

<body>
<section>
<container>
<div>
<div .form-wrapper>
<form>
<div .slider>
  <div .slide>
    <div .form-content>
      <input type="text" id="name">
    </div> 
  </div> 
  <div .slide>
    <div .form-content>
      <input type="email" id="email">
    </div> 
  </div> 
  <div .slide>
    <div .form-content>
      <input type="tel" id="phone">
      <input type="submit" id="contactMe">
    </div> 
  </div> 
 </div>
</form>
<div class="success-message">
  <div>
    <input type="text" name="share-link" id="share-link">
    <button onclick="myFunction()">Copy Url</button>

<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
<script>
....

【问题讨论】：

你的后端是什么？
您是否在控制台中遇到任何错误？您的结束脚本标签不正确。它必须是</script>。您拥有的是 2 个开始脚本标签，尽管这可能只是您的问题中的一个错字。
@zeterin 刚才忘记在上面的代码中添加了，在Webflow中就对了！
@ThalindaBandara 我真的不知道。
您的成功页面与使用此表单的页面不同吗？

标签： javascript jquery forms webflow

【解决方案1】：

在你的表单标签上

 <form id="onboarding-form">

还有你的js

    <script>
    document.getElementById('onboarding-form').onsubmit = function(event){
           event.preventDefault();
           slug = document.getElementById("name").value;
    
          slug = slug.replace(/\s/g, '');
          url = "https://babysittingmadeeasy.com/" + slug;
          document.getElementById("share-link").value =  url ;
     }
    <script>

【讨论】：

对不起，我不清楚。我希望它在我单击表单提交按钮而不是复制链接时出现。
我无法将“onsubmit”附加到表单，而无需手动编码
您是否有任何 id 或唯一的表单类名？
它的 id 是 onboarding-form
谢谢！我知道这一定很简单，但我一直把头撞在墙上试图弄清楚是什么。你是救命恩人！！！

【解决方案2】：

尝试在 HTML 之后移动 Javascript：

<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>

<script>
slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>

由于您当前编写的代码，您的 Javascript 将在元素 share-link 存在之前执行。

【讨论】：

我试过了。我将它放在页面末尾的

【解决方案3】：

这里有一些问题：

id="name" 的 html 标记在哪里。我还为您添加了 1 个具有此属性的输入标签。
只需替换定义的html标签下方的区域即可。或者将其放在函数上 - 确保脚本在元素创建后运行。

完成。有我的测试和结果：



<input type="text" id="name" class="hidden" value="demoname"/>
<input type="text" name="share-link" id="share-link">
<button onclick="myFunction()">Copy Link</button>


<script>
var slug = document.getElementById("name").value;
slug = slug.replace(/\s/g, '');
url = "https://babysittingmadeeasy.com/" + slug;
document.getElementById("share-link").value = url;
</script>

screenshot of result with this code

最好的问候，

【讨论】：

HTML 标签“name”在表单中。表单