JS 在表单提交时保存 cookie

Question

我正在尝试创建一个简单的弹出表单（我将把下面的代码放入 bootstrap 模态）并要求用户 select 从下拉列表中获取他们的位置向下列表。

我想我几乎已经掌握了这段代码，但是当我单击提交时，cookie 值始终存储为“未定义”。

<html>
<head>
    <script>
function setCookie(cookieName, cookieValue, nDays) {
    var today = new Date();
    var expire = new Date();

    if (!nDays) 
        nDays=1;

    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}

  </script>
</head>
<body>
    <form onsubmit="setCookie('location', this.value, 365);">
    <select>
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
    </select>
    <input type="submit" value="Submit">
</form>
</body>   
</html>

关于如何让它从下拉列表中存储 cookie 值的任何建议？

Answer 1

正如 David 在他的评论中所说，表单没有 return select 的值，因此您也可以这样做：

function setCookie(cookieName, cookieValue, nDays) {
    
    var today = new Date();
    var expire = new Date();

    if (!nDays) 
        nDays=1;
  console.log('cookieName: ' + cookieName)
  console.log('coockieValue: ' + cookieValue)
  console.log('nDays: ' + nDays)
    expire.setTime(today.getTime() + 3600000*24*nDays);
    // document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
    return false
}

<form onsubmit="javascript:return setCookie('location', this.querySelector('select').value, 365);">
    <select>
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
    </select>
    <input type="submit" value="Submit">
</form>

注意：我在函数里放了一个return，这样我们就可以看到函数参数return里面写的是什么

JS 在表单提交时保存 cookie

JS Save cookie on form submit

html

javascript

forms

cookies

dropdown