How to pass form user input through to the function which runs on form submit and create a cookie with the name of the users input?

Question

The code below successfully creates the cookie with the string value 'XinputX'. However I am looking for it to be the value of the users input.

I also need to go to another page with the same click, where would I put that action if the onSubmit is already being used to set the cookie?

 function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); } 

 <div class="container-fluid"> <div class="row"> <div class="d-flex mx-auto mt-5 mb-5"> Hello and welcome to the quiz. </div> </div> <div class="row"> <div class="d-flex mx-auto mb-5"> <form onsubmit="createCookie('first_cookie','XinputX',7)"> Enter name: <input type="text"> <input type="submit"> </form> </div> </div> <div class="row"> <div class="col-12 col-sm-6 mx-auto"> <button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Lets go!</button> </div> </div> </div> 

Answer 1

1. "go somewhere else" can be done by adding an action or in script.
2. You need to cancel the submit if you do not want to use the action

I have replaced the cookie code with console.log because SO does not allow to set cookies. Just remove the // when you upload

I have also named the field and given the form an ID

 function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; // document.cookie = name + "=" + value + expires + "; path=/"; console.log("cookie",name + "=" + value + expires + "; path=/") } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); } window.addEventListener("load", function() { document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // stop submission, remove this if you add an action to the form createCookie('first_cookie', this.textField.value,7); // if you do not want to use the action attribute of the form you can do this: // window.location="somewhereelse.html"; }); }); 

 <div class="container-fluid"> <div class="row"> <div class="d-flex mx-auto mt-5 mb-5"> Hello and welcome to the quiz. </div> </div> <div class="row"> <div class="d-flex mx-auto mb-5"> <form id="myForm"> Enter name: <input name="textField" type="text"> <input type="submit"> </form> </div> </div> <div class="row"> <div class="col-12 col-sm-6 mx-auto"> <button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Lets go!</button> </div> </div> </div>