如何将表单用户输入传递给在表单提交上运行的功能，并使用用户输入的名称创建cookie？

Question

下面的代码成功创建了带有字符串值“ XinputX”的cookie。 但是，我希望将其作为用户输入的价值。

我还需要单击相同的另一页，如果已经使用onSubmit设置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. 可以通过添加操作或在脚本中完成“转到其他地方”。
2. 如果您不想使用该操作，则需要取消提交

我用console.log替换了cookie代码，因为SO不允许设置cookie。 上传时只需删除//

我还命名了该字段并为其指定了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>