Question

将表单字段值附加到下一个网址。

我正在尝试将表单提交上的表单字段值传递给下一页网址。

到目前为止; 表单摘要

    <label for="first_name">First Name</label> 
<input id="first_name" name="first_name" onchange="update()" type="text">

在创建下一页的网址的脚本部分;

  <script>
      var fn = document.getElementById('first_name').value;

      function update() {
        fn = document.getElementById('first_name').value;
      }
      document.getElementById('thankPage').value = 'https://example.com/thank' + fn;
    </script>

fn目前没有传递给下一个网址。但是，如果我预先填充first_name字段，则正确传递fn。所以我假设使用的fn值没有更新，它使用其初始值。

我尝试在update（）之外初始化fb，因此它是一个全局变量。除非我弄错了？我假设当'+ fn'出现时，它使用fn的更新值，目前情况并非如此。

Answer 1

据我所知，您只需更新一次thankPage的值。在document.getElementById('thankPage').value = 'https://example.com/thank' + fn;内移动update(..)。而且，对我来说你不需要变量fn

function update() {
  document.getElementById('thankPage').value = document.getElementById('first_name').value;
}

Answer 2

您将thankPage的值设置在update函数范围之外，这意味着该值只会设置一次（最有可能在加载页面时）。这就是为什么它仅在预填充first_name字段时才有效。

如果您希望更新first_name字段时更改值，则必须在update函数的范围内移动代码。

e.g。

function update() {
    var fn = document.getElementById('first_name').value;
    document.getElementById('thankPage').value = 'https://example.com/thank' + fn;
}

update();

function update() {
  var fn = document.getElementById('first_name').value;
  document.getElementById('thankPage').value = 'https://example.com/thank/' + fn;
}

update();

<label for="first_name">First Name</label>
<input id="first_name" name="first_name" onchange="update()" type="text" value="name">
<br><br>
<input id="thankPage" style="width:300px;" type="text">

Answer 3

更新update（）函数中thankPage的值。完成更改输入字段中的值后，它将更新值。如果您想在键入时更新它，请使用onkeydown代替onchange。

function update() {
  var fn = document.getElementById('first_name').value;
  document.getElementById('thankPage').innerHTML = 'https://example.com/thank/' + fn;
}

<label for="first_name">First Name</label> 
<input id="first_name" name="first_name" onchange="update()" type="text">
</br>
<span id="thankPage"></span>

在javascript

3 个答案: