City
Parking
Convenience!

Parking Entrance

Our parking lots are placed in the best locations of the city with automated systems that provide easy self-serve access to parking spaces.

Monthly Passes Available!

Convenient
Spacious
EV Ready

Image
Image

Central Parking Key Features

Our lots are designed to provide easy access from city streets, parking spaces are sized generously to accommodate larger vehicles and charging stations are available for those with EV needs. Our access control systems are easy to use and accept various forms of payment for visitors.

{source}<style>
#mpr_form_container{
font-size:9pt !important;
}
#license_details, #registrant_details {
display: flex;
gap: 20px; /* spacing between columns */
}
.mpr_col {
flex: 1; /* each column takes equal width */
}
#monthly_parking_registration label {
display: block;
margin-bottom: 5px;
}
#monthly_parking_registration input {
width: 100%;
box-sizing: border-box;
}
#monthly_parking_registration p {
font-weight: normal;
}
.failed {
border: 2px solid red;
background-color: #ffe6e6;
}
#monthly_parking_registration input.failed,
#monthly_parking_registration select.failed,
#monthly_parking_registration textarea.failed {
border: 2px solid red !important;
background-color: #ffe6e6 !important;
}
#monthly_parking_registration input.is-new {
border:none;
background-color: #F5F5F5;
color: #F5F5F5;
max-width:1px !important;
max-height:1px !important;
overflow:hidden;
}
#mpr_notes {
width:100%;
height:60px;
border:1px solid #D0D0D0;
border-radius:4px;
}

#monthly_parking_registration input,
#monthly_parking_registration select,
#monthly_parking_registration textarea {
font-size:9pt;
}
</style>
<div id="form_intro">
<h2>Monthly Parking License Registration Form</h2>
</div>
<div id="mpr_form_container">
<form id="monthly_parking_registration">
<h3>License Details</h3>
<p>Please let us know how many parking spaces you require along with the preferred start date and end date (if applicable) of the license.</p>
<p style="text-align:center">***Note*** Required fields are indicated with an "*".</p>
<div id="license_details">
<div id="mpr_license_col1" class="mpr_col">
<p><label>*Parking Spaces Required</label><input type="text" id="mpr_qty" name="qty" tabindex="1" class="required" /></p>
</div>
<div id="mpr_license_col2" class="mpr_col">
<p><label>*Preferred Start Date</label><input type="date" id="mpr_start_date" name="start_date" tabindex="2" class="required" /></p>
</div>
<div id="mpr_license_col3" class="mpr_col">
<p><label>End Date (if applicable)</label><input type="date" id="mpr_end_date" name="end_date" tabindex="3" class="not-required" /></p>
</div>
</div>
<h3>Registrant Details</h3>
<p>Please provide the contact details of the individual who will be associated with the monthly parking license.</p>
<div id="registrant_details">
<div id="mpr_registrant_col1" class="mpr_col">
<p><label>*Salutation</label>
<select id="mpr_salutation" name="salutation" tabindex="4" class="required">
<option value=""></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Mss">Mss</option>
<option value="other">Other (X)</option>
</select>
</p>
<p><label>*Street Address</label><input type="text" id="mpr_address" name="address" tabindex="7" class="required" /></p>
<p><label>*Country</label><input type="text" id="mpr_country" name="country" tabindex="9" class="required" /></p>
<p><label>*Email Address</label><input type="text" id="mpr_email" name="email" tabindex="11" class="required" /></p>


</div>
<div id="mpr_registrant_col2" class="mpr_col">
<p><label>*First Name</label><input type="text" id="mpr_firstname" name="firstName" tabindex="5" class="required" /></p>
<p><label>*City</label><input type="text" id="mpr_city" name="city" tabindex="8" class="required" /></p>
<p><label>*Postal/Zip</label><input type="text" id="mpr_postal" name="postal" tabindex="10" class="required" /></p>
<p><label>*Phone Number <span style="font-size:7pt; font-style:italics">###-###-####</span></label><input type="text" id="mpr_phone" name="phone" tabindex="12" class="required" /></p>
</div>
<div id="mpr_registrant_col3" class="mpr_col">
<p><label>*Last Name</label><input type="text" id="mpr_lastname" name="lastName" tabindex="6" class="required" /></p>
<p><label>*Province/State</label><input type="text" id="mpr_prov" name="prov_state" tabindex="10" class="required" /></p>
<p><label>Additional Details <span style="font-size:7pt; font-style:italics">(155 chars)</span></label><textarea id="mpr_notes" name="notes" tabindex="13" class="not-required"></textarea></p>
<div id="char_counter">0 / 155 characters</div>
</div>
</div>
<hr />
<div id="company_option">
<div id="mpr_company_col1" class="mpr_col">
<p><label>If this license is being registered under a company, please include the company name below</label><input type="text" id="mpr_company" name="company" tabindex="14" class="not-required" /></p>
<input type="text" id="is_new" name="isNew" tabindex="-1" class="is-new" /></p>
</div>
</div>
<div id="submit_container">
<p style="text-align:center"><button id="mpr_submit_btn" name="submit_registration" tabindex="15" class="btn btn-primary">Submit Registration Request</button>
</div>
</form>
</div>
<script>
const form = document.querySelector('#monthly_parking_registration');
form.addEventListener("submit", function(e){
e.preventDefault();

// Get all input, select, and textarea elements from the form
const inputs = form.querySelectorAll('input, select, textarea');

// Create an object to store form data
const formData = {};

// Variable to track validation status
let isValid = true;

// Remove any previous "failed" classes before validation
inputs.forEach(input => {
input.classList.remove('failed');
});

// Collect input values and validate required fields
inputs.forEach(input => {
const name = input.name;
const value = input.value.trim();

// Add to formData object
if (name) {
formData[name] = value;
}

// Check if input has "required" class and is empty
if (input.classList.contains('required') && value === '') {
input.classList.add('failed');
isValid = false;
}

// Additional validation for quantity - must be a number
if (input.id === 'mpr_qty' && value !== '') {
if (isNaN(value) || value <= 0) {
input.classList.add('failed');
isValid = false;
}
}

// Email validation
if (input.id === 'mpr_email' && value !== '') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
input.classList.add('failed');
isValid = false;
}
}

// Phone number validation - only numbers, (, ), and dashes
if (input.id === 'mpr_phone' && value !== '') {
const phoneRegex = /^[\d\(\)\-\s]+$/;
if (!phoneRegex.test(value)) {
input.classList.add('failed');
isValid = false;
}
}
});

// If validation fails, stop here
if (!isValid) {
alert('Please fill in all required fields correctly and ensure:\n- Parking spaces is a valid number\n- Email address is in correct format\n- Phone number contains only numbers, (), and dashes');
return;
}

// Convert formData object to JSON string
const jsonData = JSON.stringify(formData);

// Make AJAX request to your API endpoint
fetch('/centralparking_content/ajax/?type=form_plugins&app=process_mpr_form', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: jsonData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Check if the response status is "fail"
if (data.status === 'fail') {
// Build error message from errors array
let errorMessage = 'Registration failed:\n\n';

for (let key in data.errors) {
errorMessage += data.errors[key] + '\n';
}

alert(errorMessage);

// Optionally log the full error details
console.error('Submission errors:', data.errors);
console.log('Submitted values:', data.submitted_values);
} else {
// Success
console.log('Success:', data);
alert('Registration submitted successfully!');
form.reset();
}
})
.catch(error => {
console.error('Error:', error);
alert('There was an error submitting your registration. Please try again.');
});
});
const textarea = document.querySelector('#mpr_notes');
const charCounter = document.querySelector('#char_counter');

textarea.addEventListener('keyup', function(e) {
const maxLength = 155;
const currentLength = this.value.length;

// Update counter display
charCounter.textContent = `${currentLength} / ${maxLength} characters`;

// If exceeds max length, truncate the value
if (currentLength > maxLength) {
this.value = this.value.substring(0, maxLength);
charCounter.textContent = `${maxLength} / ${maxLength} characters`;
}

// Optional: Change color when approaching limit
if (currentLength >= maxLength - 10) {
charCounter.style.color = 'red';
} else {
charCounter.style.color = 'black';
}
});
</script>{/source}