document.cookie() function is not working in Javascript

Question

I am trying to set cookie in JavaScript when the user inputs in the textbox but it seems like its not working somehow. When I try to alert or console.log. I get "" value. Kindly help me with this.

HTML code:

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>

JS code:

function storeInHidden1(){
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   var queryStringDetails = urlParams.get("userName");
   document.cookie = "name=" + queryStringDetails;
   alert(document.cookie);
}

Any chance the given cookie is set to `HttpOnly` ? it will make it inaccessible to `document.cookie API` — Orel Eraki, Sep 24 '20 at 16:38
Does this answer your question? [Set cookie and get cookie with JavaScript](https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript) — I wrestled a bear once., Sep 24 '20 at 16:39
Thanks @OrelEraki for the response. I am working on the local host. — Zuffido, Sep 24 '20 at 16:43
@Iwrestledabearonce. No this doesnt seem to work. Thanks for the response. — Zuffido, Sep 24 '20 at 16:44
Have you checked whether your localhost setup is set to allow cookies? [httpCookies setting in the web.config maybe?] — A Haworth, Sep 24 '20 at 16:59
"document.cookie() function is not working in Javascript" - 1: `document.cookie` is not meant to be used as a function. 2: I don't see you calling `document.cookie()` anywhere in your code. — shreyasm-dev, Sep 24 '20 at 17:50

score 0 · Accepted Answer · edited Sep 26 '20 at 13:27

The problem

Setting a cookie like

document.cookie = "name=" + variable

is according to w3schools a valid way of doing it. However the problem is that you are trying to acces url parameters that don't exist, which is the reason why your cookies are empty. Suppose on example.com/index.html you have the following form:

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>

onsubmit the code runs the function storeInHidden1() which tries to get the window.location.search which is still empty because nothing in your code sets the window.location.search on example.com/index.html.

Next according to action="confirm.html" in the form, all of the data is send with a GET request to (for example) example.com/confirm.html. This url has now the parameters of ?userName=JohnDoe. If you were now to run storeInHidden1 on this page you would in fact get some content in your cookie.

The solution

In order to save the username in a cookie on index.html you would only have to change the code in storeInHidden1. Instead of getting the username out of the url you would then get it directly from the form with document.getElementsByName("userName")[0].value. The full code can be found below:

function storeInHidden1() {
  var user = document.getElementsByName("userName")[0].value;
  document.cookie = "name=" + user;
  alert(document.cookie);
}

<form action="confirm.html" id="interestForm" onsubmit="storeInHidden1()">
  <input type="text" name="userName">
  <input type="submit" value="Register">
</form>

document.cookie() function is not working in Javascript

1 Answers1

The problem

The solution