Text field
A comments-box user interface template with integrated
text preview, and preview required before submit.
The form is intentionally created so that preview is required before
submit. This, in order to make it easier for the commenter to catch
typos etc. before the form is submitted.
Try it
First write, then preview (html OK). Note: Styling is only indicative,
you will want to edit the css before use.
To make full use of this page please enable Javascript.
Usage
Version, Use, and License
Version
Current version: 3.6
Note: This is an interface template only. As such it does
not "do" anything on submit.
Use
See code below. Copy first, then paste.
Before use you may want to edit the CSS and perhaps add
input validation/control.
Also, you may want to remove the "return false;" from the
onClick property of the submit button.
License
What? Free!
Source code
HTML source
<ul id="tabs">
<li id="tab_frm_edit" class="active"
onClick="shift('frm_edit','frm_preview');return false;">
<a href="#frm_edit">Write</a>
</li>
<li id="tab_frm_preview"
onClick="shift('frm_preview','frm_edit');return false;">
<a href="#preview">Preview</a>
</li>
</ul>
<form action="" method="post" accept-charset="utf-8">
<div id="frm_edit">
<label for="title">title</label>
<br><input type="text" id="title" name="title" size="65" maxlength="200" value="">
<br><label for="content">message</label>
<br><textarea id="content" name="content" rows="10" cols="75"></textarea>
</div>
<div class="frm_buttons" id="frm_edit_buttons">
<input type="reset" value="Reset">
<input type="button" value="Preview"
onClick="shift('frm_preview','frm_edit');return false;">
</div>
<div id="frm_preview">
<div id="frm_preview_content"></div>
</div>
<div class="frm_buttons" id="frm_preview_buttons">
<input type="button" value="Edit"
onClick="shift('frm_edit','frm_preview');return false;">
<input type="submit" id="btn_submit" value="Submit"
onClick="return false;">
</div>
</form>
JS source
<script type="text/javascript">
/* text field, source: https://clsc.net/
*/
function prew(form){
var notxt = '<p>Please write before you view.</p>';
var titl = form.elements[0].value.trim();
var writ = form.elements[1].value.trim();
var chars = titl.length + writ.length;
var btnSubmit = document.getElementById(\"btn_submit\");
var html = '';
if (chars) {
if (titl.length){
html += \"<h2>\" + titl + \"</h2>\\n\";
}
if (writ.length){
html += \"<div>\" + writ + \"</div>\";
}
btnSubmit.style.display = \"\";
} else {
html += notxt;
btnSubmit.style.display = \"none\";
}
document.getElementById(\"frm_preview_content\").innerHTML = html;
}
function shift(show,hide) {
var t_s = 'tab_'+show;
var t_h = 'tab_'+hide;
var b_s = show+'_buttons';
var b_h = hide+'_buttons';
var s = document.getElementById(show);
var h = document.getElementById(hide);
var ts = document.getElementById(t_s);
var th = document.getElementById(t_h);
var bs = document.getElementById(b_s);
var bh = document.getElementById(b_h);
if (show == 'frm_preview') {
prew(document.forms[0]);
}
s.style.display = \"block\";
h.style.display = \"none\";
ts.setAttribute(\"class\", \"active\");
th.setAttribute(\"class\", \"\");
bs.style.display = \"block\";
bh.style.display = \"none\";
}
</script>
CSS source
ul#tabs li, div#frm_edit, div#frm_preview, div.frm_buttons {
background-color: lightgray;
color: inherit;
}
div#frm_edit, div#frm_preview {
padding: 10px;
min-height: 262px;
}
div#frm_edit, div#frm_preview, div.frm_buttons {
margin: 2px 0px 0px 100px;
width: 650px;
border: 1px solid grey;
border-top: 0px;
border-bottom: 0px;
}
ul#tabs {
height: 20px;
width: 672px;
margin: 0px;
margin-left: 100px;
padding: 0px;
list-style: none;
line-height: 1em;
}
ul#tabs li {
width: 333px;
border: 1px solid grey;
margin: 0px;
background-color: darkgray;
color: inherit;
text-align: center;
}
ul#tabs li#tab_frm_edit {
float: left;
}
ul#tabs li#tab_frm_preview {
float: right;
}
ul#tabs li#tab_frm_edit.active
, ul#tabs li#tab_frm_preview.active {
border-bottom: none;
background-color: lightgray;
color: inherit;
}
input[type="text"],textarea {
margin: 0px;
padding: 3px;
width: 640px;
}
div.frm_buttons {
margin-top: 0px;
margin-right: 5px;
padding: 10px 10px 10px 10px;
text-align: right;
border-bottom: 1px solid grey;
}
input[type="button"]
, input[type="reset"]
, input[type="submit"] {
margin-right: 20px;
}
div#frm_preview, div#frm_preview_buttons {
display: none;
}
Reference