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".
This commit is contained in:
Bradley M. Kuhn 2014-12-03 13:33:26 -05:00
parent fcbb3b5085
commit 7fec31ce8a
2 changed files with 14 additions and 2 deletions

View file

@ -32,6 +32,16 @@ $(document).ready(function() {
$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);

View file

@ -149,6 +149,7 @@ internal policies</a> are published and available for scrutiny.</p>
<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">
@ -161,7 +162,7 @@ internal policies</a> are published and available for scrutiny.</p>
<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" />
@ -202,6 +203,7 @@ internal policies</a> are published and available for scrutiny.</p>
<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">
@ -214,7 +216,7 @@ internal policies</a> are published and available for scrutiny.</p>
<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" />