将表单字段类型值设置为 Javascript 变量，然后在另一个变量中使用该值

Question

我是 javascript 菜鸟。我正在为访问者创建一个表格来注册网络研讨会。我需要为提交表单的每个访问者创建一个“唯一代码”或唯一标识符。为此，我创建了一个名为“唯一代码”的隐藏字段。这个唯一代码是从一个变量生成的，该变量连接一个字符串、在表单中键入的电子邮件地址值和我从另一个变量分配的网络研讨会 ID。当我提交表单时，我只得到字符串和网络研讨会 ID，而不是电子邮件地址。所需的结果值类似于：GTW-visitor@emailaddress.com-12345。这是我的代码：

  <form action="/destination/" method="post" name="GTW_Test_Form">
    <input type="hidden" name="gtwWebinarId" id="gtwWebinarId" value="">
    <input type="hidden" name="uniqueCode" id="uniqueCode" value="">
    <label for="email"><b>Email</b></label><br>
    <input type="text" placeholder="Enter Email" name="emailAddress" id="emailAddress"  required><br>
    <label for="name"><b>First Name</b></label><br>
    <input type="text" placeholder="Your First Name" name="firstName" id="firstName" required><br>
    <label for="name"><b>Last Name</b></label><br>
    <input type="text" placeholder="Your Last Name" name="lastName" id="lastName" required><br><br>
    <input type="submit" value="Register to webinar">
  </form>

然后，javascript:

<SCRIPT LANGUAGE="JavaScript">
  var emailAddressInput = document.getElementById("emailAddress").value;
  var webinarId = "12345678";
  var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
  document.querySelector("#gtwWebinarId").value = webinarId;
  document.querySelector("#uniqueCode").value = uniqueCode;
</script>

提前致谢，丹尼尔

Answer 1

尝试使用var emailAddressInput = document.querySelector("#emailAddress").value;

Answer 2

您的脚本甚至在表单字段具有任何值之前运行，您可能必须将脚本代码编写在一个函数中，该函数将由表单的“onsubmit”事件调用。

<form onsubmit="foo(event)">

<script LANGUAGE="JavaScript">
    const foo = (event)=>{
        event.preventDefault();
        var emailAddressInput = document.getElementById("emailAddress").value;
        var webinarId = "12345678";
        var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
        document.querySelector("#gtwWebinarId").value = webinarId;
        document.querySelector("#uniqueCode").value = uniqueCode;
    }
</script>

Answer 3

确实有效！谢谢你，赛！

将表单字段类型值设置为 Javascript 变量，然后在另一个变量中使用该值

Set form field typed value to Javascript Variable and then using this value in another variable

javascript

forms

variables

dom

element