<%
Option Explicit
Session.CodePage=65001
Response.Charset="UTF-8"
if LCase(Request.ServerVariables("HTTP_METHOD"))="post" then
Dim first, last, middle, address, city, state, zipcode, email, homephone, workphone, posted
posted=""
first = Request.Form("first")
last = Request.Form("last")
middle = Request.Form("middle")
address = Request.Form("address")
city = Request.Form("city")
state = Request.Form("state")
zipcode = Request.Form("zipcode")
email = Request.Form("email")
homephone = Request.Form("homephone")
workphone = Request.Form("workphone")
posted = "First: " & Server.HTMLEncode(first) & "<br>"
posted = posted & "Middle: " & Server.HTMLEncode(middle) & "<br>"
posted = posted & "Last: " & Server.HTMLEncode(last) & "<br>"
posted = posted & "Address: " & Server.HTMLEncode(address) & "<br>"
posted = posted & "City: " & Server.HTMLEncode(city) & "<br>"
posted = posted & "State: " & Server.HTMLEncode(state) & "<br>"
posted = posted & "Zip COde: " & Server.HTMLEncode(zipcode) & "<br>"
posted = posted & "E-Mail: " & Server.HTMLEncode(email) & "<br>"
posted = posted & "Home Phone: " & Server.HTMLEncode(homephone) & "<br>"
posted = posted & "Work Phone: " & Server.HTMLEncode(workphone) & "<br>"
end if
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="en-US">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<title>Pop Over Form V1</title>
<script type="text/javascript">
function showForm() {
var scrollTop = 0;
var left = 0;
scrollTop = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
//For IE 8
if (scrollTop==undefined) scrollTop = 0;
left = (document.documentElement.clientWidth-433)/2;
oDiv = document.getElementById('theFormDiv');
oDiv.style.display='block';
oDiv.style.top = (scrollTop-10)+'px';
oDiv.style.left = (left)+'px';
return false;
}
function hideForm() {
oDiv = document.getElementById('theFormDiv');
oDiv.style.display='none';
return false;
}
</script>
<style type="text/css">
#theFormDiv {
display:none;
position:absolute;
background-color:#EEE;
border:1px solid #000;
padding:1em;
margin:3em;
width:28em;
}
body {
color: #000000;
background: #FFFFFF;
text-align: left;
font-size: 0.9em;
font-family: Arial, Helvetica, sans-serif;
}
form {
width:24em;
}
form fieldset {
float: left;
width:22em;
margin:0 0.3em 0.3em 0;
}
form legend {
font-weight:bold;
color:blue;
}
form p {
margin: 0;
}
form label {
float:left;
margin:0.5em;
}
form input {
width:100%;
font-size:100%;
}
/* thisForm.css */
#label-first, #label-last {
width:8em;
}
#label-middle {
width:2em;
}
#label-address, #label-email {
clear:left;
width:20em;
}
#label-city {
clear:left;
width:9em;
}
#label-state {
width:2em;
}
#label-zipcode {
width:7em;
}
#label-homephone {
clear:left;
width:9.5em;
}
#label-workphone {
width:9.5em;
}
#bSubmit {
float:left;
margin:0.5em;
clear:left;
width:auto;
}
#bCancel {
float:left;
margin:0.5em;
width:auto;
}
.field-hint {
font-size:0.7em;
color:#555555;
}
.nocss {
display:none;
}
</style>
</head>
<body>
<div id="theExample">
<p><input type="button" name="btn" id="btn" value="Click To Open Form" onclick="return showForm();"></p>
<%
If posted<>"" Then
Response.Write "<p>"&posted&"</p>"
End If
%>
</div>
<div id="theFormDiv">
<form method="post" id="frm" action="<%="http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("SCRIPT_NAME")%>">
<fieldset>
<legend>Name & Address</legend>
<p>
<label id="label-first">First Name*
<input name="first" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">John</span></label>
</p>
<p>
<label id="label-middle">MI
<input name="middle" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">Q</span></label>
</p>
<p>
<label id="label-last">Last Name*
<input name="last" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">Public</span></label>
</p>
<p>
<label id="label-address">Address*
<input name="address" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">1234 Any St, Apt#4</span></label>
</p>
<p>
<label id="label-city">City*
<input name="city" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">Hometown</span></label>
</p>
<p>
<label id="label-state">ST*
<input name="state" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">AL</span></label>
</p>
<p>
<label id="label-zipcode">Zip Code*
<input name="zipcode" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">99999-9999</span></label>
</p>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<p>
<label id="label-email">E-Mail Address*
<input name="email" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">john.public@domain.com</span></label>
</p>
<p>
<label id="label-homephone">Home Phone
<input name="homephone" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">(999) 999-9999</span></label>
</p>
<p>
<label id="label-workphone">Work Phone
<input name="workphone" type="text">
<span class="nocss">Efield-hinte entry: </span>
<span class="field-hint">(999) 999-9999</span></label>
</p>
<p>
<input type="submit" id="bSubmit" name="bSubmit" value="Submit">
<input type="button" id="bCancel" name="bCancel" value="Cancel" onclick="hideForm();">
</p>
</fieldset>
</form>
</div>
</body>
</html>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
