Link to home
Start Free TrialLog in
Avatar of Richard Lloyd
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

<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>

Open in new window


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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Richard Lloyd
Richard Lloyd

ASKER

Thank you! Top marks again Julian
You are welcome.