1

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

我有一个表格，要求提供用户姓名、电子邮件、电话以及他们需要多少孩子的保姆。一旦他们提交了表单，我希望成功页面显示一个自定义 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>
....

在此处输入图像描述

4

3 回答 3

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>
于 2020-07-22T05:02:33.543 回答
0

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

于 2020-07-22T02:11:31.850 回答
0

这里有一些问题：

  1. id="name" 的 html 标签在哪里。我还为您添加了 1 个具有此属性的输入标签。
  2. 只需替换定义的 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>

使用此代码的结果屏幕截图

此致，

于 2020-07-22T02:46:39.783 回答