A singleton / module object and its use plus lots of jQuery from a non-profit client

event_mgr.js

/*
Example of a singleton object and its use for protected member access and
extensive use of jQuery. This code manages validation and ajax submits of form data,
and is used to display / hide panes in a wizard form plus build an extra data field 
with all the form data for email notification.  The code is used on a non-profit
website for it's annual golf and banquet fundraising events.
*/

var eventMgr = (function (global) {
  var donationTotal = 0, 
  guestTotal = 0, 
  playerTotal = 0, 
  actionTarget = '', 
  donor = '', 
  $ = global.$;
    
  return{
    getDonationTotal: function(){
        return donationTotal;
    },
    setDonationTotal: function(v){
        donationTotal = v;
    },
    getGuestTotal: function(){
        return guestTotal;
    },
    setGuestTotal: function(v){
        guestTotal = v;
    },
    getPlayerTotal: function(){
        return playerTotal;
    },
    setPlayerTotal: function(v){
        playerTotal = v;
    },
    getActionTarget: function(){
        return actionTarget;
    },
    setActionTarget: function(v){
        actionTarget = v;
    },
    clearValue: function(e){
          if($(this).val() === 'required'){
            $(this).val('');
          }
          $(this).removeClass('required');
    },
    nextPrevious: function(){
          $(actionTarget.hideDiv).hide();
          $(actionTarget.showDiv).show();
    },
	//builds a string with all form values and labels for a latter email submission
	//ideally it should enumerate over the form fields and utilize an html template 
    addDetails: function(){
          donor += 'Donor Name: ' + $('#DonorFirstName').val() + ' ' + $('#DonorLastName').val() + '<br/>';
          donor += 'Phone: ' + $('#DonorPhone1').val() + '<br/>';
          donor += 'Email: ' + $('#DonorEmail').val() + '<br/>';
          donor += 'Address: ' + $('#DonorAddress').val() + '<br/>';
          donor += 'City: ' + $('#DonorCity').val() + '<br/>';
          donor += 'State: ' + $('#DonorState').val() + '<br/>';
          donor += 'Zipcode: ' + $('#DonorZipcode').val() + '<br/>';
          donor += 'Phone2: ' + $('#DonorPhone2').val() + '<br/>';
          if($('#event_type').val() === 'golf'){
            donor += ($('#wildcard:checked') > 0) ? 'Wildcard: $' + $('#wildcard:checked').metadata().amt + '<br/>' : '';
            donor += 'Number of players: ' + $('input.players:checked').val() + '<br/>';
            donor += 'Number of additional lunch guests: ' + $('select.guests > :selected').val() + '<br/>';
            $('.playerName').each(function(e){
                  donor += 'Player ' + e + ': ' + $(this).val() + '<br/>';
            });
            $('.guestName').each(function(e){
                  donor += 'Lunch guest ' + e + ': ' + $(this).val() + '<br/>';
            });
        }else if($('#event_type').val() === 'banquet'){
            donor += 'Number of places: ' + $('#DonorNumPlaces').val() + '<br/>';
            donor += 'Number of tables: ' + $('#DonorNumTables1').val() + '<br/>';
            donor += 'Number of tables with advertising: ' + $('#DonorNumTables2').val() + '<br/>';
            donor += 'Number of child sponsorships: ' + $('#DonorNumKids').val() + '<br/>';
            donor += 'Number of raffle tickets: ' + $('#DonorNumTix').val() + '<br/>';
            $('.guestName').each(function(e){
                  donor += 'Guest name & meal choice ' + e + ': ' + $(this).val() + ', ' + $('.mealChoice_'+e+':checked').val() + '<br/>';
            });
          }
          donor += $('#DonorVolunteer:checked').val() === 'Yes' ? 'Additional Volunteering info requested. <br/>' : '';
          donor += $('#DonorBoard:checked').val() === 'Yes' ? 'Additional Board of Directors info requested. <br/>' : '';
          donor += 'Total Donation Amount: ' + $('#total_donation').val() + '<br/>';
          donor += 'Prefered payment method: ' + $('.payment:checked').val();
          return donor;
    }
  };
}(window));

$(function(window){
    var eventMgr = window.eventMgr;
    $('input#DonorPhone1').mask("(999) 999-9999");
    $('input#DonorPhone2').mask("(999) 999-9999");
    $('input#DonorZipcode').keyfilter(/[\d]/);
    $('.donation').keyfilter(/[\d]/);
    $('#wildcard').click(function(){
      $(this).toggleClass('donation');
    });
    $('input[name=players]:radio').click(function(){
      $('input[name=players]:radio').removeClass('donation');
      $(this).addClass('donation');
    });
    $('.updateTotal').click(function(){
      eventMgr.setDonationTotal(0);
      $('.donation').each(function(){
        eventMgr.setDonationTotal(eventMgr.getDonationTotal() + $(this).metadata().amt * $(this).val());
      });
      $('.total_donation').val('$ ' + eventMgr.getDonationTotal());
    });
	
	//adds rows to the form for number of guests indicated
    $('#banquetDonation').click(
            function(){
              var x, guestTotal;
              //eventMgr.setGuestTotal(0);
              $('input.guests').each(function(){
                eventMgr.setGuestTotal(eventMgr.getGuestTotal() + ($(this).metadata().guests * $(this).val()) );
              });

              $('#guest_list').empty();
              $('#guest_list').append('<thead><tr><th>&nbsp;</th><th style="text-align:left;">First, Last</th><th>Chicken</th><th>Fish</th><th>Vegetarian</th></tr></thead><tbody id="guestNames">');
              guestTotal = eventMgr.getGuestTotal();
			  //this should use and html template
              for( x = 0; x < guestTotal; x++){
                $('#guest_list').append(
                  '<tr><td style="text-align:left;">' + x + '.</td><td><input class="guestName" id="guestName_'
                            + x + '" type="text" value="" size="30" name="guestName_' + x + '"/></td><td><input type="radio" class="mealChoice_'
                            + x + '" name="mealChoice_' + x + '" value="chicken"/></td><td><input type="radio" class="mealChoice_'
                            + x + '" name="mealChoice_' +  x + '" value="fish"/></td><td><input type="radio" class="mealChoice_'
                            + x + '" name="mealChoice_' + x + '" value="vegetarian"/></td></tr>');
              }
              $('#guest_list').append('</tbody>');
    });

    //adds rows to the form based on number of players indicated
    $('#golfDonation').click(
        function(){
          var guestTotal, playerTotal, x;
          //eventMgr.setPlayerTotal(0);
          $('input.players:checked').each(function(){
            eventMgr.setPlayerTotal( $(this).metadata().players );
          });
          //eventMgr.setGuestTotal(0);
          $('select.guests > :selected').each(function(){
            eventMgr.setGuestTotal( eventMgr.getGuestTotal() + $(this).val() );
          });
          $('#guest_list').empty();
		  //this should use and html template
          $('#guest_list').append('<thead><tr><th>&nbsp;</th><th style="text-align:left;">Players: First, Last</th></tr></thead><tbody>');
		  playerTotal = eventMgr.getPlayerTotal();
          for( x = 0; x < playerTotal; x++){
            $('#guest_list').append(
              '<tr><td style="text-align:left;">' + x + '.</td><td><input class="playerName" id="playerName_'
                        + x + '" type="text" value="" size="30" name="playerName_' + x + '"/></td></tr>');
          }
          if(eventMgr.getGuestTotal() > 0){
            $('#guest_list').append('<tr><td>&nbsp;</td><td style="text-align:left;">Lunch guests: First, Last</td></tr>');
            guestTotal = eventMgr.getGuestTotal();
            for( x = 0; x < guestTotal; x++){
              $('#guest_list').append(
                '<tr><td style="text-align:left;">' + x + '.</td><td><input class="guestName" id="guestName_'
                          + x + '" type="text" value="" size="30" name="guestName_' + x + '"/></td></tr>');
            }
          }
          $('#guest_list').append('</tbody>');
    });

    $('#mealChoices').click(function(){
      $('input.guestName').each(function(i){
        //var x = i + 1;
        //var name = $(this).val();
        //var choice = $('input.mealChoice_' + x + ':checked').val();
      });
    });

    //$("ul.css-tabs:first").tabs("div.css-panes:first > div");
    $("input.required").focus(eventMgr.clearValue);
 
     //validate and submit the donor form
     $("#newDonorForm").validate( {
      submitHandler: function(form){
        $(form).ajaxSubmit({
          url: $(this).attr('action'),
          target: null,
          beforeSubmit: null,
          success: function(dataReceived){
            $("input#donor_id").val(dataReceived);
            eventMgr.nextPrevious();
          },
          dataType: 'html'
        });
        eventMgr.nextPrevious();
      }
    });
    
	//validate and submit the signup form
    $("#EventSignupForm").validate( {
      submitHandler:function(form){
        $('#event_details').val(eventMgr.addDetails());
        $(form).ajaxSubmit({
          url: $(this).attr('action'),
          target: '#payment',
          beforeSubmit: null,
          success: function(dataReceived){
            $("#payment").html(dataReceived);
          },
          error: function(dataReceived){
            $("#payment").html('There was an error communicating with the server: ' + dataReceived);
          },
          dataType: 'html'
        });
      }
    });
    
	//handle form navigation
    $("a.action").click(function(e){
        var target = $(this).metadata();
        $("input.required").each(eventMgr.clearValue);
        eventMgr.setActionTarget(target);
		if(typeof target.formId){
            $(target.formId).submit();
		} else {
            eventMgr.nextPrevious();
		}
    });
  
/*    $("#byCC").click(function(e){
          $("#item_price_1")[0].value = eventMgr.getDonationTotal();
          $("#BB_BuyButtonForm")[0].submit();
          return;
    });
    $('.payment').click(function(){
        $('#check').show();
    });
*/
});