Colorado CarShare Online Registration

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Colorado CarShare Online Registration</title> <link rel="stylesheet" href="/static/css/ui-base/jquery-ui-base.1.11.4.1722457019.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/static/css/foundation/foundation.1426897990.css" /> <link rel="stylesheet" href="/static/css/foundation/foundation-icons.1393381557.css" /> <link rel="stylesheet" href="/static/css/signaturepad/jquery.signaturepad.1393869747.css" /> <script type="text/javascript" src="/static/js/jquery-2.2.4.min.1722457019.js"></script> <link rel="stylesheet" type="text/css" href="/static/css/orientation_boulder.1606330551.css"> <style type="text/css"> .fill_color1 { background:#EF3F3F !important; background-color:#EF3F3F !important; border-color:#EF3F3F !important; } .fill_color2 { background:#EF3F3F !important; background-color:#EF3F3F !important; border-color:#EF3F3F !important; } .fill_color3 { background:#EF3F3F !important; background-color:#EF3F3F !important; border-color:#EF3F3F !important; } .fill_color4 { background:#EF3F3F !important; background-color:#EF3F3F !important; border-color:#EF3F3F !important; } .coloring0 { color: black !important; } .coloring1 { color:#EF3F3F !important; } .coloring2 { color:#EF3F3F !important; } .coloring3 { color:#EF3F3F !important; } .coloring4 { color:#EF3F3F !important; } .coloringf { color:#FFFFFF !important; } </style>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-55QF97B');</script>  <script> window.dataLayer = window.dataLayer || []; function ga(){ } // mock ga to prevent errors function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GTM-55QF97B'); var _gaq = _gaq || { push: function (event) { gtag('event', event[2], { 'event_category': event[1], 'event_label': event[3], }); } } </script> </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=''" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="row header"> <div> <div class="small-1 medium-1 columns left hide-for-large-up" style="margin-top:1rem;"></div> <div class="small-8 medium-8 columns left" style="margin-top:1rem;"> <a class="header_logo" href="https://www.carshare.org/"></a> </div> <div class="small-3 medium-2 columns right" style="margin-top:1rem"> <ul class="no-bullet header-links"> <li><a href="https://reservations.carshare.org/orientation/sign_up?logout=1">log out</a></li> </ul> </div> </div> </div> <div class="row modo-row"> <div class="small-12 modo-row"> <section class="main-section">  <div id="signup_login_boulder" class="step inactive-partial"> <div class="row"> <div class="off-canvas-wrap"> <div class="inner-wrap"> <div class="large-9 columns"> <form name="signup_login_boulder" autocomplete="off" method="post" action="https://reservations.carshare.org/orientation/step"> <input type="hidden" value="signup_login_boulder" name="form"/> <div class="row login hide"> <div class="small-8 columns"> <h2 class="focuser modo-q-title">Please login.</h2> </div> </div> <div class="row login hide"> <div class="errors hide" id="failed-login">Your username or password was not found. Please try again.</div> <div class="errors hide" id="has-full-fledged-account">The account associated with your username has already finished registration and cannot be used to register again</div> <div class="text-center columns"> <br /> <p class="resume-text hide">Enter the username and password you provided when you began your registration.</p> <p class="rejoin-text hide">Enter your regular Colorado CarShare username and password.</p> <input type="hidden" name="loginmode" id="loginmode" value="" /> </div> <div class="small-2 columns right hide"> <a class="right-off-canvas-toggle text-right"><h2 class="modo-menu-icon"><i class="fi-list"></i></h2></a> </div> <div class="small-1 columns right"> <a class="text-right"><h2 class="modo-back-icon hide"><i class="coloring3 fi-previous"></i></h2></a> </div> </div> <div class="row login hide"> <div class="medium-2 columns"> <label class="inline">Username:</label> </div> <div class="medium-10 columns"> <input type="text" autocapitalize="none" class="focuser staff-login" name="Username" id="sulogin-val" value=""/> </div> </div> <div class="row login hide"> <div class="medium-2 columns"> <label class="inline">Password:</label> </div> <div class="medium-10 columns"> <input type="Password" class="focuser" name="Password" value=""/> </div> </div> <div class="row login hide"> <div class="small-12 columns"> <a class="small round button right login-cancel" href="#">Go Back</a> <div class="right"> </div> <input class="small round button right" type="submit" name="Login" value="Login"/> <div class="small-12 medium-6 columns" style="float:left"> <a class="small round button right" href="sign_up?forgot=1">Don't know your username or password?</a> </div> </div> </div> <div class="row choices"> <div class="small-10 columns"> <h2 class="modo-q-title">Colorado CarShare Online Registration</h2> </div> <div class="small-1 columns"> <a class="right-off-canvas-toggle hide-for-large-up right"><h2 class="modo-menu-icon"><i class="fi-list"></i></h2></a> </div> </div> <div class="row choices"> <br/><br/><br/> <div class="small-12 columns text-center"> <input class="round button lowercase" name="Fresh" id="btn_goto_signup_email" type="submit" value="Join Colorado CarShare"/> </div> <div class="small-12 columns text-center"> <a class="small round button show-login" href="#" id="login-button-resume">I’ve already started my registration, and I’d like to continue.</a> </div> </div>  </form> <script type="text/javascript"> $().ready(function() { //just show the login if that's what they chose $('a.show-login').click(function(){loginswap($(this));}); function loginswap(x) { if (x.attr('id') == 'login-button-resume') { $('.resume-text').removeClass('hide'); $('.rejoin-text').addClass('hide'); } else if (x.attr('id') == 'login-button-rejoin') { $('.rejoin-text').removeClass('hide'); $('.resume-text').addClass('hide'); } $('.login').removeClass('hide'); $('.choices').addClass('hide'); $('.modo-signup-back-icon').removeClass('hide'); } //or go back to the normal splash screen if they ended up here by accident $('a.login-cancel').click(function(){ $('.choices').removeClass('hide'); $('.login').addClass('hide'); $('.errors').addClass('hide'); $('.modo-signup-back-icon').removeClass('hide'); }); $('.modo-signup-back-icon').click(function(){ $('.choices').removeClass('hide'); $('.login').addClass('hide'); $('.errors').addClass('hide'); $('.modo-signup-back-icon').addClass('hide'); }); // marketing tracking $('#btn_goto_signup_email').click(function() { ga('RollUpProperty.send', 'pageview', '/orientation/sign_up/signup_email'); }); }); </script> </div> <div class="large-3 columns show-for-large-up questions" style="display: none !important;"> <br/> <h2 class="modo-q-title-white">Q & A</h2> <ul class="side-nav"> </ul> </div> <aside class="right-off-canvas-menu" style="display: none !important;"> <ul class="off-canvas-list off-canvas-questions"> <li style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px"><h2 class="modo-q-title-white">Q & A</h2></li> </ul> </aside> <a class="exit-off-canvas"></a> </div> </div> </div> </div> </section> <div class="progress small-12 success hide"> <span class="meter" style="width: 0%"></span> </div> </div> </div> <footer class="row footer"> <div> <div class="small-12 columns"> <h5 class="text-center footer-text"> <a href="https://www.carshare.org/" class="footer-link">Colorado CarShare</a> <span>|</span> <a href="tel:(303) 720-1185" class="footer-link">(303) 720-1185</a> <span>|</span> <a href="mailto:info@carshare.org" class="footer-link">info@carshare.org</a> <br>Software &copy 2025 <a href="http://modo.coop" class="footer-link">Modo</a>. All rights reserved. </h5> </div> </div> </footer> <script type="text/javascript" src="/static/js/jquery-ui-1.11.4.min.1722457019.js"></script> <script type="text/javascript" src="/static/js/dragscrollable.1290621157.js"></script> <script type="text/javascript" src="/static/js/modernizr.1393381557.js"></script> <script type="text/javascript" src="/static/js/vendor/fastclick.1393381557.js"></script> <script type="text/javascript" src="/static/js/foundation-5.1.0.min.1393381557.js"></script> <script type="text/javascript" src="/static/js/util.1629308659.js"></script> <script> //var scroll_timer; //var scroll_start = null; var signup = {}; signup.fn = {}; signup.fn.fails = {}; signup.fn.dones = {}; $(document).foundation({ abide: { patterns: { // modopassword: min 8 characters. Need to update to exclude the entered username and the word 'password'. password: /(?=^.{8,}$)([1-zA-Z0-1@.\s])$/ } } }); $().ready(function() { $(window).on('focus', function() { // your code //ajax call - check in to see if there is still a session $.get('https://reservations.carshare.org/orientation/is_session_valid', {steps: $('div.step').length}, function(data){ // console.log('do reload?' + data.reload); if(data.reload){ location.reload(); } }); }); bind_common_actions($(this)); //on load - check hash var partial_id = window.location.hash.substring(1); if($('#' + partial_id).length == 0){ partial_id = $('.step:last').attr('id'); } transition_to_form(partial_id); //HACK - this is abug with foundation - //the src in the iframe goes to about:blank when the modal hides. - check latest releases to see if this has been fixed and can be removed $(document).on('open', '[data-reveal]', function () { var modal = $(this); var iframe = $(modal).find('iframe'); if(iframe.length > 0){ if(iframe.attr('src') == 'about:blank'){ iframe.attr('src', iframe.attr('data-src')); } } }); }); function bind_common_actions(ancestor){ $(ancestor).find('.decision-point').click(decide); $(ancestor).find('.modo-back-icon').click(previous_step); $(ancestor).find('.focuser').click(function(){ //focus in - use fadeTo to make the transition less jarring if($(this).closest('.step').hasClass('inactive-partial')){ transition_to_form($(this).closest('.step').attr('id')); } }); //use modernizr to detect if touch screen and date input enabled // if (Modernizr.touch && Modernizr.inputtypes.date) { // $(ancestor).find('.date').attr('type','date'); //use native html5 datepicker // } else { // console.log('use jquery date picker'); $(ancestor).find('.date').attr('type', 'text'); //use jquery datepicker $(ancestor).find('.date').datepicker(datepicker_template.original); // } //transitions $(ancestor).find('.transition-link').click(function(){ // console.log($(this).attr('href').replace('#','')); transition_to_form($(this).attr('href').replace('#','')); return false; }); // console.log('length: ' + $('form[data-abide="ajax"]').length); //all form with ajax abide should return false $(ancestor).find('form[data-abide="ajax"]').submit(function(){ console.log('submitting...'); //$('.meter').width('20%'); //$('.progress').show(); //start_progress(); return false; }); //add event handlers for invalid and valid $(ancestor).find('form[data-abide="ajax"]').on('invalid', function(){ // console.log('INVALID'); var submit_buttons = $(ancestor).find('.decision-point'); submit_buttons.each(function() { $(this).removeClass('disabled'); }); return false; }).on('valid', function(){ //intercept form submission //activate form // console.log('is valid'); var btn_pressed = $(this).find('.chosen'); var href = $(btn_pressed).attr('href').slice(1); activate_form($(this), href); }); //console.log($(ancestor).find('.modo-q')); //console.log($(ancestor)); if($(ancestor).find('.modo-q').length == 0){ $(ancestor).find('.modo-menu-icon').hide(); } } function is_loaded(id){ return $('#' + id).length > 0; } function save_form(in_data, submit_buttons){ console.log('save form'); start_progress(); var curr_partial_id = in_data.form; //console.log(this); $.post('https://reservations.carshare.org/orientation/step', in_data) .done(function(data){ console.log('in done'); var partial_id = data.choice; // console.log('save form done'); //data - clear //TODO: //don't clear session step if back button pressed //change choice in step if it detects that the partial for signup_personal_confirmation exists //remove any divs and questions and modal answers that may be ahead of this step //call load - if necessary $('.meter').width('100%'); // console.log(data); if(!data.no_clear){ // console.log('clear ' + curr_partial_id); // console.log('Calling clear_proceeding_steps from no clear'); clear_proceeding_steps(curr_partial_id); } //remove progress bar end_progress(); //run any done functions if(signup.fn.dones[in_data.form]){ signup.fn.dones[in_data.form](data); } // console.log("choice: " + in_data.choice); // console.log("loaded: " + is_loaded(partial_id)); if(is_loaded(partial_id)){ //partial is already there // console.log('is loaded'); //find it and clear steps after it // console.log('Calling clear_proceeding_steps from is loaded'); clear_proceeding_steps(partial_id); //clear this step clear_step(partial_id); //transition_to_form(partial_id); return; } //if(!is_loaded(partial_id)){ //what color is the last the question //$('.modo-q-box:last').hasClass('') //append a new div and load // This is where we contact the server $('.main-section').append('<div id="' + partial_id + '" class="step"></div>') $('.main-section #' + partial_id).load(data.url, function( response, status, xhr ){ //date binding bind_common_actions($('#' + partial_id)); //call foundation again $(document).foundation(); transition_to_form(partial_id); console.log('transitioning...'); }); //}else{ //transition_to_form(partial_id); //} //todo: check to make sure it loaded properly }) .fail(function(data){ //register custom fail functions? //419 came back - error with data - don't transition - show error var json = data.responseJSON; if(json.error){ end_progress(); $('.main-section').append('<div id="error" class="step"></div>') $('#error').append('<div data-alert class="alert-box box-color-2">'+ json.error + '<a href="#' + in_data.form + '" class="close">×</a></div>'); //Recaptcha.reload(); } // console.log(in_data.form); if(signup.fn.fails[in_data.form]){ signup.fn.fails[in_data.form](data); } submit_buttons.each(function() { $(this).removeClass('disabled'); }); }); } function load_side_questions(class_name){ //look for question links with a form matching the class_name var links = $('.questions').find('.' + class_name); //create li items under the other side nav for those links $.each(links, function(i, ele){ var li = '<li class="' + class_name + '">' + $(ele).html() + '</li>'; $('.off-canvas-questions').append(li); }); } function remove_side_questions(class_name){ $('.off-canvas-questions').find('.' + class_name).remove(); } //call this when activated side nav function scroll_side_questions(){ var class_name = $('.active-partial').attr('id'); //get active partial class name var q = $('.off-canvas-questions').find('.' + class_name).eq(0); //find the link in the off canvas menu var offset = $(q).offset().top; $('.right-off-canvas-menu').animate({scrollTop: offset}, 500); return; } /** * */ function decide(){ //if button is disabled - do nothing if($(this).hasClass('disabled')){ return false; } $(this).addClass('disabled'); var form = $(this).closest('form'); var href = $(this).attr('href').slice(1); //remove chosen class from all form decision points $(form).find('.decision-point').removeClass('chosen'); $(this).addClass('chosen'); //set this one as chosen //if not data-abide ajax - go right ahead and activate the form. if(form.attr('data-abide') != 'ajax'){ activate_form(form, href); return; } //submit it $(form).submit(); return false; } function clear_proceeding_steps(partial_id){ var index = $('#' + partial_id).index(); // console.log('Clear proceeding steps, index of current partial is: ' + index + ' partial_id: ' + partial_id); if(index + 1 < $('.step').length){ $.each($('.step:gt(' + index + ')'), function(i, step){ var part_id = $(step).attr('id'); /* console.log(class_name); if($.trim(class_name) != ''){ remove_side_questions(class_name); } console.log('trim'); */ clear_step(part_id); }); //$('.step:gt(' + index + ')').remove(); } } function clear_step(partial_id){ remove_side_questions(partial_id); $('#' + partial_id).remove(); } function previous_step(){ //send ajax call to //find previous step var my_element = $(this).closest('.step'); var index = $('.step').index(my_element); var prev_element = $('.step').eq(index - 1); transition_to_form($(prev_element).attr('id')); //send ajax call to remove proceeding step info /* $.post('https://reservations.carshare.org/orientation/remove_step', {partial_id : $(my_element).attr('id')}) .done(function(data){ if(data.success == -1){ //step removed? - remove it from view as well clear_proceeding_steps($(my_element).attr('id')); } }); */ } /** * should rename this... - you're not activating any thing -you're doing some stuff and then posting to the server */ function activate_form(form, href){ var in_data = collect_form_data(form); // console.log('former'); var step_id = $(form).closest('.step').attr('id'); var submit_buttons = $(form).find('.decision-point'); //var curr_index = $(form).closest('.step').index(); //remove steps ahead if this is a previous step /* if(curr_index + 1 < $('.step').length){ $.each($('.step:gt(' + curr_index + ')'), function(i, step){ var class_name = $(step).attr('id'); console.log(class_name); if($.trim(class_name) != ''){ remove_side_questions(class_name); } console.log('trim'); }); $('.step:gt(' + curr_index + ')').remove(); } */ //clear_proceeding_steps(step_id); // console.log('after'); //submit information in_data['choice'] = href; in_data['form'] = $(form).attr('name'); save_form(in_data, submit_buttons); return; } function transition_to_form(href){ //$('.progress').hide(); //deactivate all - activate this one //confirm it exists if($('#' + href).length > 0){ // console.log('focus'); //move page to partial focus_partial(href); var diff = $('.main-section').find('#' + href).offset().top; $('body,html').animate({scrollTop: diff}, 500); //todo: check for visible modals - adjust those too } return; } function focus_partial(id){ //make everything transparent $('.step').removeClass('active-partial'); $('.step').addClass('inactive-partial'); $('.step').find('.decision-point').addClass('disabled'); $('#' + id).removeClass('inactive-partial'); $('#' + id).addClass('active-partial'); $('#' + id).find('.decision-point').removeClass('disabled'); } /** * Grab all the names and values of the inputs/textareas/radiobuttons/selects in the form */ function collect_form_data(form){ var inputs = $(form).find(':input'); //console.log(inputs); var data = {}; $.each(inputs, function(i, ele){ if($.isEmptyObject($(ele).attr('name'))){ console.log('empty'); return true; } //console.log($(ele).attr('name') + ' ' + $(ele).val()); if($(ele).is('input:checkbox')){ data[$(ele).attr('name')] = $(ele).is(':checked') ? -1 : 0; return true; }else if($(ele).is(':radio')){ if($(ele).is(':checked')){ data[$(ele).attr('name')] = $(ele).val(); //console.log( $(ele).val()); } return true; }else{ if($(ele).attr('name').indexOf('[]') != -1){ //input array if(!data.hasOwnProperty($(ele).attr('name'))){ data[$(ele).attr('name')] = []; } //console.log('name: ' + $(ele).attr('name') + ' ' + $(ele).val()); data[$(ele).attr('name')].push($(ele).val()); }else{ data[$(ele).attr('name')] = $(ele).val(); } return true; } }); // console.log('pre'); //console.log(data); return data; } function start_progress(){ var meter = 0; $('.meter').width(meter + '%'); $('.meter').animate({width: '90%'}, 2000, 'linear'); $('.progress').show(); // console.log('prog show'); } function end_progress(){ // console.log('prog hide'); $('.progress').hide(); } </script> </body> </html>

CINXE.COM

Colorado CarShare Online Registration