Allie Ruth Order Form Beta

by lukerichison

HTML

<script src="http://lcdsantos.github.io/jQuery-Selectric/js/jquery.selectric.js"></script>
<form class="webform-client-form webform-client-form-94" enctype="multipart/form-data" action="/content/custom-suite-2" method="post" id="webform-client-form-94" accept-charset="UTF-8"><div><fieldset class="webform-component-fieldset form-wrapper" id="webform-component-suite-container"><div class="fieldset-wrapper">
<div class="form-item webform-component webform-component-markup" id="webform-component-suite-container--suite">
 <h3>Suite Options</h3>

</div>
    <div class="form-item webform-component webform-component-number webform-container-inline" id="webform-component-suite-container--total-price">
 <span class="field-prefix">$</span> <input readonly="readonly" type="number" id="edit-submitted-suite-container-total-price" name="submitted[suite_container][total_price]" step="any" class="form-text form-number">
</div>
<fieldset class="webform-component-fieldset form-wrapper" id="webform-component-suite-container--suite-row1"><div class="fieldset-wrapper"><div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-suite-container--suite-row1--order-name">
  <label for="edit-submitted-suite-container-suite-row1-order-name">Order Name </label>
 <input type="text" id="edit-submitted-suite-container-suite-row1-order-name" name="submitted[suite_container][suite_row1][order_name]" value="" size="60" maxlength="128" class="form-text">
</div>
<div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-suite-container--suite-row1--contact">
  <label for="edit-submitted-suite-container-suite-row1-contact">Contact (phone or email) </label>
 <input type="text" id="edit-submitted-suite-container-suite-row1-contact" name="submitted[suite_container][suite_row1][contact]" value="" size="60" maxlength="128" class="form-text">
</div>
<div class="form-item webform-component...

CSS

/*======================================
  Selectric
======================================*/
form.webform-client-form-94 .selectricWrapper {
  position: relative;
  cursor: pointer;
}

form.webform-client-form-94 .selectricResponsive {
  width: 100%;
}

form.webform-client-form-94 .selectric {
  position: relative;
}
form.webform-client-form-94 .selectric .button {
  display: none;
}
form.webform-client-form-94 .selectricHover .selectric {
  border-color: #C4C4C4;
}
form.webform-client-form-94 .selectricHover .selectric .button {
  color: #A2A2A2;
}
form.webform-client-form-94 .selectricHover .selectric .button:after {
  border-top-color: #A2A2A2;
}

form.webform-client-form-94 .selectricOpen {
  z-index: 9999;
}
form.webform-client-form-94 .selectricOpen .selectric {
  border-color: #C4C4C4;
}
form.webform-client-form-94 .selectricOpen .selectricItems {
  display: block;
      font-family: "Sweet Sans";
}

form.webform-client-form-94 .selectricDisabled {
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

form.webform-client-form-94 .selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
form.webform-client-form-94 .selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}

form.webform-client-form-94 .selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  *font: 0/0 a !important;
  background: none !important;
}

form.webform-client-form-94 .selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}

/* Items box */
form.webform-client-form-94 .selectricItems {
  display: none;
  position:...

JavaScript

/* =========================================================
                   Reusable Variable List                   
========================================================= */
var Calligraphy =       $("#edit-submitted-suite-container-suite-row2-calligraphy"),
    CalligraphyIcons =  $("#edit-submitted-suite-container-suite-row3-calligraphy-icons"),
    SuiteBack =         $("#edit-submitted-suite-container-suite-row3-back"),
    
    InvitePrint =       $("#edit-submitted-invitation-container-invitation-row1-invitation-printing"),
    InviteColor2 =      $("#edit-submitted-invitation-container-invitation-row1-invitation-second-color"),
    InviteCrest =       $("#edit-submitted-invitation-container-invitation-row1-invitation-crest-1"),
    InviteBack =        $("#edit-submitted-invitation-container-invitation-row2-invitation-back"),
    InviteAddress =     $("#edit-submitted-invitation-container-invitation-row2-invitation-addressing-1"),
    InviteRow3 =        $("#webform-component-invitation-container--invitation-row3"),
    
    SavePrint =         $("#edit-submitted-savethedate-container-savethedate-row1-savethedate-printing"),
    SaveColor2 =        $("#edit-submitted-savethedate-container-savethedate-row1-savethedate-second-color"),
    SaveCrest =         $("#edit-submitted-savethedate-container-savethedate-row1-savethedate-crest-1"),
    SaveBack =          $("#edit-submitted-savethedate-container-savethedate-row2-savethedate-back"),
    SaveBackPostcards = [SaveBack.find("option[value='13']"), SaveBack.find("option[value='14']")],
    SaveAddress =       $("#edit-submitted-savethedate-container-savethedate-row2-rsvp-addressing-1"),
    SaveEnvelopeColor = $("#edit-submitted-savethedate-container-savethedate-row2-savethedate-envelope-color"),
    SaveRow3 =          $("#webform-component-savethedate-container--savethedate-row3"),
    
    RsvpPrint =         $("#edit-submitted-rsvp-container-rsvp-row1-rsvp-printing"),
    RsvpEnvelopeColor =...