Multi page functionality in tiddlywiki
MarKubus
I am building a HTML web form, in which I make use of a multipl page
functionality with a Javascript (See below)
This is to keep the form structured and visual more attractive. The
script is necesarry, because it makes sure that in the end all the
form fields are collected and posted (not possible when using multiple
tiddlers like in the slideshow plugin, because the data on the first
tiddler are then lost).
However, If I make use of this in my TW the page visualizes but
outside of the tiddler. Do you guys have any clue how to have a
multiple page effect in one tiddler, so I can make the form
incorporated in my TW?
<!--Java funtion; the currentLayer variable is the variable that
keeps track of which chunk of the form is currently visible. Second,
when a user clicks a button, the button's onClick event calls the
showLayer() function, passing the appropriate layer name as a
parameter. The showLayer() function first hides the current layer
(stored in the currentLayer variable), and then makes the requested
layer visible. Finally, showLayer() stores the requested layer in the
currentLayer variable.
<script language="JavaScript" type="text/javascript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
Ken Girard
Make all of your forms outside of the TW and then call that page into
the tiddler.
Ken Girard
Eric Shulman
> functionality with a Javascript (See below)
> This is to keep the form structured and visual more attractive.
You can accomplish something similar using a *single form*, by
surrounding each "section" of the form in a DIV, and then selectively
show/hide specific DIV's (by ID)... something like this:
<html><form action="..."><div style='display:block' id='section1'>
Section One: <input> <input> <input>
<input type="button" value="next"
onclick="hideSection('section1'); showSection('section2');">
</div><div style='display:none' id='section2'>
Section Two: <input> <input> <input>
<input type="button" value="previous"
onclick="hideSection('section2'); showSection('section1');"><!--
--><input type="button" value="next"
onclick="hideSection('section2'); showSection('section3');">
</div><div style='display:none' id='section3'>
Section Three: <input> <input> <input>
<input type="button" value="previous"
onclick="hideSection('section3'); showSection('section2');"><!--
--><input type="button" value="next"
onclick="hideSection('section3'); showSection('section4');">
</div><div style='display:none' id='section4'>
Section Four: <input> <input> <input>
<input type="button" value="previous"
onclick="hideSection('section4'); showSection('section3');"><!--
--><input type="submit" value="submit form">
</div>
</form></html>
<script>
window.showSection=function(id) {
var here=document.getElementById(id);
if (here) here.style.display='block';
}
window.hideSection=function(id) {
var here=document.getElementById(id);
if (here) here.style.display='none';
}
</script>
Note: in the code pasted above, watch out for extra newlines added by
GoogleGroups... they might create syntax errors if they split a line
at the wrong place.
Also, you need to install
http://www.TiddlyTools.com/#InlineJavascriptPlugin
in order to define the showSection() and hideSection() functions.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios