无法使用 Javascript 或 jQuery 将 Cookie 传递到隐藏表单字段

Question

I have some Javascript or jQuery that I am using to pass information stored in a cookie into a hidden form field on my website.

However, whenever I run a test, the code doesn't work - nothing gets pulled into my hidden field.

Here is the code I am using (I have tried both javascript and jQuery - I'll show the code I've used for both):

document.querySelector("input[name='field:7961189']").value = "{{cookie - gclid}}";

$('input[name="field:7961189"]').val('{{cookie - gclid}}').change();

I've tried testing this out on my visible form fields by replacing the "name" with the one of my visible fields, like so,

document.querySelector("input[name='email']").value = "{{cookie - gclid}}";

$('input[name="phone"]').val('{{cookie - gclid}}').change();

and it works - the fields are populated with data from my cookie. But when I try the code at the top of the page, it doesn't work. I am stumped. Any help or pointers in the right direction would be much appreciated.

Here is the HTML around it.

<div class="custom-form" data-form-id="1449777"> 
<h2 class="babel-ignore">UTM Fields</h2> 
<p class="babel-ignore form-description">Disruptive Analytics UTM Fields</p> 
<div class="form-group" data-field-id="7961189"> 
<label for="field:7961189" class="control-label babel-ignore">gclid </label> 
<input type="text" class="text form-control" name="field:7961189" value="">

Answer 1

Try this:

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

then

document.querySelector("input[name='field:7961189']").value = getCookie("gclid") // or wathever cookie is named

source: https://www.w3schools.com/js/js_cookies.asp