1

I have the below script which takes UTM parameter values from the URL querystring i.e. 'example.com?utm_campaign=testCampaign&utm_source=testSource' and is supposed to populate hidden form fields. However the script doesn't seem to work as the input field values are empty?

locationSearch='example.com?utm_campaign=testCampaign&utm_source=testSource';
function getUtmParams(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(locationSearch);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var utmArray = ['utm_campaign','utm_medium','utm_source','utm_content','utm_term'];

for (var i = 0; i < utmArray.length; i++) {
  console.log("a " + utmArray[i] + " = " + getUtmParams(utmArray[i]));
  if(getUtmParams(utmArray[i])){
document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]);
  }
}
<div class="utm_campaign">
<input type="hidden" name="2302121" id="e2922" value="">
</div>

<div class="utm_source">
<input type="hidden" name="2388234" id="d4033" value="">
</div>

The folowing line seems to not populate the input fields as the values remain empty?

document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]);

JMP
  • 4,417
  • 17
  • 30
  • 41
FullStack
  • 11
  • 2

1 Answers1

1

Your input fields are still hidden. To see them, you need to change the type attribute.

locationSearch='example.com?utm_campaign=testCampaign&utm_source=testSource';

function getUtmParams(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(locationSearch);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var utmArray = ['utm_campaign','utm_medium','utm_source','utm_content','utm_term'];

for (var i = 0; i < utmArray.length; i++) {
  console.log("a " + utmArray[i] + " = " + getUtmParams(utmArray[i]));
  if(getUtmParams(utmArray[i])){
document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]);
document.querySelector("div." + utmArray[i] + " input[type=hidden]").type = 'text';
  }
}
<div class="utm_campaign">
<input type="hidden" name="2302121" id="e2922" value="">
</div>

<div class="utm_source">
<input type="hidden" name="2388234" id="d4033" value="">
</div>
JMP
  • 4,417
  • 17
  • 30
  • 41
  • When I inspect the hidden field values in console/dom they are still empty? – FullStack May 21 '23 at 10:11
  • @FullStack; if you add `alert(e2922.value);` at the end of the JavaScript, it shows `testCampaign`, so its not empty. – JMP May 21 '23 at 10:18
  • The fields ids and names are dynamiclly generated each time the form is loaded. It is a Pardot form. – FullStack May 21 '23 at 10:34
  • If I set a manual value i.e.document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = "test"; it works and value is passed to field. However document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]); does not work and field value is empty. – FullStack May 21 '23 at 10:49
  • @FullStack; have you checked that `location.search` is valid? – JMP May 21 '23 at 10:55
  • Yes it is valid. – FullStack May 21 '23 at 11:00
  • @FullStack; so `results` from `getUtmParams` isn't `null`? – JMP May 21 '23 at 11:01
  • No as console.log(getUtmParams(utmArray[i])) works. Just for some reason document.querySelector("div." + utmArray[i] + " input[type=hidden]").value = getUtmParams(utmArray[i]); is always has an empty value – FullStack May 21 '23 at 11:28