Question

我目前正在为客户创建一个注册表单，其中一个要求是表单能够离线传输和存储数据。我已经尝试过使用数据库了，但是我还在学习php的初级阶段，所以当我落后时我决定退出。

我找到了另一种使用JS在本地存储本地存储的storign数据的方法，但是我无法在动态表中显示存储的数据。

对此事的任何帮助都会非常感激，这是我到目前为止的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CIVIC Registration Form</title>
  <link rel="icon" href="civic.ico" type="image/x-icon">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">
  <link rel="stylesheet" href="css/styles.css">
  <style>
  	p.finePrint {
  		color:#818185;
  		font-size:70%;
  	}
  </style>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
  <script type="text/javascript">
  	(function()
  	{
  		var Applicant = {
  			fname: "",
  			lname: "",
  			age: 0,
  			phonenum: "",
  			email: ""
  		};
  		
  		var storageLogic = {
  			saveItem: function (){
  				var lscount = localStorage.length;
  				var inputs = document.getElementsByClassName("form-control");
  				Applicant.fname = inputs[0].value;
  				Applicant.lname = inputs[1].value;
  				Applicant.age = inputs[2].value;
  				Applicant.phonenum = inputs[3].value;
  				Applicant.email = inputs[4].value;
  				
  				localStorage.setItem("Applicant_" + lscount, JSON.stringify(Applicant));
  				location.reload();
  				
  			},
  			
  			loaddata: function() {
  				var datacount = localStorage.length;
  				if (datacount > 0)
  				{
  					var render = "<table border='1'>";
  					render += "<tr><th>First Name</th><th>Last Name</th><th>Age</th>" + 
  					"<th>Phone Number</th><th>Email</th>";
  					for (i=0; i < datacount; i++) {
  						var key = localStorage.key(i);
  						var applicant = localStorage.getItem(key);
  						var data = JSON.parse(applicant);
  						
  						render += "<tr><td>" + data.fname + "</td><td>" + data.lname + "</td>";
  						render += "<td>" + data.age + "</td>";
  						render += "<td>" + data.phonenum + "</td>";
  						render += "<td>" + data.email + "</td>";
  					}
  					render += "</table>";
  					var newTable = document.getElementById("dvContainer");
  					newTable.innerHTML = render;
  				}
  			}
  		};
		var btnsubmit = document.getElementById('btnsubmit');
		btnsubmit.addEventListener('click', storageLogic.saveItem(), false);
		window.onload = function() {
			storageLogic.loaddata();
		};
  	})();
  </script>
</head>
<body>

	<div class="container">
	  <h2 style="color:#005E28"><img src="civic.jpg" height="50" width="50"></img>CIVIC Registration Form</h2>
	  <form role="form">
		<div class="form-group">
			<label for="fname">First Name:</label>
			<input type="text" class="form-control" id="fname" placeholder="First Name">
		</div>
		<div class="form-group">
			<label for="lname">Last Name:</label>
			<input type="text" class="form-control" id="lname" placeholder="Last Name">
		</div>
		<div class="form-inline">
			<label for="age">Age: <input type="text" class="form-control" id="age" placeholder="Age"></label>
			<label for="phone">Phone Number: <input type="text" class="form-control" id="phonenum" placeholder="Phone Number"></label>
		</div>
		<div class="form-group">
		  <label for="email">Email:</label>
		  <input type="email" class="form-control" id="email" placeholder="Enter email">
		</div>
		<div>
		<!-- <button type="submit" class="btn btn-default">Submit</button> -->
			<input id="btnsubmit" type="button" value="Submit" class="btn btn-success"/>
			<p class="finePrint">*By submitting this form you agree to receiving emails regarding 
			upcoming events and other information from CIVIC Ontario. 
			If you have any questions or concerns, please email civicontario@gmail.com*</p>
		</div>
	  </form>
	</div>
	<div id="dvContainer" class="conatiner">
	</div>

</body>
</html>

Answer 1

您需要修复的主要有两个错误：

将身份getElementById()的{{1}}和addEventListener()移至btnsubmit处理程序。它现在的样子，它试图在它实际上在DOM之前找到它。
您不小心调用了onload的第二个参数处理程序。换句话说，在第二个参数之后摆脱addEventListener()。

以下是您的代码版本，其中包含的这些更改似乎最低限度。

()

使用localstorage保存表单数据并将数据动态读取到表中

1 个答案: