使用 Cookie 填充 Javascript 网络表单答案

【问题标题】：Using Cookies to Refill A Javascript Webform使用 Cookie 填充 Javascript 网络表单
【发布时间】：2020-11-30 22:30:48
【问题描述】：

我有一系列需要为 Web 应用程序开发的 Javascript 表单，但我正在使用 Simfatic 进行繁重的工作，而且我对这些技术知之甚少。我尝试使用 php 和 javascript 添加和调用 cookie 来重新填充这个小表单的电话号码部分，但我什至无法让它创建 cookie，更不用说回调它来填充该部分重新访问页面时重新输入。我希望 cookie 在系列中的所有表单中都保持不变，但现在我将满足于实际编写 cookie 开始。想知道是否有人可以指出我在哪里。谢谢，这是我的代码。

<html>
    <head>
        <title>
        FCT Trip Tracker
        </title>
<script type="text/javascript">
    var today = new Date();
    var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000);
    function setCookie(name, value)
    {
    document.cookie=name + "=" + escape(value) + "; path =/; expires=" + expiry.toGMTString();
    }
</script>
<script type="text/javascript>
        function writeCookie() {
            if( document.fct1b.phoneno.value == "" ){
                alert("Enter some value!");
                return;
            }
            cookievalue= escape(document.fct1b.phoneno.value) + ";";
            document.cookie="phoneno=" + cookievalue );
        }
</script>
<script type="text/javascript">
        if(phoneno = getCookie("phoneno")) document.fct1b.phoneno.value = phoneno;
</script>
    </head>
<body>
    <script src='http://location.jgi.local/1b/scripts/jquery-1.7.2.min.js' type='text/javascript'></script>
<script src='http://location.jgi.local/1b/scripts/jquery.sim.utils.js' type='text/javascript'></script>
<script src='http://location.jgi.local/1b/scripts/sfm_validatorv7.js' type='text/javascript'></script>
<link rel='stylesheet' type='text/css' href='http://location.jgi.local/1b/style/fct1b.css'>
<form id='fct1b' class='sfm_form' novalidate='novalidate' method='post' action='http://location.jgi.local/1b/fct1b.php' accept-charset='UTF-8'>
   <div id='fct1b_errorloc' class='error_strings' style='text-align:left'></div>
   <div id='fct1b_outer_div_p1' class='form_outer_div'>
      <div style='position:relative' id='fct1b_inner_div'>
         <input type='hidden' name='sfm_form_submitted' value='yes'>
         <div id='label1_container' class='sfm_form_label'>
            <label id='label1' for='phoneno'>Phone # :</label>
         </div>
         <div id='phoneno_container' class='sfm_element_container'>
            <input type='text' name='phoneno' id='phoneno' class='sfm_textbox_common sfm_textbox' size='20' value>
         </div>
         <div id='label_container' class='sfm_form_label'>
            <label id='label' for='trailerno'>Trailer # :</label>
         </div>
         <div id='trailerno_container' class='sfm_element_container'>
            <input type='text' name='trailerno' id='trailerno' class='sfm_textbox_common sfm_textbox' size='20' value>
         </div>
         <div id='Submit_container' class='loading_div sfm_element_container'>
            <input type='submit' name='Submit' value='Submit' id='Submit' onclick="writeCookie();"/>
         </div>
      </div>
   </div>
</form>
<script type='text/javascript'>
$(function()
{
   sfm_show_loading_on_formsubmit('fct1b','Submit');
});
</script>
<script type='text/javascript'>
var fct1bValidator = new Validator("fct1b");
fct1bValidator.addValidation("phoneno",{required:true,message:"Please fill in phoneno"} );
fct1bValidator.addValidation("trailerno",{required:true,message:"Please fill in trailerno"} );
</script>
    </body>
</html>

【问题讨论】：

标签： javascript html forms cookies

【解决方案1】：

首先，创建cookie时没有读取input的值，是因为JavaScript找不到表单元素。

有两种方法可以解决这个问题：

将以下属性添加到<form> 标签：name="fct1b"

如果您尝试访问的元素具有name 属性，则您只能使用document.fct1b.phoneno 访问元素。
如果元素没有name 属性，您可以使用getElementById 或querySelector 函数来检索DOM 元素。然后你必须这样写：document.getElementById('fct1b').phoneno.value

【讨论】：