Search the Community

Hey guys, i am trying to create a contact form that by passes the page refresh and uses Jquery and Ajax to direct to a php file server side. So far i have everything work fine. until the final part where i pass the json data type into PHP and look to catch an error, success, or completion value. Currently i have an error coming back with the following: SyntaxError: Unexpected token < error due to a parsererror condition I do not see any errors in the console of of chrome, and i have no idea why i am getting this syntax error. These does not seem to be any conflicting data going into the json or out to php. really been stuck on this for a day now This is my .js file $(document).ready(function(){ $('form #alertMessage').hide(); $('#submit').click(function(e){ e.preventDefault(); var valid = ''; var name = $('form #name').val(); var email = $('form #email').val(); var subject = $('form #subject').val(); var message = $('form #message').val(); var honeypot = $('form #honeypot').val(); var humancheck = $('form #humancheck').val(); if(name = '' || name.length <= 5 ){ valid += '<p>Sorry, Your name is required!</p> '; } if(!email.match( /^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/ )){ valid += '<p>A Valid Email is required</p> '; } if(subject = '' || subject.length <= 2 ){ valid += '<p>A Valid name is required</p> '; } if(message = '' || message.length <= 5 ){ valid += '<p>A brief description of you is required.</p> '; } if(honeypot != 'http://'){ valid += '<p>Sorry spambots not allowed.</p> '; } if(humancheck != ''){ valid += '<p>Sorry only humans allowed past this point.</p> '; } if(valid != ""){ $('form #alertMessage').removeClass().addClass('error') .html('<br><br>' + valid).fadeIn('fast') }else{ $('form #alertMessage').removeClass().addClass('processing') .html('<br><br>We are processing your form now...').fadeIn('fast') var formData = $('form').serialize(); submitForm(formData); } }); }); function submitForm(formData){ $.ajax({ type: 'POST', url: 'feedback.php', data: formData, dataType: 'json', cache: false, timeout: 7000, success: function(data){ $('form #alertMessage').removeClass().addClass((data.error === true) ? 'error' : 'success' ) .html(data.msg).fadeIn('fast'); if($('form #alertMessage').hasClass('success')){ setTimeout("$('form $alertMessage').fadeOut('fast')", 5000); } }, error: function(XMLHttpRequest, testStatus, errorThrown){ $('form #alertMessage').removeClass().addClass('error') .html(' <p>There was an ' + errorThrown + ' error due to a ' + testStatus + ' condition.</p>').fadeIn('fast'); }, complete: function(XMLHttpRequest, status){ $('form')[0].reset(); } }); }; Here is the php script. <? sleep(3); $name = trim($_POST['name']); $name = trim($_POST['email']); $name = trim($_POST['subject']); $name = trim($_POST['message']); $name = $_POST['honeypot']; $name = $_POST['humancheck']; if ($honeypot == 'http://' && empty($humancheck)){ $errorMsg = ''; $reg_exp = "/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$/ "; if(!preg_match($reg_exp, $email)){ $errorMsg .= "<p>A valid email is required</p>"; } if(empty($name)]){ $errorMsg .= '<p>Please provide your name</p>'; } if(empty($message)]){ $errorMsg .= '<p>Please provide a message</p>'; } if(!empty($errorMsg)){ $return['error'] = true; $return['msg'] = 'Sorry the request was successful but your form was not correctly filled.' . $errorMsg; echo json_encode($return); exit(); }else{ $return['error'] = false; $return['msg'] = 'Thank you for your feedback ' .$name . ' ' . $errorMsg; echo json_encode($return); } } else { $return['error'] = true; $return['msg'] = 'Oops...there was a problem with your submission. Please try again' ; echo json_encode($return); } ?> HTML side. <form id="contact_us" class="contact-form" action="feedback.php" enctype="multipart/form-data" method="post"> <div id="alertMessage"> </div> <div class="row"> <div class="col-md-6"> <input type="text" name='name' class="form-control" id="name" placeholder="Full Name"> <input type="email" name='email' class="form-control" id="email" placeholder="Your Email"> <input type="text" name='subject' class="form-control" id="subject" placeholder="Company or Project name"> </div> <div class="col-md-6"> <textarea class="form-control" name="text" id="message" rows="25" cols="10" placeholder=" Brief Description"></textarea> <input id='submit' name='submit' type="submit" class="btn btn-default submit-btn form_submit"> </div> <input type="hidden" name="honeypot" id="honeypot" value="http://" /> <input type="hidden" name="humancheck" id="humancheck" value="" /> </div> </form> Image of the error output