website Changeset - 7fec31ce8aef · Conservancy Kallithea

Changeset - 7fec31ce8aef

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-03 18:33:26
bkuhn@ebb.org

Hide t-shirt size selector when t-shirt's unwanted

Use Javascript to hide the t-shirt size selector when the the user
selects "No" for "Do you want a t-shirt?". Reshow it (and make sure
it's shown by default) for "Yes".

2 files changed with 14 insertions and 2 deletions:

www/conservancy/static/supporter-page.js

www/conservancy/static/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/supporter-page.js

➞

Show inline comments

@@ ... / @@ -23,24 +23,34 @@ $(document).ready(function() { @@
             $control.html($control.attr('data-text'));
+        }
     });
     $('a.donate-now')
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');
         $control.toggleClass('expanded');
         $control.find('.toggle-content').slideUp("slow");
         $control.find('.toggle-content').slideDown("slow");
     });
     $(".t-shirt-size-selector").show();
     $('input[name=os1]:radio').change(function() {
         var input=$(this);
         var value = input.val();
         if (value == "Yes") {
             $(".t-shirt-size-selector").show();
         } else {
             $(".t-shirt-size-selector").hide();
+        }
     });
     $('#amount').addClass("valid");
     $('#amount').on('input', function() {
         var input=$(this);
         var value = input.val();
         var errorElement=$("span", input.parent());
         var noCommaValue = value;
         noCommaValue = value.replace(/,/g, "");
         var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
         var isValid = ( re.test(value) && parseInt(noCommaValue) >= 120);
         if (isValid)  {
            input.removeClass("invalid").addClass("valid");
            errorElement.removeClass("form-error-show").addClass("form-error");

www/conservancy/static/supporter/index.html

➞

Show inline comments

@@ ... @@
             <input type="hidden" name="business" value="supporter@sfconservancy.org" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
   <label for="amount"><strong>Amount:</strong> $</label>
   <input id="amount" type="text" name="amount" size="7" value="120" />
   <span class="form-error"><small>$120 is a minimum for Conservancy
   Supporters.  <a href="/donate">Donate smaller amounts here</a>.</small></span><br/>
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
                       <input type="radio" checked="checked" name="os1" value="Yes" />Yes
                       <input type="radio" name="os1" value="No" />No
                       <br />
                       <span class="t-shirt-size-selector">
                       <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
                       <select name="os3" id="os3">
                         <option name="os3" id="os3" value="MenS">Men's S</option>
                         <option name="os3" id="os3" value="MenM">Men's M</option>
                         <option name="os3" id="os3" value="MenL">Men's L</option>
                         <option name="os3" id="os3" value="MenXL">Men's XL</option>
                         <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>
                         <option name="os3" id="os3" value="LadiesS">Ladies' S</option>
                         <option name="os3" id="os3" value="LadiesM">Ladies' M</option>
                         <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
                       </select><br/>
+                      </select><br/></span>
                       <label for="publicAck"><strong>
                           Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
                       <input type="radio" checked="checked" name="os2" value="Yes" />Yes
                       <input type="radio" name="os2" value="No" />No<br/>
                       <label for="joinList"><strong>Join Conservancy's
                       Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />
                       <input type="radio" checked="checked" name="os4" value="Yes" />Yes
                       <input type="radio" name="os4" value="No" />No<br>
                       <br /></div>
@@ ... @@
   monthly supporters for 12 months.</p>
 <form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
 <div id="supporter-form-inputs">
             <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />
             <input type="hidden" name="cmd" value="_s-xclick">
             <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
             <input type="hidden" name="hosted_button_id" value="UU7VBCXYV7UPQ">
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
                       <input type="radio" checked="checked" name="os1" value="Yes" />Yes
                       <input type="radio" name="os1" value="No" />No
                       <br />
                       <span class="t-shirt-size-selector">
                       <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
                       <select name="os3" id="os3">
                         <option name="os3" id="os3" value="MenS">Men's S</option>
                         <option name="os3" id="os3" value="MenM">Men's M</option>
                         <option name="os3" id="os3" value="MenL">Men's L</option>
                         <option name="os3" id="os3" value="MenXL">Men's XL</option>
                         <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>
                         <option name="os3" id="os3" value="LadiesS">Ladies' S</option>
                         <option name="os3" id="os3" value="LadiesM">Ladies' M</option>
                         <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
                       </select><br/>
+                      </select><br/></span>
                       <label for="publicAck"><strong>
                           Should we  <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
                       <input type="radio" checked="checked" name="os2" value="Yes" />Yes
                       <input type="radio" name="os2" value="No" />No<br/>
                       <label for="joinList"><strong>Join Conservancy's
                       Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />
                       <input type="radio" checked="checked" name="os4" value="Yes" />Yes
                       <input type="radio" name="os4" value="No" />No<br>
                       <br /></div>
                       <div id="supporter-form-submit">

0 comments (0 inline, 0 general)