Jump to content

Example: Form with pop up Preview Window


jm1248
 Share

Recommended Posts

This document is a form with a preview button that opens a temporary pop up window showing the user's input as it would appear when accessed by a member look up for example. Included is a longish, but thorough, text to HTML converter, a way to include an external template into a document and a crude validation function. It is suitable to use as a starting point for hobbyists. All the code is in JavaScript. The form document needs three support files that can be copied and saved as noted.Hopefully this code survives the formatting.John-In-Toronto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><!--IMPORTANT - This document requires the files preview.css, htmlify.js and formview1.jsto be in the same folder with it.  They can be cut and pasted from the end of this documentunder ***SUPPORT FILES ***.--><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Member Form</title><style type="text/css">p.ima {margin-left: 40px; margin-right:30%; font-size: 12pt; font-family: arial; color=Black}p.intg {margin-left: 40px; font-size: 18pt; font-family: times; color="#006600";}p.inpt {margin-left: 40px; font-size: 14pt; font-family: Arial; font-weight: bold; color=green;}p.instr {margin-left: 50px; font-size: 12pt; font-family: Arial}h3 {margin-left: 40px; font-size: 13.5pt; font-family: Arial}</style><script type="text/javascript" src="formview1.js"> // Required template is in this file</script><script type="text/javascript" src="htmlify.js"> // Required code is in this file</script><script type="text/javascript">function fillin() // For testing only - prefills the form. Comment out after use.{  uname.value = "Test Dummy";  uema.value = "tdummy@testlabs.com";  uloc.value = "Austin, TX";  uint.value = "Bowling, cooking, wine tasting";  ugrt.value = "I miss all the wonderful people I worked with at XYZ over the years.  My alternate email is <bigtd@something.ca>  I have a website: (readthis.com/tdummy.html).";}function showpreview(tmpl) // Display form entries as they will appear in Member List{ if(!validate()) return  tmpl = gettemplate() // Get the template via views.js // Replace markers with user info  tmpl = tmpl.replace("`uname", uname.value);  tmpl = tmpl.replace("`uema", uema.value); // for display  tmpl = tmpl.replace("`uema", uema.value); // for the anchor  tmpl = tmpl.replace("`uloc", uloc.value);  tmpl = tmpl.replace("`status", ustatus.options[ustatus.selectedIndex].value);  tmpl = tmpl.replace("`uint", uint.value);  tmpl = tmpl.replace("`ugrt", htmlify(ugrt.value)); // Display in a nice new window (closes when focus returns to this page)  profile = window.open("", "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=800, height=600, left=300");  profile.document.write(tmpl);}function validate(){// Validation code - for Submit and Preview if (uname.value.length < 5) {  alert("Name field incomplete.");  return false; } if (uema.value.length < 5) {  alert("Email field incomplete.");  return false; } if (!uema.value.match("@")) {  alert("Email field incomplete.");  return false; }  uema.value = uema.value.replace(",","."); //Replace any commas with dots. if (ustatus.options[ustatus.selectedIndex].value == 0) {  alert("Status must be selected.");  return false; } if (uloc.value.length < 5) {  alert("Location field incomplete.");  return false; } return true;}</script></head><body onfocus='profile.close()' onload='fillin()';> <!-- Close any open Profile window--><div><h1><strong><span style="font-size: 36pt; color: green">XXYZ<em>site</em></span></strong><span style="font-size: 26pt; font-family: Arial; font-weight: normal; font-style: normal">		  Membership Form</span></h1><p class="ima">	Membership is open to any former XYZ employees.</p><br><div style="margin-left: 30pt"><font size="6"><strong><a href="SampleIntro.html" title="" target="_blank"><em><span style="font-size: 10pt; font-family: Arial"> SAMPLE SIGNUP</span></em></a></strong></font><br> <br><!--------------- FORM -----------------><form action="profile_update.php" method="post" onsubmit='return validate(this)'><!-- Hidden Form info --><input name='user_id' type='hidden'><p class="inpt" style="background-color: #ffffa0"> Yellow fields are required information</p><br/><p class="inpt">Name   <input style="background-color: #ffffa0" size="40" id='uname' name="name" type="text"></p><p class="instr">Enter your Firstname Lastname<hr><p class="inpt">Email   <input style="background-color: #ffffa0" size="40" id='uema' name="email" type="text"></p><p class="instr">	Enter the email address you want to use to correspond with other members</p><p class="instr"> Check <input id='emn' name='emn' type='checkbox' checked='true'> to receive an email notice when Newsletter is updated.</p><hr><p class="inpt">Status    <select style="background-color: #ffffa0" id='ustatus' name="Status"><option value=''>Select Status</option><option value='Former XYZer'>Former XYZer</option><option value='Current XYZer'>Current XYZer</option><option value='Former Rep'>Former Rep</option><option value='Current Rep'>Current Rep</option><option value='Other'>Other</option></select><br></p><p class="instr">Select your current relationship with XYZ.</p><hr><p class="inpt">Location	      <input style="background-color: #ffffa0" size="30" id='uloc' name="Location" type="text"</p><p class="instr">Enteryour City/Town and State/Country <span style="font-family: Arial"><br>e.g.<strong> <span style="color: blue">Austin, TX</span></strong> or <strong><span style="color: blue">Paris, France</span></strong></span></p><hr><p class="inpt">Interests	      <input size="90" id='uint' name="Hobbies" type="text"</p><p class="instr">	Enterany interests you have<span style="font-family: Arial">. e.g. <strong><span style="color: blue">Golf, cooking, gardening, bicycling</span></strong></span></p><hr><p class="inpt">Greeting<br>	        <textarea rows="7" cols="86" id='ugrt' name="Greet"></textarea></p><p class="instr">	Add a few words (or quite a few) to reintroduce yourself.<br>	Put links to your LinkedIn, Facebook etc. profiles.<br/>        Add alternate email addresses.</p><hr><p class="inpt"> <input id='Preview' name="Preview" value="Preview" type="button" onclick='return showpreview()'></p><p class="inpt"><input name="Submit" value="Submit" type="submit" disabled="true"></p></form></div></div> </body></html><!--            ***************************SUPPORT FILES ************************Paste this into previews.css--------------------------------------------------------------------------------------/* MemberView Styles */div.mbr_view {margin-left: 4%; margin-right: 25%; font-family: Arial; color: black;}div.mbr_indent {margin-left: 4%}span.mbr_name {font-size: 1.8em; color: green;}span.mbr_email {font-size: 0.9em; color: blue;}span.mbr_hdg {line-height:180%;font-size: 1em; font-weight:bold;}span.mbr_info {font-size: 1em;}p.greet {margin-left: 4%; font-family: Verdana; font-size: 0.9em;}--------------------------------------------------------------------------------------Paste this into formview1.js--------------------------------------------------------------------------------------function gettemplate() // Return with Member View template{// Note:  Requires styles to be in file previews.css in the same folder as this return "<html><head> <title>Profile</title><link rel='stylesheet' type='text/css' href='previews.css'></head><body><br/><div class='mbr_view'><span class='mbr_name'> `uname</span> <a href='mailto:`uema'> <span class='mbr_email'> `uema </a></span><br/> <div class='mbr_indent'><span class='mbr_info'> `uloc</span><br/><br/>  <span class='mbr_hdg'> `status</span><br /> <span class='mbr_hdg'>Interests:  </span><span class='mbr_info'> `uint</span><br />  <br />   <span class='mbr_hdg'>Greeting:  </span><p class='greet'> `ugrt</p>  <br /></div></div></body></html>"}--------------------------------------------------------------------------------------Paste this into htmlify.js--------------------------------------------------------------------------------------function htmlify($text){  var tlnk = new Array; //Create an array to hold the potential links  var hlnk = new Array; //Create an array to hold the HTML translation // First, translate special characters to HTML  $text = spchrs2html($text); // Loop through the clear text   var i = 0;  for (i=0;i<20;i++) // Set ;i<20; to a reasonable limit here  {  // Get a potential link and mark where it came from   $text = $text.replace(/(\S+\.\S+)/,"<"+i+">"); // look for dots that are surrounded by non-whitespace characters   tlnk[i] = RegExp.$1;  } // EOLoop  ac = i; // Loop through the array of potential links and make replacements  for (i=0;i<ac;i++)  {   // If this is a number, (e.g. 6.4sec; $5.00 etc.) OR too short; restore original and skip it   if (tlnk[i].search(/\d\.\d/)>-1 || tlnk[i].length <5) // Search for digit.digit OR len < 5 in this potential link   {    $text = $text.replace("<"+i+">", tlnk[i]);   }   else   {   // Make this URL into a real link - move brackets and punctuation outside of the anchor tag   htm = makelink(tlnk[i]);   $text = $text.replace("<"+i+">", htm);   }  } // Now put the breaks on  $text = $text.replace(/\n/g,"<br/>"); // And deal with multiple spaces  $text = $text.replace(/\ \ /g,"  "); // And any other specials  $text = $text.replace(/"/g,""");  $text = $text.replace(/\$/g,"$");  return $text;}function makelink(txt) // Make a real link from this potential link{   txt = html2spchrs(txt); // Undo any html special characters in this link   var i = 0; // Clean the front end   pN = txt.length-1;   for (i=0;i<pN;i++)   {    ch = txt.substr(i,1); // Look at each character    if (ch.search(/\w/)>-1) break; // Stop looping when a word char is found   }   prea = txt.substring(0,i); // Copy the pre anchor stuff   prea = spchrs2html(prea) // Redo any html special characters in this link   txt = txt.substr(i); // Trim the preamble from the link // Clean the trailing end   for (i=pN;i>0;i--)   {   ch = txt.substr(i,1); // Look back at each character   if (ch.search(/\w|_|-|\//)>-1) break; // Loop until a legal trailing char is found   }   posta = txt.substring(i+1); // Copy the post anchor stuff   posta = spchrs2html(posta) // Redo any html angle bracket codes in this link  turl = txt.substring(0,i+1); // and detach it from the rest - this is the legit URL // If the URL is an email address, link as a mailto:  if (turl.search(/@/)>0)  {   tlnk = "<a href='mailto:"+turl+"'>"+turl+"</a>";   return prea+tlnk+posta;  }  // Not a mailto, treat as a document URL hurl = ""  if (turl.search(/\w+:\/\//)<0) hurl = "http://"; // Add http:// if no xxxx:// already there  tlnk = "<a href='"+hurl+turl+"'>"+turl+"</a>"; return prea+tlnk+posta;}function spchrs2html(str){  str = str.replace (/&/g, "&");  str = str.replace (/</g, "<"); // Convert angle brackets to HTML codes in string  str = str.replace (/>/g, ">");  return str;}function html2spchrs(str){  str = str.replace (/</g, "<"); // Undo any angle bracket codes in this link  str = str.replace (/>/g, ">");  str = str.replace (/&/g, "&");  return str;}---------------------------------------------------------------------------------------->

Link to comment
Share on other sites

Hi John... I tried the code in firefox and ie and it didn't popup any window..Is this code suppose to work right out of the box or does it need tweeking?dink

Link to comment
Share on other sites

Hi John... I tried the code in firefox and ie and it didn't popup any window..Is this code suppose to work right out of the box or does it need tweeking?dink
Did you extract the three files - preview.css, htmlify.js and formview1.js and put them in the same folder? Are you running the code on a server or local hard drive? I ran it on a local drive with Firefox.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...