Javascript用从URL参数中提取的数据填充表单字段



我试图使用javascript从URL参数'utm_source'提取数据,并将其添加到表单上的字段,以便将其存储在我的联系人数据库中用于跟踪目的。

我以前在另一个网站上完成了这个,但是当我试图重用代码时,它不适合我。

页面在这里(包含要提取的URL参数):

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

描述期望的结果,如果为'traffic_source'字段在我的表单上填充的值从'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>

fieldToChange是一个NodeList,所以如果你想改变value属性,你需要指定索引号

这应该会修复你的代码

fieldToChange[0].value = source;

您可以使用new URLSearchParams(window.location.search)获取所有查询参数,并使用searchParams.get('utm_source')获取特定查询参数,然后使用document.getElementById("utmsource").value = param;utm_source的值存储在表单字段中。

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

最新更新