mhulse / form-pager Goto Github PK
View Code? Open in Web Editor NEWA simple, single-page, form pagination template shell (using jQuery).
Home Page: https://mhulse.github.io/form-pager
A simple, single-page, form pagination template shell (using jQuery).
Home Page: https://mhulse.github.io/form-pager
In CSS. Have a skin, but also have base structure.
Use JS to add the <span>*</span>
html.
var top = function() {
$(document).scrollTop(0);
};
// ...
$next.click(function(){
top();
});
$back.click(function() {
top();
});
So percentage does not get cut off:
#progress div { min-width: 3em !important; }
Basically, change things so that Pure is totally optional. I want this code to work on any form HTML, independent of the css framework used.
issue with the weight required field being blank and NOT causing the page to stop until it is
however, it IS recognized because an error message pops up when it is blank
<section id="p6" class="step">
<h3>Your height and weight</h3>
<p class="wave">What is your height?</p>
<div class="pure-control-group">
<label>
<input type="number" id="p6-1" name="" min="1" max="12" required> feet,
</label>
<label>
<input type="number" id="p6-2" name="" min="0"> inch(es)
</label>
</div>
<p class="wave">What is your weight (in pounds)?</p>
<div class="pure-control-group">
<label>
<input type="number" id="p6-3" name="" min="1" max="500" required> pounds
</label>
</section>
Need to figure out best way to generically handle the final form submission.
Return key will submit form if a field is focused. Would like to stop this from happening.
Something like:
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
Related: #3
Option to add history to URL for page-by-page navigation/linking.
Add ability to remember selections.
As it stands currently, this code works best as an independent app. Need to make the code more portable so it can be dragged/dropped into other projects (e.g., a component of an app).
For testing, this would be very useful.
For the skip the skip logic. The JS doesn't currently look at pre-filled (checked
) fields and update the skip logic accordingly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.