Richard Lloyd
asked on
Why does my Ajax form open the Print dialogue?
I have a simple ajax form that when submitted sometimes opens a print dialogue screen!
I can't see why and how this happens, but would be grateful for anyone's thoughts!
The offending code is
The site is at https://skinhealthspa.com/enquiry.php?link=free-consultation
The problem occurs in Chrome, Firefox and Edge
Thank you
I can't see why and how this happens, but would be grateful for anyone's thoughts!
The offending code is
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enquiry Form
</title>
<link rel="stylesheet" type="text/css" href="css/enquiryform.css?v1">
<script type="text/javascript" src="js/1.11.3.jquery.min.js"></script>
<body>
<form id='enqform' action='' class='modal-content' method='POST'>
<div class='form_container'><h1>Enquiry Form</h1>
<label><b>Enquiry</b>
</label>
<textarea type='text' placeholder='Enter Enquiry' name='enqenquiry' id='enqenquiry' >Please contact me about Free Consultation</textarea>
<label><b>Clinic</b>
</label>
<select id='enqbranchid' name='enqbranchid'>
<option selected disabled value=''>Select Clinic
</option>
<option value='CIT'>London - Spitalfields
</option>
<option value='MAR'>London - Marylebone
</option>
<option value='MAN'>Manchester
</option>
<option value='DOR'>Dorridge
</option>
<option value='NAN'>Nantwich
</option>
</select>
<label><b>Firstname</b>
</label>
<input type='text' placeholder='Enter firstname' name='enqfirstname' id='enqfirstname' value=''>
<label><b>Surname</b>
</label>
<input type='text' placeholder='Surname' name='enqsurname' id='enqsurname' value=''>
<label><b>Telephone</b>
</label>
<input type='text' placeholder='Telephone' name='enqtelephone' id='enqtelephone' value=''>
<label><b>Email</b>
</label>
<input type='email' placeholder='Enter Email' name='enqemail' id='enqemail' value=''>
<input type='hidden' name='enqtreatment' id='enqtreatment' value='Free Consultation'>
<span class='form_error'>
</span>
<span class='form_success'>
</span>
<div class='clearfix'>
<span class='form_submitted'>
<button type='submit' class='form_signupbtn'>Submit
</button>
<button onclick='$.fancybox.close()' class='form_cancelbtn' >Close
</button>
</span>
</div>
</div>
</form>
</body>
</html>
<script>
$(document).ready(function(){
$("#enqform").bind("submit", function() {
var branchid = $('#enqbranchid');
var firstname = $('#enqfirstname');
var surname = $('#enqsurname');
var email = $('#enqemail');
var telephone = $('#enqtelephone');
var treatment = $('#enqtreatment');
var enquiry = $('#enqenquiry');
var error = 0;
if($.trim($('#enqenquiry').val()) === '') {
enquiry.css({'border':'1px solid #f00'});
error = 1;
}else{
enquiry.css({'border':'1px solid #0f0'});
}
if($.trim($('#enqbranchid').val()) === '') {
branchid.css({'border':'1px solid #f00'});
error = 1;
}else{
branchid.css({'border':'1px solid #0f0'});
}
if($.trim($('#enqfirstname').val()) === '') {
firstname.css({'border':'1px solid #f00'});
error = 1;
}else{
firstname.css({'border':'1px solid #0f0'});
}
if($.trim($('#enqsurname').val()) === '') {
surname.css({'border':'1px solid #f00'});
error = 1;
}else{
surname.css({'border':'1px solid #0f0'});
}
if($('#enqemail').val() === '') {
email.css({'border':'1px solid #f00'});
error = 1;
}else {
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!emailPattern.test($('#enqemail').val())) {
email.css({'border':'1px solid #f00'});
error = 1;
}
else{
email.css({'border':'1px solid #0f0'});
}
}
if($.trim($('#enqtelephone').val()) === '') {
telephone.css({'border':'1px solid #f00'});
error = 1;
}else{
telephone.css({'border':'1px solid #0f0'});
}
if($.trim($('#enqtreatment').val()) === '') {
treatment.css({'border':'1px solid #f00'});
error = 1;
}else{
treatment.css({'border':'1px solid #0f0'});
}
if(error) {
$('.form_error').text('Please complete all fields.');
$('.form_success').hide();
return false;
}
var str = 'formname=enquiry'+'&enquiry='+enquiry.val()+'&branchid='+branchid.val()+'&firstname='+firstname.val()+'&surname='+surname.val()+'&email='+email.val()+'&telephone='+telephone.val()+'&treatment='+treatment.val();
print(str);
$.ajax({
type : "POST",
cache : false,
url: "formprocessing.php",
data: str,
success: function (data) {
$('.form_success').html(data);
$('.form_success').show();
$('.form_error').hide();
$('.form_submitted').hide();
branchid.val('');
firstname.val('');
surname.val('');
email.val('');
telephone.val('');
treatment.val('');
enquiry.val('');
}
});
return false;
});
});
</script>
The site is at https://skinhealthspa.com/enquiry.php?link=free-consultation
The problem occurs in Chrome, Firefox and Edge
Thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome.
ASKER