I have started a new blank HTML, CSS and Bootstrap project in VS code and I have added FormValidation.io but for some reason its not evening firing up and all I have done is taken their main example, does anybody have an idea why, does this need to be apart of a framework (react, vue) or am I just missing something ? but when I click the submit button nothing happens
<html>
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/plugins/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-6">
<form id="loginForm" method="POST">
<div class="form-group">
<label>Username</label>
<input class="form-control" type="text" name="username" />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" name="password" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="/plugins/jquery.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/plugins/formvalidation/dist/js/FormValidation.full.min.js"></script>
<script src="/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('loginForm'),
{
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long',
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore',
},
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
stringLength: {
min: 8,
message: 'The password must have at least 8 characters',
},
}
},
},
plugins: {
bootstrap: new FormValidation.plugins.Bootstrap(),
},
}
);
});
</script>
</body>
Related
I want to deliver two values to the Django backend in a GET form. The two values are values[0] and values[1]. How can I modify the input tag in HTML?
$(function() {
$("#slider-range").slider({
range: true,
min: 1910,
max: 2019,
values: [1950, 2010],
slide: function(event, ui) {
$("#amount").val(ui.values[0] + "won - " + ui.values[1] + "won");
}
});
$("#amount").val($("#slider-range").slider("values", 0) + "won - " + $("#slider-range").slider("values", 1) + "won");
});
<FORM NAME="myForm" method="GET" action="{%url 'search_result'%}">
<p>
<label for="amount">won:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" aria-valuemin="">
</p>
<input type="submit" value="search" id="search_button">
</FORM>
Assuming you're not using AJAX for this then you can achieve your goal by setting the slider from and to values in hidden fields within your form, as in the following example.
$(function() {
let updateSliderFields = () => {
let values = $("#slider-range").slider("values")
$('#from').val(values[0]);
$('#to').val(values[1]);
$("#amount").val(`${values[0]} won - ${values[1]} won`);
}
$("#slider-range").slider({
range: true,
min: 1910,
max: 2019,
values: [1950, 2010],
slide: updateSliderFields
});
updateSliderFields();
});
#amount {
border: 0;
color: #f6931f;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form name="myForm" method="GET" action="{%url 'search_result'%}">
<p>
<label for="amount">won:</label>
<div id="slider-range"></div>
<input type="text" id="amount" readonly aria-valuemin="" />
</p>
<input type="text" id="from" />
<input type="text" id="to" />
<input type="submit" value="search" id="search_button">
</form>
Note that I made a couple of tweaks to make the logic more succinct. In addition, the fields are only visible for this example. In your production version they should be changed to type="hidden".
I'm trying to use the validation plugin for my login form but I am getting an error saying "#login validate" is not a function. Below I have the HTML code and JS code with the appropriate libraries included.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<link href="recipe.css" rel="stylesheet"/>
<script src="loginval.js"></script>
<body>
<header>
<center>
<h1> Login Page</h1>
<center>
</header>
<nav>
<ul>
<li>
Home
</li>
<li>
Food Recipes
</li>
<li>
Add Recipe
</li>
<li>
Delete Recipe
</li>
<li>
<a href='login.html'>Login Page</a>
</li>
<li>
Sign Up
</li>
</ul>
</nav>
<form id="login" align="center">
<input name="username" placeholder="Username" type="text" > <br>
<input name="password" placeholder="Password" type="text"> <br>
<input class="btn btn-primary" id="submit-button" type="submit" value="Login"> <br>
</form>
</body>
</html>
Above is my HTML and below is my Jquery code
$(function() {
("#login").validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 7
}
},
messages: {
username: {
required: "Enter your username",
minlength: "Username should be minimum 5 characters long"
},
password: {
required: "Enter your password",
minlength: "Password should be minimum 7 characters long"
}
},
});
});
I had executed the same scenario for my signup form and I had no errors with that. But for some reason, I am having a validation error even though I included the jquery validation library.
$(function() {
$("#login").validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 7
}
},
messages: {
username: {
required: "Enter your username",
minlength: "Username should be minimum 5 characters long"
},
password: {
required: "Enter your password",
minlength: "Password should be minimum 7 characters long"
}
},
});
});
You have missed $ symbol in front of ("#login") selector. Hope it helps you...
I want to be all in one line (has-error and has-success)
Now, situation is like this:
I am using BootstrapValidator and Bootstrap.
Here is my HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>
Basically, I want to be all aligned, just on has-success to disappear error div below?
I was looking in bootstrap.min.css but it seems it is all OK.
Also in a bootstrapValidator.css I have some classes that not influence on this matter.
i think you should separate to two divs the form, in the first div all the form divs , Apart from the last div
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
and in the second form you need to put this-
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
this way the message will appear in different div
search divA, divB:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="divA">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
</div>
<div class="divB">
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>
So im following thinkster.io for an Angular guide and I got stuck on the routing part, specifically, the templating and ui viewing. Heres my code, the problem is, nothing seems to show up anymore :/
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home')
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
]
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title,
upvotes: 0,
link: $scope.link});
$scope.title = "";
$scope.link="";
};
$scope.increaseVotes = function(post) {
post.upvotes += 1;
};
}]);
html>
<head>
<meta charset="UTF-8">
<title>My Angular App!</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!--template start-->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div data-ng-repeat="post in posts | orderBy: '-upvotes'">
<span ng-click="increaseVotes(post)"><img src="lol.jpeg"></span>
<a ng-show="post.link" href="https://{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
- upvotes: {{post.upvotes}}
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
I cant exactly understand whats wrong with it, in my mind ui-view should be rendering the template, yet for some strange reason, it is not. I tried looking in other questions and it seems that doesnt work either.
I need to use Phonegap to create an iOS app to save an HTML form. But, I'm not overly familiar with iOS or Phonegap. Can anyone point me in there correct direction?
Here is my 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>
Here is my functions.js file:
(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);
I'm using jQuery form validation and after validation it hides the form and shows a 'Thank You' and then reloads the page. Now, how do I get the form data to save to iOS file system? The app needs to be used offline and save info, reason why I need the info stored within iOS.
So I realized that I was going about this all WRONG. I needed the form data to post to a database. The database is used to collect all submitted form data. I believe the .txt file idea would be overwritten every single time the form data was submitted. So, I created two pages. One page to fill out and submit the form. One page to view all form entries and to export and clear database.
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>
This might look crazy. But, it works for what I was trying to accomplish. Take form data, save it locally, then export info into .csv file. Hopefully this gives someone else some insight into a similar problem. Thanks to everyone for helping!!
First install the cordova file plugin. http://docs.phonegap.com/en/edge/cordova_file_file.md.html
cordova plugin install org.apache.cordova.file
Capture the text from the form HTML with JQuery (#id).val() or document.getElementById('id').value.
Create the function to Write file like this:
My data captured from the form
var dataForm = $('#someId).val(); // All your text from the form.
Function for require File System and create file.
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 for write text.
function WriteText(writer) {
writer.onwriteend = function(evt){ // Fired when end write.
console.log("End write text in file");
};
writer.write(dataForm);
}