

<!-- Connect to WebPayment table on WEBSQL -->


<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="" lang="en">
<!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sault College - Donation</title>

    <link rel="stylesheet" type="text/css" href="scripts/css/MyFontsWebfontsKit/MyFontsWebfontsKit.css">
    <link href="boilerplate.css" rel="stylesheet" type="text/css">

    <!-- Bootstrap CSS -->
    <link href="scripts/css/bootstrap.css" rel="stylesheet" type="text/css">

    <script src="/respond.min.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/jquery.smartmenus.js"></script>
    <script type="text/javascript" src="scripts/js/SCscripts.js"></script>

    <!--Bootstrap JS-->
    <script type="text/javascript" src="scripts/js/bootstrap.min.js"></script>

    <!-- Icon library for favicon icons -->
    <link href="https://use.fontawesome.com/releases/v5.3.0/css/all.css" rel="stylesheet"/>

    <!--Bootstrap Formhelpers - phone (Field Formatter)-->
    <script type="text/javascript" src="scripts/js/bootstrap-formhelpers-phone.js"></script>

    <script type="text/javascript" language="javascript" src="scripts/js/validateEmail.js"></script>
    <script type="text/javascript" language="javaScript" src="scripts/js/OnlineRegistration.js"></script>

    <script>
//<![CDATA[

//*******************************************************************************
// This function validates all the form data before submitting to the set up page
//*******************************************************************************
function validate_form() {

    var I;
    var selText;

    //Validate First Name - Letters Only
    var firstName = document.getElementById('firstname');
    firstName.value = trim(firstName.value);
    if (notEmpty(firstName, "Please enter a First Name") == false)
        return false;
    else
    if (isAlphabet(firstName, "Only letters permitted in First Name") == false)
        return false;

    //Validate the Last Name - Letters Only
    var lastName = document.getElementById('lastname');
    lastName.value = trim(lastName.value);
    if (notEmpty(lastName, "Please enter a Last Name") == false)
        return false;
    else
    if (isAlphabet(lastName, "Only letters permitted in Last Name") == false)
        return false;

    //Validate the Email
    var email = document.getElementById('IdEmail');
    email.value = trim(email.value);
    if (notEmpty(email, "Please enter an email") == false)
        return false;
    else
    if (emailValidator(email, "Invalid email format") == false)
        return false;

    //Validate the amount
    var amount = document.getElementById('IdDonationAmount').value;
    if(amount == null || amount == "" || amount == 0 ){
      alert ("Please enter a Donation Amount");
      document.getElementById('IdDonationAmount').select();
      return false;
    }		
    else
    {
	    if (isNaN(amount) || amount < 0.01)
		{
	        alert("Invalid Donation Amount");
	        document.getElementById('IdDonationAmount').select();
	        return false;
	    } 
    }	

    //Validate the Street Number
    var streetnumber = document.getElementById('street_number');
    streetnumber.value = trim(streetnumber.value);
    if (notEmpty(streetnumber, "Please enter a street number") == false)
        return false;
    else
    if (isNumeric(streetnumber, "Only numbers permitted in the Street Number") == false)
        return false;

    //Validate the Address - Letters or Number only
    var address = document.getElementById('route');
    address.value = trim(address.value);
    if (notEmpty(address, "Please enter an address") == false)
        return false;
    else
    if (isAlphanumeric(address, "Only letters and numbers permitted in Address") == false)
        return false;

    //Validate the City - Letters Only
    var city = document.getElementById('locality');
    city.value = trim(city.value);
    if (notEmpty(city, "Please enter a City Name") == false)
        return false;
    else
    if (isAlphabet(city, "Only letters permitted in City") == false)
        return false;

    //Validate the Province / State
    var province = document.getElementById('administrative_area_level_1');
    province.value = trim(province.value);
    if (notEmpty(province, "Please enter a Province / State") == false)
        return false;
    else
    if (isAlphabet(province, "Only letters are permitted in Province / State") == false)
        return false;

    //Validate the Country
    var country = document.getElementById('country');
    country.value = trim(country.value);
    if (notEmpty(country, "Please enter a Country") == false)
        return false;
    else
    if (isAlphabet(country, "Only letters are permitted in Country") == false)
        return false;

    //Validate the Postal Code - Letters and Numbers only
    var postalCode = document.getElementById('postal_code');
    postalCode.value = trim(postalCode.value);
    postalCode.Value = postalCode.value.toUpperCase();
    if (notEmpty(postalCode, "Please enter a Postal Code") == false)
        return false;
    else
    if (isAlphanumeric(postalCode, "Only letters and numbers permitted in Postal Code") == false)
        return false;

    document.getElementById("amount").value = document.getElementById('IdDonationAmount').value;

    $("#myModal1").modal("show");
}

    //submit function
    function submit() {
        document.donorForm.submit();
        }
  
  //function changes background color when field gets focus
  function setBGColor(obj){
    obj.style.backgroundColor = "#FFFFBA";
  }

  //function returns background color to white when loosing focus
  function resetBGColor(obj){
    obj.style.backgroundColor = "";
  }	   
	
	function cleanSQLText(sqlText)
	{
	  sqlText = sqlText.replace(/['"-;]/g, "");
		return sqlText;   
	}
	
	
	//******************************************************************************************
	//The following functions provided by http://www.tizag.com/javascriptT/javascriptform.php
	
	// This function ensures the values are only Letters or Numbers
	function isAlphanumeric(elem, helperMsg){
	  var alphaExp = /^[0-9a-zA-Z .]+$/;
	  if(elem.value.match(alphaExp)){
		  return true;
	  }else{
		  alert(helperMsg);
		  elem.focus();
		  return false;
	  }
  }
	
	//Removes leading and trailing spaces
	function trim(stringToTrim) {
	  return stringToTrim.replace(/^\s+|\s+$/g,"");
  }

    //Removes everything accept numbers
	function trimNonNumbers(stringToTrim) {
	  return stringToTrim.replace(/\D+/g,"");
  }
	
	// If the length of the element's string is 0 then display helper message
  function notEmpty(elem, helperMsg){
	  if(elem.value.length == 0){
		  alert(helperMsg);
		  elem.focus(); // set the focus to this input
		  return false;
	  }
	  return true;
  }
	
	//Verify the string only contains letters and spaces
  function isAlphabet(elem, helperMsg){
	  var alphaExp = /^[a-zA-Z .]+$/;
	  if(elem.value.match(alphaExp)){
		  return true;
	  }else{
		  elem.focus();
          alert(helperMsg);
		  return false;
	  }
  }
	
	//Verify the string contains only numbers
  function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
      return true;
    }else{
      alert(helperMsg);
      elem.focus();
      return false;
    }
  }
		
  //Validate the email address
  function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
      return true;
    }else{
      alert(helperMsg);
      elem.focus();
      return false;
    }
  }
		
//]]>
    </script>

    <script>
        var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>
</head>

<body style="width:94%">
    <div class="container">
        <div id="contentwrap">
            <div id="leftCol4" role="main">
                <div id="leftCol4R" role="contentinfo">
                    <div id="leftCol4M" class="bootstrap">
                        <br />
                        <p style="font-size: 1.25rem">Donations will support our athletics scholarship programs.</p>
                        <br />

                        <form method="post" name="donorForm" id="donorForm" action="Donation_SetUp.asp">

                            <!-- ***************** HIDDEN FORM FIELDS ***************** -->

                            <input type="hidden" name="hdnFundDesc" id="hdnFundDesc" value="Athletics Scholarship Donation" />
                            <input type="hidden" name="fundName" id="hdnFundName" value="L" />
                            <input type="hidden" name="amount" id="amount" />

                            <!-- ***************** CONTACT FIELDS ***************** -->

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-6">
                                    <label for="firstname">First Name <label style="color:#9B0000">*</label></label>
                                    <input name="firstname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="firstname" maxlength="49"/>
                                    <small id="IdFirstNameError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="lastname">Last Name <label style="color:#9B0000">*</label></label>
                                    <input name="lastname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="lastname" maxlength="49"/>
                                    <small id="IdLastNameError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12">
                                    <label for="IdEmail">Email address <label style="color:#9B0000">*</label></label>
                                    <input name="email" onkeydown="EnterHandler();" type="email" class="form-control form-control-lg" id="IdEmail" aria-describedby="emailHelp" placeholder="example@email.com" maxlength="49">
                                    <small id="IdEmailError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-6">
                                    <label for="IdPhoneNumber">Phone Number <label style="color:#9B0000">*</label></label>
                                    <input name="IdPhoneNumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg bfh-phone" data-format="(ddd) ddd-dddd">
                                    <small id="IdPhoneNumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="IdDonationAmount">Amount <label style="color:#9B0000">*</label></label>
                                    <div class="input-group">
                                        <input name="IdDonationAmount" id="IdDonationAmount" onkeydown="EnterHandler();" onblur="RegexAmount();" type="text" class="form-control form-control-lg" maxlength="5">
                                        <span class="input-group-append">
                                            <span class="input-group-text" style="font-size:1.25rem">$</span>
                                        </span>
                                    </div>
                                    <small id="IdDonationAmountError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-2"></div>
                            </div>

                            <!--Horizontal Line Spacer-->
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-10" style="margin:0px;">
                                    <hr />
                                </div>
                            </div>
                            <!--./Horizontal Line Spacer-->

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h4 class="panel-title" style="font-weight: 600">Address</h4>
                                </div>
                                <div class="panel-body">
                                    <input id="autocomplete" onkeydown="EnterHandler();" placeholder="Search Address (Autofill)"
                                        onfocus="geolocate()" type="text" class="form-control form-control-lg" maxlength="300">
                                    <br>
                                    <div id="address">
                                        <div class="form-row">
                                            <div class="form-group col-md-3">
                                                <label class="control-label" for="street_number">Street Number <label style="color:#9B0000">*</label></label>
                                                <input name="street_number" onkeydown="EnterHandler();" class="form-control form-control-lg" id="street_number" maxlength="9">
                                            </div>
                                            <div class="form-group col-md-9">
                                                <label class="control-label" for="route">Street Name <label style="color:#9B0000">*</label></label>
                                                <input name="route" onkeydown="EnterHandler();" class="form-control form-control-lg" id="route" maxlength="40">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="locality">City <label style="color:#9B0000">*</label></label>
                                                <input name="locality" onkeydown="EnterHandler();" class="form-control form-control-lg field" id="locality" maxlength="49">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="administrative_area_level_1">Province / State <label style="color:#9B0000">*</label></label>
                                                <input name="administrative_area_level_1" onkeydown="EnterHandler();" class="form-control form-control-lg" id="administrative_area_level_1" maxlength="49">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="country">Country <label style="color:#9B0000">*</label></label>
                                                <input name="country" onkeydown="EnterHandler();" class="form-control form-control-lg" id="country" maxlength="49">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="control-label" for="postal_code">Postal Code <label style="color:#9B0000">*</label></label>
                                                <input name="postal_code" onkeydown="EnterHandler();" class="form-control form-control-lg" id="postal_code" maxlength="9">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />

                            <!-- ***************** SUBMIT FIELDS ***************** -->
                            <div class="form-row justify-content-left">
                                <div class="col-md-4">
                                    <input type="button" class="btn btn-lg btn-primary" name="btnSubmit" value="Submit" alt="Submit This Form" onclick="return validate_form();" />&nbsp;&nbsp;&nbsp;
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group text-right" style="color:#9B0000">* Indicates required field</div>
                                </div>
                            </div>

                            <!--Confirm Modal-->
                            <div class="modal fade" id="myModal1" role="dialog">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title text-primary">Payment Redirect
                                            </h4>
                                            <button type="button" class="close"
                                                data-dismiss="modal" aria-hidden="true">
                                                <span class="fa fa-times"></span>
                                            </button>
                                        </div>
                                        <div class="modal-body help" style="font-size: 1.25rem;">
                                            You will be redirected to our chase site to complete your donation. <br /><br />Would you like to continue?
                                        </div>
                                        <div class="modal-footer justify-content-between">
                                            <button type="button" class="btn btn-lg btn-primary" onclick="return submit()">Continue</button>
                                            <button class="btn btn-lg btn-light" data-dismiss="modal">Back</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFAHzYLeWyNIuyQJo1XitvDocuyH4ELRw&libraries=places&callback=initAutocomplete" async defer></script>

    <!--Stop entry key from being pressed and submitting form-->
    <script>
    function EnterHandler(){
        if (window.event.keyCode == 13){
            window.event.returnValue =false;
            return null;
        }
    }
        function RegexAmount() {
            if (!$("#IdDonationAmount").val() == "")
                if (!/(\.\d\d)/g.test($("#IdDonationAmount").val()))
                    $("#IdDonationAmount").val($("#IdDonationAmount").val() + ".00")
        }
    </script>

</body>
</html>
