JavaScript以从URL参数中提取数据填充表单字段

发布于 2025-02-04 15:16:22 字数 1208 浏览 3 评论 0原文

我正在尝试使用JavaScript从URL参数“ UTM_SOURCE”提取数据，并将其添加到表单上的字段中，以便将其存储在我的联系数据库中以进行跟踪。

我以前曾在另一个网站上完成此操作，但是当试图重复使用代码时，它对我不起作用。

该页面在此处（随附要提取的URL参数）：

https://members.travisraab.com/country-guitar-clinic-clinic-optin-1-1?utm_source=youtube&amm_medium =

description在我的表单上，在这种情况下，从“ utm_source” URL参数（在这种情况下为'YouTube'）填充了值。

这是我使用的代码：

<script type="text/javascript">
function addSource() {
  var fieldToChange = document.getElementsByName("form_submission[custom_4]");
  var source = trafficSource();
  fieldToChange.value = source;
  }

  var trafficSource = function() {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == "utm_source"){
          return pair[1];
      } else if (pair[0] == "gclid") {
          return 'google';
      }
    }
    return 'unknown';
  }


document.onload = addSource();
</script>

原文

I am trying to use javascript to extract data from the URL parameter 'utm_source' and add it to a field on a form so that it is stored in my contact database for tracking purposes.

I had previously accomplished this on another site, but when trying to reuse the code it is not working for me.

The page is here (with the included URL parameter to be extracted):

https://members.travisraab.com/country-guitar-clinic-optin-1-1?utm_source=youtube&utm_medium=description

The desired result if for the 'traffic_source' field on my form to be populated with the value from the 'utm_source' URL parameter, in this case 'youtube'.

Here is the code I am using:

<script type="text/javascript">
function addSource() {
  var fieldToChange = document.getElementsByName("form_submission[custom_4]");
  var source = trafficSource();
  fieldToChange.value = source;
  }

  var trafficSource = function() {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == "utm_source"){
          return pair[1];
      } else if (pair[0] == "gclid") {
          return 'google';
      }
    }
    return 'unknown';
  }


document.onload = addSource();
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琴流音 2025-02-11 15:16:23

您可以使用new UrlsearchParams（window.location.search）进行所有查询参数，并使用searchparams.get（'utm_source'）获取特定的查询参数，然后存储utm_source在表单字段中使用docuct.getElementById（“ utmsource”）。值= param;。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="utmsource" />
    <script>
        let searchParams = new URLSearchParams(window.location.search)
        let param = searchParams.get('utm_source')
        document.getElementById("utmsource").value = param;
    </script>
</body>

</html>

You can take all the query params using new URLSearchParams(window.location.search) and get the particular query param using searchParams.get('utm_source') and then, store the value of utm_source in form field using document.getElementById("utmsource").value = param;.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="utmsource" />
    <script>
        let searchParams = new URLSearchParams(window.location.search)
        let param = searchParams.get('utm_source')
        document.getElementById("utmsource").value = param;
    </script>
</body>

</html>

回复收藏 0 原文