如何根据用户的表单输入创建自定义网址以供用户共享？

2024-06-02 • 问答

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

我有一张表格，要求输入用户名，电子邮件，电话以及需要多少个婴儿的孩子。一旦他们提交了表单，我希望成功页面显示一个自定义URL：domain.com/firstLast，然后从理论上讲，他们可以与其他人共享链接，以获得可能的折扣。

我可以使用复制功能，但是似乎无法显示该URL。请帮忙！

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

在表单标签上

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

尝试在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存在之前执行。

这里有一些问题：

哪里是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

最好的问候

如何根据用户的表单输入创建自定义网址以供用户共享？

iCMS 回答：如何根据用户的表单输入创建自定义网址以供用户共享？

大家都在问