HTML5 本地存储和 jQuery 来持久化表单数据代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML5 本地存储和 jQuery 来持久化表单数据

作者:沉淀岁月 / 发布于2013/9/10/ 1021


	<!DOCTYPE html>
	
	<html lang="en">
	 <head>
	 <meta charset="utf-8">
	
	 <title>HTML5 Local Storage Example</title>
	
	 <!-- include Bootstrap CSS for layout -->
	 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
	 </head>
	
	 <body>
	 <div class="container">
	 <h1>HTML5 Local Storage Example</h1>
	
	 <form method="post" class="form-horizontal">
	 <fieldset>
	 <legend>Enquiry Form</legend>
	
	 <div class="control-group">
	 <label class="control-label" for="type">Type of enquiry</label>
	 <div class="controls">
	 <select name="type" id="type">
	 <option value="">Please select</option>
	 <option value="general">General</option>
	 <option value="sales">Sales</option>
	 <option value="support">Support</option>
	 </select>
	 </div>
	 </div>
	
	 <div class="control-group">
	 <label class="control-label" for="name">Name</label>
	 <div class="controls">
	 <input class="input-xlarge" type="text" name="name" id="name" value="" maxlength="50">
	 </div>
	 </div>
	
	 <div class="control-group">
	 <label class="control-label" for="email">Email Address</label>
	 <div class="controls">
	 <input class="input-xlarge" type="text" name="email" id="email" value="" maxlength="150">
	 </div>
	 </div>
	
	 <div class="control-group">
	 <label class="control-label" for="message">Message</label>
	 <div class="controls">
	 <textarea class="input-xlarge" name="message" id="message"></textarea>
	 </div>
	 </div>
	
	 <div class="control-group">
	 <div class="controls">
	 <label class="checkbox">
	 <input name="subscribe" id="subscribe" type="checkbox">
	 Subscribe to our newsletter
	 </label>
	 </div>
	 </div>
	 </fieldset>
	
	 <div class="form-actions">
	 <input type="submit" name="submit" id="submit" value="Send" class="btn btn-primary">
	 </div>
	 </form>
	 </div>
	
	 <!-- include jQuery library -->
	 <script src="//code.jquery.com/jquery-latest.js"></script>
	 <script>
	 $(document).ready(function () {
	 /*
	* check browser supports local storage
	*/
	 if (localStorage) {
	 /*
	* if form field values exist in local storage use
	* them to populate the form when the page loads
	*/
	 if (localStorage.type) {
	 $("#type").find("option[value=" + localStorage.type + "]").attr("selected", true);
	 }
	 if (localStorage.name) {
	 $("#name").val(localStorage.name);
	 }
	 if (localStorage.email) {
	 $("#email").val(localStorage.email);
	 }
	 if (localStorage.message) {
	 $("#message").val(localStorage.message);
	 }
	 if (localStorage.subscribe === "checked") {
	 $("#subscribe").attr("checked", "checked");
	 }
	
	 /*
	* when a form field changes store it's value in local storage
	*/
	 $("input[type=text],select,textarea").change(function(){
	 $this = $(this);
	 localStorage[$this.attr("name")] = $this.val();
	 });
	 $("input[type=checkbox]").change(function(){
	 $this = $(this);
	 localStorage[$this.attr("name")] = $this.attr("checked");
	 });
	
	 $("form")
	 /*
	* clear local storage when the form is submitted
	*/
	 .submit(function(){
	 localStorage.clear();
	 })
	 /*
	* output local storage to the console each time the form changes
	* (you may want to remove this code on the production server)
	*/
	 .change(function(){
	 console.log(localStorage);
	 });
	 }
	 });
	 </script>
	 </body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　持久化表单　

同语言下

可能有用的

沉淀岁月贡献的其它代码(39)