Question

致力于我网站的联系表格。所有树形式字段都正确验证电子邮件未发送但看起来页面再次加载。任何人都可以检查我的代码并告诉我这里可能存在问题。希望发送temail并向用户显示通知。

联系表格：

<form role="form" id="contactForm">
     <div class="row">
            <div class="form-group">
                 <input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
            </div>

        <div class="form-group">
            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
     </div>
    </form>

Java sripts在与表单相同的html文件中：

   <script>
$(document).ready(function () {

    var owl = $("#owl-hero");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 1,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"

    })});


    </script>



    <script>
$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    })};
}
function formSuccess(){
    $( "#msgSubmit" ).removeClass( "hidden" );
}


</script>

PHP文件（process.php）：

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "roger@gth.com.pl";
$Subject = "New Message Received";

// send email
$success = mail($EmailTo, $Subject, $message, $email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "invalid";
}

?>

进一步说明：

我的热门代码：

<!DOCTYPE html>
        <html lang="pl">

        <head>

            <meta http-equiv="content-type" content="text/html; charset=UTF-8">

            <title>my site</title>
            <link rel="shortcut icon" href="img/ico.png">

            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="jakiś wyraz">
            <meta name="keywords" content="">
            <meta name="author" content="strona">

            <!-- Bootstrap Css -->
            <link href="bootstrap-assets/css/bootstrap.min.css" rel="stylesheet">
            <!-- Style -->
            <link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
            <link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet">
            <link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
            <link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
            <link href="plugins/Icons/et-line-font/style.css" rel="stylesheet">
            <link href="plugins/animate.css/animate.css" rel="stylesheet">
            <link href="css/main.css" rel="stylesheet">
            <!-- Icons Font -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>



     <script>
    $(document).ready(function () {

        var owl = $("#owl-hero");

        owl.owlCarousel({

            navigation: false, // Show next and prev buttons
            slideSpeed: 1,
            paginationSpeed: 400,
            singleItem: true,
            transitionStyle: "fade"

        })});


        </script>



        <script>
    $("#contactForm").validator().on("submit", function (event) {
        if (event.isDefaultPrevented()) {
            // handle the invalid form...
        } else {
            // everything looks good!
            event.preventDefault();
            submitForm();
        }
    });

    function submitForm(){
        // Initiate Variables With Form Content
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();

        $.ajax({
            type: "POST",
            url: "php/form-process.php",
            data: "name=" + name + "&email=" + email + "&message=" + message,
            success : function(text){
                if (text == "success"){
                    formSuccess();
                }
            }
        });
}
    function formSuccess(){
        $( "#msgSubmit" ).removeClass( "hidden" );
    }


    </script>    
        </head>

我注意到控制台中的几个错误请帮我修复它。：

错误类型：SCRIPT5009: '$' is undefined

在这一行：

$("#contactForm").validator().on("submit", function (event) {

错误类型：SCRIPT5009: '$' is undefined 最后在own.carousel脚本上：

}）;

Answer 1

您还没有加载jQuery库（或者至少在尝试根据上面的<head>标记使用它之前），添加：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

在使用$函数之前。

jQuery解决后，删除}和submitForm之间)函数中额外;所带来的语法错误。

联系表格不发送电子邮件，也没有通知

1 个答案: