Ajax脚本没有调用

时间:2017-12-13 23:41:01

标签: javascript php jquery ajax

在我的页面内部工作,不刷新页面,它会向数据库发送我想要的内容,但是,当它发送时,或者根据错误有错误时应突出显示该框但是它没有按'吨。每当我按下按钮时,我都会在控制台中收到此错误:


的index.php:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <script>
      $(document).ready(function(){
        $("form").submit(function(){
          event.preventDefault();
          var name = $("#mail-name").val();
          var email = $("#mail-email").val();
          var gender = $("#mail-gender").val();
          var message = $("#mail-message").val();
          var submit = $("#mail-sendEmail").val();

          $(".form-message").load("mail.php", {
            name: name,
            email: email,
            gender: gender,
            message: message,
            submit: submit
          })
        });
      });
    </script>

  </head>
  <body>

    <form method="POST" action="mail.php">
      <input type="text" name="name" id="mail-name" placeholder="Full name" value=""><br>
      <input type="text" name="email" id="mail-email" placeholder="Email" value=""><br>
      <select name="gender" id="mail-gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select><br>
      <textarea name="message" id="mail-message" placeholder="Message" rows="8" cols="80"></textarea><br>
      <button type="submit" name="sendEmail" id="mail-sendEmail">Send email</button>
      <p class="form-message"></p>
    </form>

  </body>
</html>

mail.php

<?php

  include('inc/db.php');

  if(isset($_POST['submit'])){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $message = $_POST['message'];

    $errorEmpty = false;
    $errorEmptyName = false;
    $errorEmptyEmail = false;
    $errorEmptyMessage = false;
    $errorEmail = false;

    if(empty($name) || empty($email) || empty($message)){
      $errorEmpty = true;
      if(empty($name)){
        echo "<span class='form-error'> Please enter a name! </span><br>";
        $errorEmptyName = true;
      }
      if(empty($email)){
        echo "<span class='form-error'> Please enter an email! </span><br>";
        $errorEmptyEmail = true;
      }
      if(empty($message)){
        echo "<span class='form-error'> Please enter a message! </span><br>";
        $errorEmptyMessage = true;
      }
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
      echo "<span class='form-error'> Please enter a valid email! </span><br>";
      $errorEmail = true;
    }else{
      echo "<span class='form-success'> Successfully sent! </span><br>";
      DB::query('INSERT INTO contact VALUES(\'\', :name, :email, :gender, :message)', array(':name'=>$name, ':email'=>$email, ':gender'=>$gender, ':message'=>$message));
    }
  }else{
    die("Error");
  }

?>

<script>

  $("#name, #email, #message, #gender").removeClass("input-error");

  var $errorEmpty = "<?php echo "$errorEmpty" ?>";
  var errorEmptyName = "<?php echo $errorEmptyName ?>";
  var errorEmptyEmail = "<?php echo $errorEmptyEmail ?>";
  var errorEmptyMessage = "<?php echo $errorEmptyMessage ?>";
  var errorEmail = "<?php echo $errorEmail ?>";

  if(errorEmpty == true){
    if(errorEmptyName == true){
      $("#name").addClass("input-error");
    }
    if(errorEmptyEmail == true){
      $("#email").addClass("input-error");
    }
    if(errorEmptyMessage == true){
      $("#message").addClass("input-error");
    }
  }else if(errorEmail == true){
    $("#email").addClass("input-error");
  }

  if(errorEmpty == false && errorEmail == false){
    $("#name, #email, #message").val('');
  }

</script>

它没有调用mail.php脚本中的脚本。

0 个答案:

没有答案