File: /home/awaldron/_domains/pennhillscdc.org/wp-content/themes/phcdc/page-templates/membership-pay.php
<?php
/**
* Template Name: Individual Memberships Online Pay
*
* Template for displaying a page without sidebar even if a sidebar widget is published.
*
* @package understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<?php if ( is_front_page() ) : ?>
<?php get_template_part( 'global-templates/hero' ); ?>
<?php endif; ?>
<div class="sub-image" style="background-image: url(<?php echo get_the_post_thumbnail_url( $post->ID, 'full' ); ?>)">
<div class="container">
<div class="row">
<div class="col-sm-8 text-center"></div>
</div>
</div>
</div>
<div class="wrapper" id="full-width-page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content">
<div class="row">
<div class="col-md-6 content-area" id="primary">
<main class="site-main" id="main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'loop-templates/content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<div class="col-md-5 offset-1 content-area">
<form id="membershipForm" action="/charge.php" method="post">
<h2>Register Now!</h2>
<p>Ready to join the PHCDC? Fill out the form below for instant membership.</p>
<hr>
<div class="form-group">
<label>Choose your plan:</label>
<select name="plan" id="plan" class="form-control">
<option value="1">Individual Membership ($20.00/year)</option>
<option value="2">Household Membership ($30.00/year)</option>
</select>
</div>
<div class="form-group">
<label style="width:170px;">Number of Years:</label> <input type="number" id="years" name="years" max="5" min="1" value="1" class="form-control" style="display:inline-block;width:150px;" />
</div>
<div class="form-group">
<label style="width:170px;">Membership Subtotal:</label> <b>$</b> <input type="text" id="subtotal" name="subtotal" value="20.00" class="form-control" disabled="disabled" style="display:inline-block;width:150px;" />
</div>
<div class="form-group">
<label style="width:170px;">Additional Donation:</label> <b>$</b> <input type="number" value="0.00" name="donation" step=".01" id="donation" class="form-control"style="display:inline-block;width:150px;" />
</div>
<div class="form-group">
<label style="width:170px;">Payment Total:</label> <b>$</b> <input type="text" id="total-dummy" name="total-dummy" value="20.00" class="form-control" disabled="disabled" style="display:inline-block;width:150px;" />
</div>
<hr>
<div class="row" id="plan1">
<div class="col-sm-6">
<div class="form-group">
<label>First Name</label>
<input type="text" name="fname0" class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname0" class="form-control" />
</div>
</div>
</div>
<div class="row" id="plan2">
<div class="col-sm-6">
<div class="form-group">
<label>Member 1: First Name</label>
<input type="text" name="fname1" class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname1" class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Member 2: First Name</label>
<input type="text" name="fname2" class="form-control" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname2" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>Address 1</label>
<input type="text" name="add1" class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Address 2</label>
<input type="text" name="add2" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label>City</label>
<input type="text" name="city" class="form-control" value="Penn Hills" />
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>State</label>
<input type="text" name="state" class="form-control" value="PA" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Zip</label>
<input type="text" name="zip" class="form-control" value="15235" />
</div>
</div>
</div>
<hr>
<div class="form-group">
<label>Credit Card</label>
<span id="card-element" class="form-control"></span>
</div>
<div id="card-errors"></div>
<input type="hidden" id="total" name="total" value="20" />
<p><input type="submit" class="btn btn-primary" id="checkoutButton" value="Submit" /></p>
</form>
</div>
</div><!-- .row end -->
</div><!-- #content -->
</div><!-- #full-width-page-wrapper -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#plan').change(function() {
var plan = $(this).val();
if (plan==1) {
$('#plan1').css('display','flex');
$('#plan2').css('display','none');
}
if (plan==2) {
$('#plan1').css('display','none');
$('#plan2').css('display','flex');
}
});
$('#plan, #years, #donation').change(function() {
var plan = parseFloat($('#plan').val());
var years = parseFloat($('#years').val());
var donation = parseFloat($('#donation').val());
var subtotal = (plan==1 ? 20 : 30) * years;
var total = subtotal + donation;
$('#subtotal').val(subtotal);
$('#total, #total-dummy').val(total);
});
});
</script>
<style type="text/css">
#plan2 {
display: none;
}
.form-group label {
color: #3f7038;
}
</style>
<?php get_footer(); ?>