Experiencing an issue with my repo as it was actually private. tried to change to public and now its stuck in location change.
So for now ill give some code here and see how we go.
So the modal is as follows:
<div id="quoteModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Right to Manage Estimate Form.</h4>
<button type="button" class="close" data-dismiss="modal" name="Close Modal" aria-label="Close Modal">×</button>
</div>
<div class="modal-body">
<p class="alert alert-info">Please complete the form below. Your estimate will be emailed to you after submitting the form.</p>
<div id="quote-form_ProgressWrapper">
<form method="post" name="quote_form" id="quote-form" class="form-horizontal" action="">
<div id="details">
<div class="row mb-3">
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="email" id="email" maxlength="60" value="" placeholder="Email">
</div>
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="email_confirm" id="email-confirm" maxlength="60" value="" placeholder="Confirm Email">
</div>
</div>
<div class="row mb-3">
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="fname" id="fname" minlength="2" maxlength="25" value="" placeholder="First name(s)">
</div>
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="surname" id="surname" minlength="2" maxlength="25" value="" placeholder="Surname">
</div>
</div>
<div class="row mb-3">
<div class="form-group col-lg-8">
<input type="text" class="form-control" name="property_name" id="property-name" value="" maxlength="30" placeholder="Property name or street address">
<small>(If your property does not have a name, enter the Street Address instead)</small>
</div>
<div class="form-group col-lg-4">
<input type="text" class="form-control" name="postcode" id="postcode" value="" placeholder="Post code">
</div>
</div>
<div class="row total-flats mb-4">
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="num_of_blocks" id="num-of-blocks" value="" placeholder="Number of detached buildings">
<small>If your premises is comprised of multiple detached buildings, the estimate assumes all buildings are under the same freehold title.</small>
</div>
<div class="form-group col-lg-6">
<input type="text" class="form-control" name="total_flats" id="total-flats" value="" placeholder="Total number of flats">
</div>
</div>
</div>
<div class="mb-3" id="options">
<p class="mb-2">Please select any of the following to indicate your current status with regard to your interest in Right to Manage.</p>
<div class="checkbox">
<label>
<input type="checkbox" name="status[]" value="1">
We have more than 50% leaseholders in support and are ready to start RTM process. </label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="status[]" value="2">
We are exploring our options and will then canvas support. </label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="status[]" value="3">
We have started RTM and need help to continue. </label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="status[]" value="4">
We are a mananging agent acting for leaseholders </label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="status[]" value="5">
Other </label>
</div>
</div>
<div id="contact-options">
<p>It is our standard practice to telephone recipients the next working day following receipt of your estimate to ensure the information is understood and answer any questions that may arise. In our experience this is usually more helpful than email alone.</p>
<p>If you are happy to receive this call please indicate the preferred telephone number for contact and the preferred time of day. If you prefer email contact only please select the option underneath.</p>
<div class="row phone mt-2 mb-2">
<div class="col-md-6">
<input type="text" class="form-control" name="telephone" id="telephone" value="" placeholder="Telephone">
</div>
</div>
<div class="form-group time-pref">
<label class="radio-inline tp-label">Prefered time:</label>
<label class="radio-inline">
<input type="radio" name="conpref" id="9to1" value="9am to 1pm" >
9:00am to 1:00pm</label>
<label class="radio-inline">
<input type="radio" name="conpref" id="2to6" value="2pm to 6pm" >
2:00pm to 6:00pm</label>
<label class="radio-inline">
<input type="radio" name="conpref" id="6to8" value="6pm to 8pm" >
6:00pm to 8:00pm</label>
<label class="radio-inline con-email mt-2">
<input type="radio" name="conpref" value="Email only" >
I prefer to be contacted by email.</label>
</div>
</div>
<input type="submit" role="button" class="btn-green" name="submit_quote" id="submit-quote" value="Submit" aria-label="Get Estimate">
<input type="hidden" name="date" id="date" value="<?php echo date("Y-m-d H:i:s"); ?>">
<input type="hidden" name="enq-det-id" value="<?php echo $_SESSION['enquiryDetID']; ?>" >
<input type="hidden" name="quote" id="quote" value="<?php echo($totalQuote); ?>">
<br clear="all">
</form>
</div>
</div>
</div>
</div>
</div>
jQuery link:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
And here’s jQuery Validate setup:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.js"></script>
<script>jQuery.extend(jQuery.validator.messages, {
max: jQuery.validator.format("A maximum of 20 blocks can be entered."), min: jQuery.validator.format("A minimum of 1 block is required")
}
);
</script>
<script>
/*<![CDATA[*/
$(document).ready(function() {
jQuery.validator.addMethod("noSpace", function(b, a) {
return b.indexOf(" ")<0&&b!=""
}
, "No spaces please");
jQuery.validator.addMethod("phoneUK", function(a, b) {
return this.optional(b)||a.length>9&&a.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/)
}
, "This is not a valid phone number");
$.validator.addMethod("postcodeUK", function(b, a) {
return this.optional(a)||/^((([A-PR-UWYZ][0-9])|([A-PR-UWYZ][0-9][0-9])|([A-PR-UWYZ][A-HK-Y][0-9])|([A-PR-UWYZ][A-HK-Y][0-9][0-9])|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))\s?([0-9][ABD-HJLNP-UW-Z]{2})|(GIR)\s?(0AA))$/i.test(b)
}
, "This is not a valid UK postcode");
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");
$("#quote-form").validate( {
rules: {
email: {
required: true, email: true
}
, email_confirm: {
required: true,
equalTo: '#email'
}
, fname: {
required: true, lettersonly: true
}
, surname: {
required: true, noSpace: true, lettersonly: true
}
, telephone: {
phoneUK: true
}
, property_name: {
required: true
}
, postcode: {
required: true, postcodeUK: true
}
, num_of_blocks: {
required: true, digits: true, range: [1, 20]
}
, total_flats: {
required: true, digits: true, range: [2, 1000]
}
, 'status[]': {
required: true
}
, telephone: {
required: {
depends: function(element) {
return $('#9to1').is(':checked') || $('#2to6').is(':checked') || $('#6to8').is(':checked');
}
}
}
}
, messages: {
email: {
required: "An email is required", email: "This is not a valid email address"
}
, email_confirm: {
required: "Please confirm your email", equalTo: "Emails do not match"
}
, fname: {
required: "Your first name is required", lettersonly: "Alphabetical characters only please"
}
, surname: {
required: "Your surname is required", lettersonly: "Alphabetical characters only please"
}
, property_name: {
required: "The name of your property is required"
}
, postcode: {
required: "The postcode is required"
}
, num_of_blocks: {
required: "Please enter the number of blocks", digits: "Numeric values only please", range: "Please enter a value between 1 and 20"
}
, total_flats: {
required: "Please enter the total number of flats", digits: "Numeric values only please", range: "Please enter a value between 2 and 1000"
}
, 'status[]': {
required: "Please choose one of the options above"
}
, telephone: {
required: "Your telephone number is required"
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "property_name") {
error.insertAfter(".help-block");
}
else if (element.attr("name") == "status[]") {
error.insertAfter("#options");
}
else {
error.insertAfter(element);
}
}
});
});
/*]]>*/
</script>
<script>$("#close").click(function(){location.reload()});</script>
<script>(function(){function a(b){var e=this;e.modal=$(b);if(e.modal.length==0){return false}if(window.location.hash==b){d()}var c={open:d,close:f};return c;function d(){e.modal.modal("show")}function f(){e.modal.modal("hide")}}Window.prototype.remoteModal=a})();$(function(){window.remoteModal("#quoteModal")});</script>
Hope this helps!
Thanks in advance!