2017-10-12 83 views
1

我试图提交表单数据到php脚本与jQuery .post()方法,比接收PHP脚本数据回来,并显示它的形式页面,但它does not work.Also我使用jQuery验证的客户端验证插件作为well.Here是我的代码: HTML:PHP,jQuery,与Ajax的HTML表单不工作

<div class="contact-form"> 
<button class="contact-close">X</button> 
    <form method="post" action="formular.php" id="quote-form"> 
     <div id="returned"></div> 
     <div class="houndred"> 
      <input type="text" name="name" placeholder="Name*" class="input-half" id="name" min-width="2" autofocus required> 
      <input type="email" name="email" placeholder="Email*" class="input-half" id="email" required> 
      <input type="text" name="subject" placeholder="Subject" class="input-half" id="subject" required> 
      <input type="url" name="url" placeholder="Website" class="input-half" id="website"> 
     </div> 

     <div class="houndred"> 
      <textarea name="message" class="textarea" id="message" placeholder="message*" required></textarea> 
      <br><p></p> 
     </div> 
     <div class="eightytwo"> 
      <button id="quote-button">Send</button> 
     </div> 
     <div id="summary"></div> 
    </form> 

</div><!-- .padding-fix --> 
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
<script src="js/validation.js"></script> 
<script src="js/ajaxform.js"></script> 

JS张贴内容:

$(document).ready(function(){ 

    $('form').on('submit', function(event) { 
     event.preventDefault(); 
     $.post('formular.php', $(this).serialize(), function(data)) { 
      var dataForm = data; 
      $("#returned").append(dataForm); 
     } 
    }); 
)}; 

和PHP:

if(!empty($_POST)) { 
     $errors = array(); 
     $name = $_POST['name']; 
     $email = $_POST['email']; 
     $subject = $_POST['subject']; 
     $url = $_POST['url']; 
     $message = $_POST['message']; 

     if(empty($name) || empty($email) || empty($subject) || empty($url) || empty($message)) { 
      $errors[] = 'All fields are required!'; 
     } else { 
      if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) { 
       $errors[] = 'Please enter a valid email address'; 
      } 
      if(ctype_alpha($name === false)) { 
       $errors[] = 'Name can only contain letters'; 
      } 
      if (ctype_alpha($subject === false)) { 
       $errors[] = 'Subject can only contain letters'; 
      } 
      if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_PATH_REQUIRED) === false) { 
       $errors[] = 'Please enter a valid url address with http in front'; 
      } 
      if(empty($message)) { 
       $errors[] = 'Please enter a message'; 
      } 
     } 

     if(!empty($errors)) { 
      echo '<ul style=\"list-style: circle; color: #f74d4e\">'; 
      foreach($errors as $error) { 
       echo '<li style=\"color: #f74d4e;\"' . $error . '</li>'; 
      } 
      echo '</ul>'; 
     } 

     $send_message = 'From:' . $url . '<br>' . strip_tags(addslashes($message)); 

     if(empty($errors)) { 
      mail('[email protected]', $subject, $send_message , $email); 
      echo '<h4 style=\"color: #f74d4e;\">Thank you for contacting me!</h4>'; 
      exit(); 
     } 
    } 

我希望这对我来说是有道理的,但我在过去的几个小时里一直在努力,仍然试图弄清楚什么地方出了问题,我也试着用$ .ajax()和没有response.One事情,形式是geting加载使用jquery .load()方法弹出框,这就是为什么我很重要的是要做到这一点与ajax

+0

请在浏览器中看看控制台日志(使开发者工具,如果您还没有!)。看看是否显示任何错误。可能会为您解释为什么它无法正常工作的问题。也请务必直接检查您的PHP脚本,以确保您没有收到任何服务器500错误。 – IncredibleHat

+0

只要tryed控制台,并得到: VM491:5未捕获的SyntaxError:意外的令牌) 在P(jquery的-3.2.1.min.js:2) 在Function.globalEval(jquery的-3.2.1.min.js:2 )在文本脚本(jquery-3.2.1.min.js:4) 在Qb(jquery-3.2.1.min.js:4) 在A(jquery-3.2.1.min.js:4) XMLHttpRequest上的 。 (jquery-3.2.1.min.js:4) at Object.send(jquery-3.2.1.min.js:4) at Function.ajax(jquery-3.2.1.min.js:4) (jquery-3.2.1.min.js:3) 将尝试使用不同版本的jQuery。 – stelarossa

+0

它不是你的jQuery版本。通过darthaditya ...语法错误查看下面的答案。 – IncredibleHat

回答

3

从粗略的检查您的代码,似乎是你已经在这条线增加了一个额外的右括号,就像这样:function(data))

$.post('formular.php', $(this).serialize(), function(data)) { 

尝试

$.post('formular.php', $(this).serialize(), function(data) {

代替

HTH

+1

好的。我仔细看了一眼,我就错过了那一个。该结束语需要在该函数(数据)的结束后进行。 – IncredibleHat

+0

是的,没错。我建议一个好的JSLint.com或至少有一个js linter插件安装任何代码编辑器正在使用。 – darthaditya

+0

只是修复它,但它仍然没有像预期的行为...很好的方式,谢谢:) – stelarossa