ChronoForm Hide

Hide/Show Based On Text Input

by melvins138

HTML

<h1>Toggle fields based on form values</h1>
<form method="POST">
<div class="span5" id="FinancialInformation">
	<div class="container-amount" id="container-amount">
		<div class="form-group gcore-form-row" id="form-row-donationamount">
			<label for="donationamount" class="control-label gcore-label-top">Please enter a donation amount (Required)</label>
			<div class="gcore-input-wide gcore-display-table" id="fin-donationamount">
				$<input name="donationamount" id="donationamount" value="" placeholder="25" size="5" class="donationamount validate[&#039;required&#039;,&#039;alphanum&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="Please do not enter the $ symbol" type="text" />
					<span class="help-block">**Donations of $25 Can Send Certificate.</span>
			</div>
	</div>

<div class="memoryCertificate" id="memoryCertificate">
	<p><strong>Send Memorial Certificate To:</strong> (optional with a $25.00 minimum donation)</p>
	<div class="form-group gcore-form-row" id="form-row-memoryname"><label for="memoryname" class="control-label gcore-label-top">Name:</label>
		<div class="gcore-input-wide gcore-display-table" id="fin-memoryname"><input name="memoryname" id="memoryname" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" /></div>
	</div>
</div>

</div>
    <p align="center">
        <input type="submit" value="Join!" />
    </p>
</form>

JavaScript

/**
 * File: js/showhide.js
 * Author: design1online.com, LLC
 * Purpose: toggle the visibility of fields depending on the value of another field
 **/
$(document).ready(function () {
    toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
    //this will call our toggleFields function every time the selection value of our underAge field changes
    $("#donationamount").change(function () {
        toggleFields();
    });

});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
    if ($("#donationamount").val() >= 25)
        $("#memoryCertificate").show();
    else
        $("#memoryCertificate").hide();
}