jm1248 Posted February 26, 2011 Share Posted February 26, 2011 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 More sharing options...
dink Posted March 2, 2011 Share Posted March 2, 2011 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 More sharing options...
jm1248 Posted March 2, 2011 Author Share Posted March 2, 2011 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?dinkDid 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.