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
10
www/conservancy/static/supporter/index.html
4
2
0 comments (0 inline, 0 general)
www/conservancy/static/supporter-page.js
➞
Show inline comments
...
 
@@ -11,48 +11,58 @@ $(document).ready(function() {
 
     .addClass('clickable')
 
     .bind('click', function() {
 
        var $control = $(this);
 
        var $parent = $control.parents('.toggle-unit');
 

			




	
	
	
		
 
        $parent.toggleClass('expanded');


			




	
	
	
		
 
        $parent.find('.toggle-content').slideToggle();


			




	
	
	
		
 

			




	
	
	
		
 
        // if control has HTML5 data attributes, use to update text


			




	
	
	
		
 
        if ($parent.hasClass('expanded')) {


			




	
	
	
		
 
            $control.html($control.attr('data-expanded-text'));


			




	
	
	
		
 
        } else {


			




	
	
	
		
 
            $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");


			




	
	
	
		
 
           $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");


			




	
	
	
		
 
        }


			




	
	
	
		
 
        else {


			




	
	
	
		
 
            input.removeClass("valid").addClass("invalid");


			




	
	
	
		
 
            errorElement.removeClass("form-error").addClass("form-error-show");


			




	
	
	
		
 
        }


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $("#supporter-form-submit").click(function(event){


			




	
	
	
		
 
	var valid = $('#amount').hasClass("valid");


			




	
	
	
		
 
        if (! valid) {


			




	
	
	
		
 
            $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")


			




	
	
	
		
 
                                        .css("font-weight", "bold").css("font-size", "150%");


			




        

    


    
    

    

        

                

                    www/conservancy/static/supporter/index.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	...
	
		
 
@@ -128,114 +128,116 @@ internal policies</a> are published and available for scrutiny.</p>


			




	
	
	
		
 
    shirts will ship during Q1 2015.</div></p>


			




	
	
	
		
 

			




	
	
	
		
 
<div class="supporter-type-selector">


			




	
	
	
		
 
<hr/>


			




	
	
	
		
 
  <strong>Become a Supporter Now:</strong>  <a id="annualSelector" href="#annual">Annual</a> | <a id="monthlySelector" href="#monthly">Monthly</a></div>


			




	
	
	
		
 
<div id="annual" class="supporter-type-selection">


			




	
	
	
		
 
<h3>Join as an Annual Supporter</h3>


			




	
	
	
		
 
<a id="annual"></a>


			




	
	
	
		
 
<form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="supporter">


			




	
	
	
		
 
<div id="supporter-form-inputs">


			




	
	
	
		
 
            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />


			




	
	
	
		
 
            <input type="hidden" name="cmd" value="_xclick" />


			




	
	
	
		
 
            <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>


			




	
	
	
		
 
                      <div id="supporter-form-submit">


			




	
	
	
		
 
                      <input type="image"


			




	
	
	
		
 
                             src="/img/supporter-payment-button-annual.png"


			




	
	
	
		
 
                             height="81" width="188"


			




	
	
	
		
 
                             border="0" name="submit" alt="Become an Annual Supporter Now!">


			




	
	
	
		
 
                      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">


			




	
	
	
		
 
<br/><br/><small>Button above redirects to PayPal's site for credit


			




	
	
	
		
 
        card, bank account or PayPal balance payment methods.  Select options first.</small>


			




	
	
	
		
 
                      </div>


			




	
	
	
		
 

			




	
	
	
		
 
</form>


			




	
	
	
		
 
</div>


			




	
	
	
		
 
<div id="monthly" class="supporter-type-selection">


			




	
	
	
		
 
<h3>Join as an Monthly Supporter</h3>


			




	
	
	
		
 
<a id="monthly"></a>


			




	
	
	
		
 
<p>Monthly supporters will not receive any supporter benefits (including the t-shirt) until they've been


			




	
	
	
		
 
  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">


			




	
	
	
		
 
                      <input type="image"


			




	
	
	
		
 
                      src="/img/supporter-payment-button-monthly.png"


			




	
	
	
		
 
                      height="81" width="188"


			




	
	
	
		
 
                      border="0" name="submit" alt="Become a Monthly Supporter Now!">


			




	
	
	
		
 
<br/><br/><small>Button above redirects to PayPal's site for credit


			




	
	
	
		
 
        card, bank account or PayPal balance payment methods.  Select


			




	
	
	
		
 
                      options first.</small>


			




	
	
	
		
 
                      </div>


			




	
	
	
		
 
</form>


			




	
	
	
		
 
</div>


			




	
	
	
		
 
<span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>


			




	
	
	
		
 
</div>


			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







    


    

  


    








    
        Server instance: kapok.sfconservancy.org-22379
    
    
        This site is powered by
            Kallithea 0.6.3,
        which is
        © 2010–2020 by various authors & licensed under GPLv3.
            – Support
        – Privacy Policy