CINXE.COM
Temporary Library Card
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="/scripts/ProStyles.css" /> <link rel="stylesheet" type="text/css" href="/screens/styles.css" /> <script type="text/javascript" src="/scripts/elcontent.js"> </script> <script type="text/javascript" src="/scripts/common.js"> </script> <script type="text/javascript" src="/scripts/features.js"> </script> <script type="text/javascript" src="/scripts/webbridge.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Temporary Library Card</title> <link rel="stylesheet" type="text/css" href="/scripts/ProStyles.css" /> <link rel="stylesheet" type="text/css" href="/screens/styles.css" /> <link rel="stylesheet" href="/screens/temp_card_draft.css" type="text/css"> <script type="text/javascript" src="/scripts/elcontent.js"></script> <script type="text/javascript" src="/scripts/common.js"></script> <script type="text/javascript" src="/scripts/features.js"></script> <script type="text/javascript" src="/scripts/webbridge.js"></script> <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-80503000-1', 'auto'); ga('send', 'pageview'); </script> </head> <body> <header> <!-- positioning header in the upper left corner --> <div id="SetLeft" style="position:left; position:top;"> <!-- put image path in and change size as needed. display inline-block says sit next to the h3 element --> <a href="https://jeffcolibrary.org"> <img id="headerImage" src=" https://cor-liv-cdn-static.bibliocommons.com/images/CO-JEFFERSON/logo.png?1510131116579" alt="Jefferson County Public Library" style="border:none; width:270px; margin-bottom: 10px;"> </a> </div> <!-- this is just a div with purple background stretching the width of the screen --> <div id="purple" style="background-color:#5B2C86; width=100%; height: 40px;"> </div> </header> <script language="javascript" type="text/javascript"> <!-- Hide from old browsers function validate() { var msgError = ""; var focusOn = ""; msgError = msgError + testField("regform", "nfirst", /^[a-zA-Z\'\s]+$/, true, "first name", "Please use only letters in your first name."); if (msgError != ""){focusOn = setFocus(focusOn, "nfirst");} msgError = msgError + testField("regform", "nmiddle", /^[a-zA-Z\'\.\s]+$/, false, "middle name", "Please use only letters in your middle name."); if (msgError != ""){focusOn = setFocus(focusOn, "nmiddle");} msgError = msgError + testField("regform", "nlast", /^[a-zA-Z0-9\'\s\,\-\.]+$/, true, "last name", "Please use only letters, spaces, dashes, commas, and numbers in your last name."); if (msgError != ""){focusOn = setFocus(focusOn, "nlast");} msgError = msgError + testField("regform", "stre_aaddress", /.+/, true, "street", "Please use only letters, numbers and punctuation in your address."); if (msgError != ""){focusOn = setFocus(focusOn, "stre_aaddress");} msgError = msgError + testField("regform", "city_aaddress", /^[a-zA-Z\'\s]+$/, true, "city", "Please use only letters and spaces in your city's name."); if (msgError != ""){focusOn = setFocus(focusOn, "city_aaddress");} document.forms["regform"]["post_aaddress"].value = fixZip(document.forms["regform"]["post_aaddress"].value); if (document.forms["regform"]["post_aaddress"].value.length == 5) {msgError = msgError + testField("regform", "post_aaddress", /^[0-9\(\)\-\s]+$/, true, "zip code", "Please use only numbers in your zip code.");} else {msgError = msgError + "Please enter a valid 5-digit zip code." + "\n"; focusOn = setFocus(focusOn, "post_aaddress");} if (msgError != ""){focusOn = setFocus(focusOn, "post_aaddress");} document.forms["regform"]["tphone1"].value = fixPhone(document.forms["regform"]["tphone1"].value); if (document.forms["regform"]["tphone1"].value.substr(3,1) == "-") {msgError = msgError + testField("regform", "tphone1", /^[0-9\(\)\-\s]+$/, true, "phone number", "Please use only numbers, dashes, and spaces in your phone number.");} else {msgError = msgError + "Please enter a valid phone number." + "\n"; focusOn = setFocus(focusOn, "tphone1");} if (msgError != ""){focusOn = setFocus(focusOn, "tphone1");} msgError = msgError + testField("regform", "F051birthdate", /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}\b/, true, "birthdate", "Please use the correct birth date format: mm/dd/yyyy."); if (msgError != ""){focusOn = setFocus(focusOn, "F051birthdate");} msgError = msgError + testField("regform", "zemailaddr", /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, false, "e-mail address", "Please provide a valid e-mail address."); if (trim(msgError) !== "") {alert(trim("Please correct the following errors:\n\n" + msgError)); if (focusOn != "") {document.forms["regform"][focusOn].focus();document.forms["regform"][focusOn].select();} return false;} else { document.forms["regform"]["nfirst"].value = document.forms["regform"]["nfirst"].value.titleCase(); document.forms["regform"]["nmiddle"].value = document.forms["regform"]["nmiddle"].value.titleCase(); document.forms["regform"]["nlast"].value = document.forms["regform"]["nlast"].value.titleCase(); document.forms["regform"]["stre_aaddress"].value = document.forms["regform"]["stre_aaddress"].value.titleCase(); document.forms["regform"]["city_aaddress"].value = document.forms["regform"]["city_aaddress"].value.titleCase(); document.forms["regform"]["stat_aaddress"].value = document.forms["regform"]["stat_aaddress"].value.titleCase(); iiiDoSubmit_1(); } } function trim(stringToTrim) { return stringToTrim.replace(/^\s+|\s+$/g,""); } function testField(formName, fieldName, pattern, noBlank, msgBlank, msgInvalid) { var buildError = ""; if ((/^\s+$/.test(document.forms[formName][fieldName].value) || document.forms[formName][fieldName].value == "") && noBlank) {buildError = "Please include your " + msgBlank + "\n";} if (buildError == "" && !pattern.test(document.forms[formName][fieldName].value) && document.forms[formName][fieldName].value !== "") {buildError = msgInvalid + "\n";} return buildError; } function fixPhone(phoneNo) { phoneNo = phoneNo.replace(/[\-\)\(\s]/g, ""); if (phoneNo.length == 10) {phoneNo = phoneNo.substr(0,3) + "-" + phoneNo.substr(3,3) + "-" + phoneNo.substr(6,4);} if (phoneNo.length == 7) {phoneNo = "303-" + phoneNo.substr(0,3) + "-" + phoneNo.substr(3,4);} return phoneNo; } function fixZip(zipCode) { zipCode = zipCode.replace(/[\-\s]/g, ""); if (zipCode.length == 9) {zipCode = zipCode.substr(0,5);} return zipCode; } function setFocus(testValue, fieldName) { if (testValue == "") {return fieldName;} else {return testValue;} } function func(selectObject) { document.getElementById('ddepartment').value = selectObject.value; } function iiiDoSubmit_1() { var name = "iiiFormHandle_1"; if (document.getElementById) obj = document.getElementById(name); else if (document.all) obj = document.all[name]; else if (document.layers) obj = document.layers[name]; obj.form.submit(); } if (document.layers) document.captureEvents(Event.KEYDOWN); document.onkeydown = function (evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if (keyCode == 13) iiiDoSubmit_1(); }; // (c)GPL, apv modified by RWL on 8/19/07 String.prototype.titleCase = function () { var parts = this.split(' '); if ( parts.length == 0 ) return ''; var fixed = new Array(); for ( var i in parts ) { var fix = ''; fix = parts[i].substr(0,1).toUpperCase() + parts[i].substr(1,parts[i].length).toLowerCase(); fixed.push(fix); } fixed[0] = fixed[0].substr(0,1).toUpperCase() + fixed[0].substr(1,fixed[0].length); return fixed.join(' '); } // Unhide' --> </script> <style type="text/css"> <!-- .pageContentInner { width: 700px; margin: auto; font-family: arial, helvetica, sans-serif; } --> h2 { font-weight:normal; } .errormessage { text-align:center; font-weight:bold; } .extraFormText { margin: 0.5em 2em; } .formEntryArea { padding:0.5em; clear:both; } .formButtonArea{ text-align:center; margin-bottom: 10px; } .formEntryContent { padding: 1em 0; margin-bottom: 2em; } .formEntryLabel { float:left; text-align:right; width:15em; padding-right: 10px; } .formEntryField { float:left; } .formEntryFieldHidden { display:none; } .formMultiSelect { float:left; } </style> <div class="pageContentInner"> <div class="extraFormText"> <h1>Get a Library Card</h1> <p>Request a temporary library card to start placing holds (limit 5) and accessing many of our online resources. </p> <ul><li>Temporary cards expire after three weeks. </li> <li>Temporary cards cannot be used at our Holds Lockers, Lending Machines, or Express Library, since a permanent card is required to check out materials. </li> <li>Please visit any of our <a href="http://jeffcolibrary.org/locations" target="_blank">full-service, staffed libraries</a> within three weeks with your photo ID to get a permanent library card.</li></ul> <h1>Obtenga una tarjeta de la biblioteca</h1> <p>Obtenga una tarjeta temporal de la biblioteca para empezar a solicitar material (límite 5) y tener acceso a nuestros muchos recursos en línea.</p> <ul><li>Las tarjetas temporales expiran en tres semanas.</li> <li>Las tarjetas temporales no permiten el acceso a Holds Lockers, Lending Machines, o Express Library. Se requiere una tarjeta permanente para el préstamo de material.</li> <li>Visite una de <a href="http://jeffcolibrary.org/locations" target="_blank">nuestras bibliotecas que ofrecen servicio completo</a> con su tarjeta de identificación personal (que tenga foto), para solicitar una tarjeta permanente. Hágalo en el lapso de las tres semanas de haber obtenido su tarjeta temporal, para evitar que expire.</li> </ul> </div> <div id="accessibleForm" class="form1Part"> <form id="regform" method="post" class="unpadded" autocomplete="off" onsubmit="return validate();"> <fieldset> <legend>Please enter the following information: (<span class="formRequired">*</span>= required)</legend> <div class="formEntryContent"> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="nfirst">First name:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="nfirst" id="" value="" size="20" maxlength="40"><!--this is customized <screens/selfreg_webptrn.html>--> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="nmiddle">Middle name:</label></span> </div> <div class="formEntryField"> <input name="nmiddle" id="" value="" size="10" maxlength="40"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="nlast">Last name:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="nlast" id="" value="" size="40" maxlength="60"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="stre_aaddress">Address:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="stre_aaddress" id="" value="" size="32" maxlength="128"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="city_aaddress">City:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="city_aaddress" id="" value="" size="20" maxlength="48"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="stat_aaddress">State:<span class="formRequired">*</span></label></span> </div> <div class="formMultiSelect" id=” stat_aaddress”> <select name="stat_aaddress" onchange="func(this)"> <option value="CO">CO</option> </select> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="stat_aaddress"></label></span> </div> <div class="formEntryFieldHidden"> <input name="stat_aaddress" id="" value="" size="12" maxlength="32"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="post_aaddress">ZIP Code:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="post_aaddress" id="" value="" size="12" maxlength="32"><span class="helpNote"> (XXXXX)</span> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="tphone1">Phone Number:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="tphone1" id="" value="" size="16" maxlength="20"><span class="helpNote"> (XXX-XXX-XXXX)</span> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="F051birthdate">Birth Date:<span class="formRequired">*</span></label></span> </div> <div class="formEntryField"> <input name="F051birthdate" id="" value="" size="8" maxlength="12"><span class="helpNote"> (mm/dd/yyyy)</span> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="zemailaddr">Email:</label></span> </div> <div class="formEntryField"> <input name="zemailaddr" id="" value="" size="40" maxlength="128"> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="F045pcode2">What language do you speak at home? <span class="formRequired">*</span></label></span> </div> <div class="formMultiSelect"> <select name="F045pcode2"> <option value="-">NONE <option value="e">English <option value="s">Spanish <option value="v">Vietnamese <option value="m">Chinese- Mandarin <option value="c">Chinese- Cantonese <option value="r">Russian <option value="g">German <option value="k">Korean <option value="n">Amharic <option value="a">Arabic <option value="t">Tagalog <option value="p">Polish <option value="j">Japanese <option value="l">ASL <option value="o">other </select> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="langdropdown">Would you like to receive library notices in English or Spanish?<span class="formRequired">*</span></label></span> </div> <div class="formMultiSelect" id=”langdropdown”> <select name="langdropdown" onchange="func(this)"> <option value="" disabled >Choose language</option> <option value="eng">English</option> <option value="spa">Spanish</option> </select> </div> </div> <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for="ddepartment"></label></span> </div> <div class="formEntryFieldHidden"> <input name="ddepartment" id="" value="" size="8" maxlength="12"> </div> </div> </div><!--FormEntryContent --> <div class="formButtonArea"> <span id="icon_submit" class="button"><span class="icons checkIcon"></span><span class="iconText"><input type="submit" value="Submit" style="background:none;border:0;margin-top: 20px;"></span></span> <!--{submit}--> </div> </fieldset> </form> <p style="text-align:center;">By clicking Submit, you agree to our <a href="http://jeffcolibrary.org/policies/library-card-rules" target="_blank">Library Card Rules</a>.</p> </div> <!--accessibleForm --> </div><!-- pageContentInner --> </div><!-- end wrapper --> </body> </html> <!--this is customized <screens/selfreg.html>-->