Phonegap保存HTML表單數據的txt文件
[英]Phonegap save txt file of HTML form data
問題描述
我需要使用Phonegap創建一個iOS應用程序以保存HTML表單。 但是，我對iOS或Phonegap不太熟悉。 誰能指出我正確的方向？
這是我的HTML：
<!DOCTYPE html>
<html class="ipad" lang="en">
<head>
<meta charset="utf-8">
<title>Hall Render - Resources Sign Up</title>
<!-- Mobile Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Main Stylesheet -->
<link href="assets/css/screen.css" media="all" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="assets/js/jquery-1.11.3-min.js"></script>
<!-- jQuery Plugins -->
<script src="assets/js/jquery-validation-1.14.0-min.js"></script>
<!-- Phonegap JS -->
<script src="assets/js/phonegap.js"></script>
<script src="assets/js/cordova.js"></script>
<!-- Functions -->
<script src="assets/js/functions.js"></script>
</head>
<body onload="onDeviceReady()">
<!-- Begin Header -->
<header>
<div class="wrap">
<img src="assets/img/hall_render-logo.png" height="50" width="132">
<h1><strong>Health Law</strong> is our business.</h1>
</div>
</header>
<!-- End Header -->
<!-- Begin Secondary Header -->
<section id="secondary-header">
<div class="wrap">
<div class="inner-wrap">
<h2><strong>Hall Render Alerts Provide</strong> up-to-date information</h2>
<p>on topics ranging from general health law to health care reform, HIPAA,<br>
employment law, health information technology and health care tax news.</p>
</div>
</div>
</section>
<!-- End Secondary Header -->
<!-- Begin Main -->
<section id="main">
<div class="wrap">
<div class="inner-wrap">
<div class="text">
<h3>Sign Up to Receive Hall Render Resources</h3>
<p>
We appreciate your interest in our firm. As the nation’s largest law firm focused exclusively on matters specific to health care, our knowledge and experience allow us the opportunity to share the latest and most relevant health care news and practical takeaways directly with you. In an evolving industry such as health care, it’s crucial to stay up to date and informed. These email alerts are designed to help you do just that.
</p>
</div>
<form id="signup-form" method="get" action="">
<fieldset>
<div class="label-input-wrap">
<label for="cfirst-name">First Name: (required)</label>
<input type="text" id="cfirst-name" name="firstname" tabindex="1">
</div>
<div class="label-input-wrap">
<label for="clast-name">Last Name: (required)</label>
<input type="text" id="clast-name" name="lastname" tabindex="2">
</div>
<div class="label-input-wrap">
<label for="corganization">Organization:</label>
<input type="text" id="corganization" name="organization" tabindex="3">
</div>
<div class="label-input-wrap">
<label for="ctitle">Title:</label>
<input type="text" id="ctitle" name="title" tabindex="4">
</div>
<div class="label-input-wrap">
<label for="cemail">Email: (required)</label>
<input type="email" id="cemail" name="email" tabindex="5">
</div>
<input id="form-submit" type="submit" value="Sign Up" tabindex="6">
</fieldset>
</form>
</div>
</div>
</section>
<!-- End Main -->
<!-- Begin Secondary -->
<section id="secondary">
<div class="wrap">
<div class="inner-wrap">
<div class="text">
<h3>Thank You</h3>
<p>
Thank you for signing up to receive Hall Render resources.<br>
You will be receiving an email from us soon with the latest health law news.
</p>
</div>
</div>
</div>
</section>
<!-- End Secondary -->
<!-- Begin Footer -->
<footer>
<div id="red-tab"></div>
<div class="clear"></div>
<div id="red-banner"></div>
<div id="footer-hold">
<div class="wrap">
<p>
DENVER <span>|</span> DETROIT <span>|</span> INDIANAPOLIS <span>|</span> LOUISVILLE <span>|</span> MILWAUKEE <span>|</span> PHILADELPHIA <span>|</span> WASHINGTON, D.C.
</p>
</div>
</div>
</footer>
<!-- End Footer -->
</body>
</html>
這是我的functions.js文件：
(function($){
/* On Page Ready */
$(document).ready(function(){});
/* On Page Load */
$(window).load(function(){
// Size differences
var mainH = $('#main').outerHeight();
var sheaH = $('#secondary-header').outerHeight();
$('#secondary').height(mainH + sheaH - 40).hide();
// Form Validation and Sumbit
var form = $('#signup-form');
form.validate({
debug: true,
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true
}
},
messages: {
firstname: {
required: "Please enter your first name."
},
lastname: {
required: "Please enter your last name."
},
email: {
required: "Please enter your email."
}
},
submitHandler: function(form){
form.submit();
$('#main, #secondary-header').fadeOut(400);
$('#secondary').fadeIn(500);
setTimeout(function(){
window.location.reload(1);
}, 8000);
}
});
});
/* On Window Resize */
$(window).resize(function(){});
})(window.jQuery);
我使用的是jQuery表單驗證，驗證后它會隱藏表單並顯示“謝謝”，然后重新加載頁面。 現在，如何獲取表單數據以保存到iOS文件系統？ 該應用需要離線使用並保存信息，這就是為什么我需要將信息存儲在iOS中的原因。
2 個解決方案
解決方案1
2 已采納 2015-08-05 20:44:11
因此，我意識到我將要進行所有這些操作。 我需要將表單數據發布到數據庫。 該數據庫用於收集所有提交的表單數據。 我認為，每次提交表單數據時，.txt文件的想法都會被覆蓋。 因此，我創建了兩個頁面。 一頁填寫並提交表格。 一頁可查看所有表單條目以及導出和清除數據庫。
index.html
<head>
<meta charset="utf-8">
<title>Hall Render - Resources Sign Up</title>
<!-- Mobile Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Main Stylesheet -->
<link href="assets/css/screen.css" media="all" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="assets/js/jquery-1.11.3-min.js"></script>
<script src="assets/js/jquery.mobile-1.4.5.min.js"></script>
<!-- jQuery Plugins -->
<script src="assets/js/jquery-validation-1.14.0-min.js"></script>
<!-- Cordova JS -->
<script src="cordova.js"></script>
<!-- Functions -->
<script src="assets/js/functions.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
var db = window.openDatabase("HALLRENDER", 1.0, "App database",200000);
// Size differences
var mainH = $('#main').outerHeight();
var sheaH = $('#secondary-header').outerHeight();
$('#secondary').height(mainH + sheaH - 40).hide();
// Form Validation and Sumbit
var form = $('#signup-form');
form.validate({
debug: true,
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true
}
},
messages: {
firstname: {
required: "Please enter your first name."
},
lastname: {
required: "Please enter your last name."
},
email: {
required: "Please enter your email."
}
},
submitHandler: function(form){
$('#main, #secondary-header').fadeOut(400);
$('#secondary').fadeIn(500);
db.transaction(populateDB, errorCB, successCB);
}
});
}
// Populate the database
function populateDB(tx) {
// Form Variables
var firstName = $('#cfirst-name').val();
var lastName = $('#clast-name').val();
var organization = $('#corganization').val();
var title = $('#ctitle').val();
var email = $('#cemail').val();
tx.executeSql('CREATE TABLE IF NOT EXISTS PEOPLE (Email, FirstName, LastName, Title, Organization)');
tx.executeSql('INSERT INTO PEOPLE (Email, FirstName, LastName, Title, Organization) VALUES ("'+email+'", "'+firstName+'", "'+lastName+'", "'+title+'", "'+organization+'")');
setTimeout(function(){
window.location.reload(1);
}, 8000);
}
// Transaction error callback
function errorCB(tx, err) {
alert("Error processing SQL: "+err);
}
// Transaction success callback
function successCB() {
console.log("Entry saved!");
}
</script>
</head>
<body onload="onDeviceReady()">
<!-- Begin Header -->
<header>
<div class="wrap">
<!-- SOMETHING -->
</div>
</header>
<!-- End Header -->
<!-- Begin Secondary Header -->
<section id="secondary-header">
<div class="wrap">
<div class="inner-wrap">
<!-- SOMETHING -->
</div>
</div>
</section>
<!-- End Secondary Header -->
<!-- Begin Main -->
<section id="main">
<div class="wrap">
<div class="inner-wrap">
<div class="text">
<!-- SOMETHING -->
</div>
<form id="signup-form">
<fieldset>
<div class="label-input-wrap">
<label for="cfirst-name">First Name: (required)</label>
<input type="text" id="cfirst-name" name="firstname" tabindex="1">
</div>
<div class="label-input-wrap">
<label for="clast-name">Last Name: (required)</label>
<input type="text" id="clast-name" name="lastname" tabindex="2">
</div>
<div class="label-input-wrap">
<label for="corganization">Organization:</label>
<input type="text" id="corganization" name="organization" tabindex="3">
</div>
<div class="label-input-wrap">
<label for="ctitle">Title:</label>
<input type="text" id="ctitle" name="title" tabindex="4">
</div>
<div class="label-input-wrap">
<label for="cemail">Email: (required)</label>
<input type="email" id="cemail" name="email" tabindex="5">
</div>
<input id="form-submit" type="submit" value="Sign Up" tabindex="6">
</fieldset>
</form>
</div>
</div>
</section>
<!-- End Main -->
<!-- Begin Secondary -->
<section id="secondary">
<div class="wrap">
<div class="inner-wrap">
<div class="text">
<h3>Thank You</h3>
</div>
</div>
</div>
</section>
<!-- End Secondary -->
</body>
export.html
<head>
<meta charset="utf-8">
<title>Hall Render - Export</title>
<!-- Mobile Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Main Stylesheet -->
<link href="assets/css/screen.css" media="all" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="assets/js/jquery-1.11.3-min.js"></script>
<!-- jQuery Plugins -->
<script src="assets/js/jquery-validation-1.14.0-min.js"></script>
<!-- Cordova JS -->
<script src="cordova.js"></script>
<!-- Functions -->
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
var db = window.openDatabase("HALLRENDER", 1.0, "App database",200000);
db.transaction(queryDB);
$('#dump').click(function(){
db.transaction(dropDB);
alert('Database Cleared!');
});
}
// Query Table Rows
function queryDB(tx) {
tx.executeSql('SELECT * FROM PEOPLE', [], querySuccess);
}
// Get Table Rows
function querySuccess(tx,result){
var status = document.getElementById("status");
var people = "";
var len = result.rows.length;
for (var i=0; i<len; i++){
people = people + '<li>'+result.rows.item(i).Email+','+result.rows.item(i).FirstName+','+result.rows.item(i).LastName+','+result.rows.item(i).Title+','+result.rows.item(i).Organization+'</li>';
}
status.innerHTML = people;
$("#status").listview("refresh");
}
// Delete Database
function dropDB(tx) {
tx.executeSql('DROP TABLE PEOPLE');
}
// File Writer
function saveCourseToFile() {
console.log("checkpoint 1");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, onFSError);
alert('CSV File Created!');
}
function onFSSuccess(fileSystem) {
console.log("checkpoint 2");
console.log("Opened file system: " + fileSystem.name);
fileSystem.root.getFile("export.csv", {create:true, exclusive:false}, gotFileEntry, onFSError);
}
function gotFileEntry(fileEntry) {
console.log("checkpoint 3");
fileEntry.createWriter(gotFileWriter, onFSError);
}
function gotFileWriter(writer) {
var entries = $('#status').find('li').filter(function() {
return $(this).find('ul').length === 0;
}).map(function(i, e) {
return $(this).text();
}).get().join('\n');
var dbEntries = 'Email,First Name,Last Name,Title,Organization\n'+entries;
writer.onwrite = function(evt) {
console.log("checkpoint 4: write success!");
};
writer.write(dbEntries);
}
function onFSError(err) {
console.log(err.code);
}
</script>
</head>
<body onload="onDeviceReady()">
<div class="inner-wrap">
<ol id="status" nam="status"></ol>
<div class="clear"></div>
<button id="export" onclick="saveCourseToFile()">Create .csv File Export</button>
<div class="clear"></div>
<button id="dump">Clear Database</button>
<p id="warning"><strong>WARNING: </strong>Export to .csv <em>BEFORE</em> clearing database!!</p>
<div class="clear"></div>
<div id="contents"></div>
</div>
</body>
這可能看起來很瘋狂。 但是，它可以滿足我的目標。 獲取表單數據，將其保存在本地，然后將信息導出到.csv文件。 希望這可以使其他人對類似問題有所了解。 感謝大家的幫助！
解決方案2
0 2015-07-31 07:28:24
首先安裝cordova文件插件。 http://docs.phonegap.com/zh-CN/edge/cordova_file_file.md.html
cordova plugin install org.apache.cordova.file使用JQuery（#id）.val（）或document.getElementById（'id'）。value從HTML表單捕獲文本。
創建如下函數來寫入文件：
我從表格中獲取的數據
var dataForm = $('#someId).val(); // All your text from the form.
要求文件系統和創建文件的功能。
function createTxtFile(){
// Request File System
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem){
fileSystem.root.getFile("myTxt.txt", {create: true, exclusive: false},
function(fileEntry){
// Create File
fileEntry.createWriter(WriteText, fail);
}, fail);
},
fail
);
}
寫文本的功能。
function WriteText(writer) {
writer.onwriteend = function(evt){ // Fired when end write.
console.log("End write text in file");
};
writer.write(dataForm);
}
我可以使用 javascript 將 HTML 表單數據（包括單選按鈕）保存為本地 txt 文件嗎？
[英]Can I save a HTML form data (including radio button) as a local txt file using javascript?
如何將用戶在FORM中選擇的數據保存到.txt文件或csv文件中
[英]How to save the data selected by user in FORM to the .txt file or csv file
在不使用網絡服務器的情況下將 html 表單數據寫入 txt 文件
[英]Writing html form data to a txt file without the use of a webserver
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何將HTML中的表單數據保存到txt文件中。
使用php將html表單數據保存到txt文件
如何在.txt文件中保存Html表數據？
我可以使用 javascript 將 HTML 表單數據（包括單選按鈕）保存為本地 txt 文件嗎？
Html form imput 數據輸入到txt文件
如何將用戶在FORM中選擇的數據保存到.txt文件或csv文件中
如何使用javascript將表單數據附加並保存到txt文件
將HTML頁面中的textarea數據保存到TXT文件中
將表單數據保存到文本文件 - HTML & Javascript
在不使用網絡服務器的情況下將 html 表單數據寫入 txt 文件
相關標簽