<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="preview.js"></script>
<script src="script2.js"></script>
<script src="preview2.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-xl-3">
<ul class="menu">
<li>
<a href="index2.html" target="preview-iframe"> Form 1</a>
</li>
<li>
<a href="index3.html" target="preview-iframe"> Form 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="preview">
<iframe name="preview-iframe" scrolling="yes" height="430px" frameborder="0" width="1000px"></iframe>
</div>
<button type="submit" id="next action-button" onclick="self.frames['preview-iframe'].location.href = 'index3.html';SaveItem();" form="return_form" style='display:block' class="next action-button">Next</button>
<button type="submit" id="next action-button1" onclick="self.frames['preview-iframe'].location.href = 'preview.html';SaveItem();" form="return_form" style="display:none;" class="next action-button1">Review</button>
<button type="submit" id="next action-button2" onclick="self.frames['preview-iframe'].location.href = 'preview.html'" form="return_form" style="display:none;" class="next action-button2">Submit</button>
</body>
</html>
$(document).ready(function () {
$(".action-button").click(function () {
$(".action-button").hide();
$(".action-button1").show();
});
$(".action-button1").click(function () {
$(".action-button1").hide();
$(".action-button2").show();
});
});
/*$(document).ready(function() {
$("#next action-button").click(function() {
$("#return_form").submit();
});
});
$(document).ready(function() {
$("#next action-button1").click(function() {
$("#return_form").submit();
});
});*/
/*$(document).ready(function() {
if (!window.localStorage) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
$("#return_form").submit(function() {
setAllItems();
});
}
});
var setAllItems = function() {
var newDate, itemId, formSave;
newDate = new Date();
itemId = newDate.getTime();
formSave = {
fname: $("input[name='fname']").val(),
lname: $("input[name='lname']").val(),
phone: $("input[name='phone']").val(),
email: $("input[name='email']").val(),
classify: $("select[name='classify']").val(),
subject: $("input[name='subject']").val(),
desc: $("textarea[name='desc']").val(),
};
// turn data into JSON string
localStorage.setItem(itemId, JSON.stringify(formSave));
};
*/
/* STYLESHEET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* HTML, BODY & PARAGRAPH */
html,
body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
transition: all 1s;
overflow-x: hidden;
}
#helpdeskform .field3 {
display: none;
}
/*inputs*/
#helpdeskform input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 80%;
color: #2C3E50;
font-size: 13px;
}
#helpdeskform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#helpdeskform .action-button {
width: 100px;
font-weight: bold;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#helpdeskform.action-button:hover,
#helpdeskform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #900;
}
/*Form labels*/
label.form-label {
text-align: left;
}
/*Phone Label Align*/
input#phone-field {
margin-left: 26px;
}
/*E-mail Label Align*/
input#email-field {
margin-left: 24px;
}
.counter-field {
font-size: 10px;
}
/*Divider*/
hr {
margin-bottom: 20px;
padding: 0px;
border-width: 2px;
border-style: solid;
border-color: #ccc;
}
/* PREVIEW iFRAME */
.preview-iframe {
text-align: right;
position: relative;
left: 300px;
width: 600px;
height: 450px;
top: -100px;
color: #129cf3;
}
.preview {
position: relative;
left: 310px;
border: 1px solid #000;
height: 452px;
width: 1000px;
top: 10px;
transition: all 1s;
box-shadow: 10px 10px 5px #888888;
overflow: hidden;
}
#submit_return_form_button {
background: #bfbfbf;
/* old browsers */
background: -moz-linear-gradient(top, #bfbfbf 0%, #bfbfbf 99%);
/* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(99%, #bfbfbf));
/* webkit */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);
/* ie */
border: 0;
color: #000000;
width: 120px;
padding: 6px 0;
font-size: 14px;
cursor: pointer;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
border-bottom-right-radius: 8px 8px;
border-bottom-left-radius: 8px 8px;
bottom: 5px;
position: relative;
filter: dropshadow(color=#000000, offx=-1, offy=-1);
}
#reset_list,
#submit {
background: #bfbfbf;
/* old browsers */
background: -moz-linear-gradient(top, #bfbfbf 0%, #bfbfbf 99%);
/* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(99%, #bfbfbf));
/* webkit */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);
/* ie */
border: 0;
color: #000000;
padding: 6px 0;
font-size: 14px;
cursor: pointer;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
float: right;
width: 150px;
filter: dropshadow(color=#000000, offx=-1, offy=-1);
margin-right: 60px;
}
.button {
color: #000000;
font-size: 10px;
padding: 2px 9px 2px 14px;
}
.button {
-moz-border-radius: 2px 2px 2px 2px;
background: url("/images/en_UK/btn_arrow_orange_new.gif") no-repeat scroll left center transparent;
border: 1px solid #CCCCCC;
cursor: pointer;
font-size: 0.9em;
overflow: visible;
position: relative;
text-decoration: none;
}
/*Admin Table styles*/
table#theLog {
color: #2d2d2d;
background-color: #e5e5e5;
display: table;
border-collapse: separate;
border-spacing: 0;
border-color: gray;
font-size: 12px;
text-align: left;
margin: 20px auto;
max-width: 1000px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
back
}
th {
background: none repeat scroll 0 0 #fff;
border-bottom: 1px solid #000000;
border-top: 4px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
color: #2a2a2a;
font-size: 12px;
font-weight: normal;
padding: 8px;
height: 60px;
text-align: center;
}
tr:hover td {
background: none repeat scroll 0 0 #fff;
color: #fff;
}
td {
background: none repeat scroll 0 0 #fff;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid transparent;
border-right: 1px solid #ffffff;
color: #333333;
height: 45px;
padding: 8px;
}
td a.delete {
cursor: pointer;
float: right;
width: 24px;
height: 24px;
display: none;
}
.menu {
list-style: none;
text-decoration: none;
}
.action-button,
.action-button1,
.action-button2 {
width: 80px;
letter-spacing: .1em;
position: relative;
left: 35px;
background: #fff;
font-weight: 500;
color: #000;
border: 1px solid #129cfe;
border-radius: 1px;
cursor: pointer;
padding: 10px 10px;
}
.action-button:hover {
background-color: #129cf3;
border: 1px solid #129cfe;
color: #000;
}
td,th {
font-family: monospace;
padding: 4px;
background-color: #ccc;
}
label {
vertical-align: top;
}
#items_table {
border: 1px dotted #000;
padding: 6px;
margin-top: 12px;
margin-right: 50%;
}
#items_table h2 {
font-size: 18px;
margin-top: 0px;
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="preview.js"></script>
<script src="script2.js"></script>
<script src="preview2.js"></script>
</head>
<body>
<form id="return_form" method="post" action="" accept-charset="utf-8">
<fieldset class="theLog">
<h2>Form</h2>
<p>
<label class="form-label first-name" for="fname">First Name:</label>
<input name="fname" id="fname" placeholder="First Name" type="text" />
</p>
<p>
<label class="form-label last-name" for="lname">Last Name:</label>
<input name="lname" id="lname" placeholder="Last Name" type="text" />
</p>
<p>
<label class="form-label" for="phone">Phone:</label>
<input name="phone" id="phone" placeholder="Phone Number" type="text" />
</p>
<p>
<label class="form-label" for="email">E-mail:</label>
<input name="email" id="email" placeholder="E-mail" type="text" />
</p>
<hr />
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="preview.js"></script>
<script src="script2.js"></script>
<script src="preview2.js"></script>
</head>
<body>
<form id="return_form" method="post" action="preview.html" accept-charset="utf-8">
<fieldset class="theLog">
<h2>Form 2</h2>
<label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
<p></p>
<p>
<label for="subject">Short Description: <span class="counter-field">
<span id="counter"></span> characters left.</span>
</label>
<input name="subject" id="subject" placeholder="Subject" type="text" />
</p>
<p>
<label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
</fieldset>
</form>
</body>
</html>
/*$(document).ready(function() {
if (typeof(localStorage) === 'undefined') {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
//load the items
getItems();
}
});
var getItems = function() {
var timeLog, logLength, i;
i = 0;
logLength = localStorage.length - 1; //how many items are in the database starting with zero
timeLog = '';
//now we are going to loop through each item in the database
for (i = 0; i <= logLength; i++) {
var itemKey, value, values, fname, lname, phone, email, classify, subject, desc;
//lets setup some variables for the key and values
itemKey = localStorage.key(i);
value = localStorage.getItem(itemKey);
values = JSON.parse(value);
fname = values.fname;
lname = values.lname;
phone = values.phone;
email = values.email;
classify = values.classify;
subject = values.subject;
desc = values.desc;
//now that we have the item, lets add it to the table
timeLog += '<tr id="' + itemKey + '" class="tableRow"><td>' + fname + '</td><td>' + lname + '</td><td>' + phone + '</td><td>' + email +'</td><td>' + classify + '</td><td>' + subject + '</td><td>' + desc + '<a class="delete" title="Delete Entry" href="#"><img src="img/delete.png" width="24" height="24"></a></td></tr>';
}
$("#theLog").append(timeLog); //update the table with the list items
$(".tableRow").mouseenter(function() {
$(this).children().children(".delete").show();
});
$(".tableRow").mouseleave(function() {
$(this).children().children(".delete").hide();
});
$("#reset_list").click(function() {
//alert("clicked");
localStorage.clear();
getItems();
});
$(".delete").click(function() {
var itemId = $(this).parent().parent().attr('id');
//alert(itemId);
localStorage.removeItem(itemId);
getItems();
});
}
*/
function SaveItem() {
var fname = document.forms.return_form.fname.value;
var lname = document.forms.return_form.lname.value;
var phone = document.forms.return_form.phone.value;
var email = document.forms.return_form.email.value;
localStorage.setItem(fname,lname, phone, email);
doShowAll();
}
function ModifyItem() {
var fname = document.forms.return_form.fname.value;
var lname = document.forms.return_form.lname.value;
var phone = document.forms.return_form.phone.value;
var email = document.forms.return_form.email.value;
document.forms.return_form.data.value = localStorage.getItem(fname, lname, phone, email);
doShowAll();
}
function RemoveItem() {
var name = document.forms.return_form.name.value;
document.forms.return_form.data.value = localStorage.removeItem(fname, lname, phone, email);
doShowAll();
}
function ClearAll() {
localStorage.clear();
doShowAll();
}
// dynamically draw the table
function doShowAll() {
if (CheckBrowser()) {
var key = "";
var timeLog = "<tr><th>fname</th><th>lname</th><th>phone</th><th>email</th></tr>\n";
var i = 0;
for (i = 0; i <= localStorage.length - 1; i++) {
key = localStorage.key(i);
timeLog += "<tr><td>" + key + "</td>\n<td>"
+ localStorage.getItem(key) + "</td></tr>\n";
}
if (timeLog == "<tr><th>fname</th><th>lname</th><th>phone</th><th>email</th></tr>\n") {
timeLog += "<tr><th>empty</th><th>empty</th><th>empty</th><th>empty</th></tr>\n";
}
document.getElementById('theLog').innerHTML = timeLog;
} else {
alert('Cannot store shopping list as your browser do not support local storage');
}
}
function CheckBrowser() {
if ('localStorage' in window && window['localStorage'] !== null) {
// we can use localStorage object to store data
return true;
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="preview.js"></script>
</head>
<body onload="doShowAll()">
<div id="items_table">
<table id="list" align="center" width="95%">
<thead>
</thead>
</table>
</div>
</body>
</html>