Changeset - 8c3ecd347abd
[Not reviewed]
0 3 0
Bradley Kuhn (bkuhn) - 9 years ago 2014-12-04 01:42:33
bkuhn@ebb.org
Return amount to id; add id for error span.

I actually think I want amount to be id rather than a class, now that I
figured out the proper selector to find them all.

Also, the $("span", input.parent()) was buggy if there were any other
span's other than error-related ones in the supporter-form-inputs div.

Finally, ditch that <small> stuff and simply place a font-size reduction
into the CSS for the form-error-show.
3 files changed with 10 insertions and 9 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/forms.css
Show inline comments
...
 
@@ -4,48 +4,49 @@
 
    text-align: right;
 
}
 
#supporter-form-inputs {
 
    float: left;
 
}
 
#supporter-form-submit {
 
    padding-left: 20em;
 
    padding-top: 40px;
 
    float: center;
 
}
 

	
 
#supporter-form div {
 
    margin-top: 1em;
 
}
 

	
 
.form-error {
 
    display: none;
 
    margin-left: 10px;
 
    color: green;
 
}		
 

	
 
.form-error-show {
 
    color: red;
 
    margin-left: 10px;
 
    font-size: 75%;
 
}
 

	
 
input.invalid, textarea.invalid {
 
    border: 2px solid red;
 
}
 

	
 
input.valid, textarea.valid {
 
    border: 2px solid green;
 
}
 

	
 
.supporter-type-selector {
 
    font-size: 125%;
 
    text-align: center;
 
    width: 80%;
 
    align: left;
 
}
 

	
 
.supporter-type-selection {
 
    clear: both;
 
    padding-bottom: 60px;
 
    width: 80%;
 
    align: left;
 
}
 

	
www/conservancy/static/supporter-page.js
Show inline comments
...
 
@@ -23,53 +23,53 @@ $(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").hide();
 
    $('input[name=os1]:radio').change(function() {
 
        var input=$(this);
 
        var value = input.val();
 
        if (value == "Yes") {
 
            $(".t-shirt-size-selector").show();
 
            $("#no_shipping").val("2");
 
        } else {
 
            $(".t-shirt-size-selector").hide();
 
            $("#no_shipping").val("0");
 
        }
 
    });
 
    $('.amount').addClass("valid");
 
    $('.amount').on('input', function() {
 
    $('*#amount').addClass("valid");
 
    $('*#amount').on('input', function() {
 
        var input=$(this);
 
        var value = input.val();
 
        var errorElement=$("span", input.parent());
 
        var errorElement=$("span#error", 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) >= parseInt(input.attr("minimum")));
 
        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%");
 
	    event.preventDefault();
 
        } else {
 
            $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
 
        }
www/conservancy/static/supporter/index.html
Show inline comments
...
 
@@ -120,51 +120,51 @@ of dollars in licensing fees for subpar accounting software.</li>
 
our
 
<a 
 
href="https://gitorious.org/conservancy/policies/source/master:">
 
internal policies</a> are published and available for scrutiny.</p>
 

	
 
<p>Please <a href="#donate-box" class="donate-now">join our Supporter program</a> and spread software freedom!</p>
 

	
 
<p class="footnote"><sup><a href="#return-footnote-shirts-when">1</sup></a><a id="footnote-shirts-when"></a><span class="footnote-1-text">The
 
    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" />
 
            <input id="no_shipping" type="hidden" name="no_shipping" value="0" />
 
  <label for="amount"><strong>Amount:</strong> $</label>
 
  <input class="amount" type="text" name="amount" size="7" minimum="120" 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/>
 
  <input id="amount" type="text" name="amount" size="7" minimum="120" value="120" />
 
  <span id="error" class="form-error">$120 is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</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" name="os1" value="Yes" />Yes
 
                      <input type="radio" checked="checked" 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/></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
...
 
@@ -187,51 +187,51 @@ internal policies</a> are published and available for scrutiny.</p>
 
                      </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="business" value="supporter@sfconservancy.org" />
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
 
            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />
 
            <input type="hidden" name="cmd" value="_xclick-subscriptions">
 
            <input id="no_shipping" type="hidden" name="no_shipping" value="0" />
 
            <input type="hidden" name="lc" value="US">
 
            <input type="hidden" name="no_note" value="1">
 
            <input type="hidden" name="t3" value="M" />
 
            <input type="hidden" name="p3" value="1" />
 
            <input type="hidden" name="src" value="1" />
 
            <input type="hidden" name="srt" value="0" />
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
 
  <label for="amount"><strong>Monthly Amount:</strong> $</label>
 
  <input class="amount" type="text" name="a3" size="5" minimum="10" value="10" />
 
  <span class="form-error"><small>$10/month is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</small></span><br/>
 
  <input id="amount" type="text" name="a3" size="5" minimum="10" value="10" />
 
  <span id="error" class="form-error">$10/month is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</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" name="os1" value="Yes" />Yes
 
                      <input type="radio" checked="checked" 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/></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/>
0 comments (0 inline, 0 general)