0

working on contact form for my website. All tree form fields are validating correctly somehow the email is not send but looks page is loading again. Can anyone check my code and tell me where could be a problem here. Would like temail to be sent and notification to the user shown.

Contact form:

<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 within same html file as form:

   <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 file (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";
}

?>

for further dicussion:

my top code:

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

i notice couple errors in console please help me also to fix it.:

error type: SCRIPT5009: '$' is undefined

on this line:

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

error type: SCRIPT5009: '$' is undefined at the end on own.carousel script here:

});

1 Answers1

0

You haven't loaded the jQuery library (or at least prior to attempting to use it based on your <head> tag from above), add:

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

before useing the $ function.

After jQuery has resolved, remove the syntax error cased by the extra } in your submitForm function -right in between the ) and the ;.

jtrumbull
  • 768
  • 8
  • 19