javascript - 使用 Cookie 填充 Javascript 网络表单
问题描述
我有一系列需要为 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>
解决方案
首先,创建cookie时没有读取输入值的原因是JavaScript找不到表单元素。
有两种方法可以解决这个问题:
将以下属性添加到
<form>
标签:name="fct1b"
document.fct1b.phoneno
只有当您尝试访问的元素具有name
属性时,您才能访问元素。如果元素没有
name
属性,您可以使用getElementById
或querySelector
函数来检索 DOM 元素。然后你必须这样写:document.getElementById('fct1b').phoneno.value
推荐阅读
- api - 使用 Axios 请求发布 API 错误代码 400
- python - Python - 多次更新 Jinja2 模板然后渲染它
- java - 如何获得 Firebase 令牌?
- sql - SQL Server 中的透视 varchar 列?
- xtext - 如何禁用打开和关闭大括号内容辅助
- javascript - 如何卸载反应组件内部使用的webcomponent?
- nginx - 如何在web服务之前检查入口数据而不慢?
- sonarqube - SonarQube 限制执行的堆大小
- javascript - 如何仅调用最近命中的 api 并在 react-native 中中止先前调用的 api 的会话?
- reactjs - react context vs redux vs hooks,应该考虑哪一个以及每个的不同之处