0

<form role="form" action="contact-mail.php" method="post" id="contactForm">
  <div class="row">
   <div class="form-group col-md-6">
    <label for="name">Vorname *</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="Vorname" required="required" data-error="Geben Sie Ihren Vornamen ein">
   </div>
   <div class="form-group col-md-6">
    <label for="lastname">Nachname *</label>
    <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Nachname" required="required" data-error="Geben Sie Ihren Nachnamen ein">
   </div>
  </div>
  <div class="row">
   <div class="form-group col-md-6">
    <label for="email">E-Mail *</label>
    <input type="text" class="form-control" name="email" id="email" placeholder="E-Mail-Adresse" required="required" data-error="Geben Sie eine gültige E-Mail ein">
   </div>
   <div class="form-group col-md-6">
    <label for="phone">Telefon</label>
    <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefonnummer">
   </div>
  </div>
  <div class="row">
   <div class="form-group col">
    <label for="message">Ihre Nachricht für uns *</label>
    <textarea id="message" class="form-control" name="message" placeholder="Ihre Nachricht" rows="4" required="required" data-error="Geben Sie Ihre Nachricht ein"></textarea>
   </div>
   
  </div>
  <button type="submit" id="form-submit" class="btn btn-primary">Absenden</button>
  <p></p> 
  <div id="msgSubmit" class=" alert alert-success d-none">Nachricht gesendet</div>
 </form>

I`m currently developing a homepage using Bootstrap 4. I wanted to create a contact form using jQuery and Ajax, but it seems like my .js file is not working, although I implemented the current version of jQuery.

I am only redirected to the page contact-mail.php where it shows "success" and the mail is delivered. But the contact-mail.js file should redirect me to the old page and show an alert-success-window of bootstrap. Any idea? See my code down below.

$("#contactForm").submit(function(event){

    event.preventDefault();
    submitForm();
});

function submitForm(){

    var name = $("#name").val();
    var lastname = $("#lastname").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "contact-mail.php",
        data: "name=" + name + "lastname=" + lastname + "email=" + email + "phone=" + phone + "message=" + message,
        success: function(text){
            if(text=="success"){
                formSuccess();
            }
        }
    });
}

function formSuccess(){
    $("#msgSubmit").removeClass("d-none");
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrapValidator.css">

      <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/bootstrapValidator.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="contact-mail.js"></script>



    <title>Schulförderverein Deisslingen e.V.</title>
  </head>

<?php

$name = $_POST["name"];
$lastname = $_POST["lastname"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$message = $_POST["message"];

$emailTo = "nils.kaper@outlook.com";
$subject = "Neue Nachricht über Ihr Kontaktformular";


$body ="Vorname: ";
$body.=$name;
$body.="\n";
$body.="Nachname: ";
$body.=$lastname;
$body.="\n";
$body.="E-Mail: ";
$body.=$email;
$body.="\n";
$body.="Telefon: ";
$body.=$phone;
$body.="\n";
$body.="Nachricht: ";
$body.=$message;

$success = mail($emailTo, $subject, $body, "From: ".$email);

if($success){
    echo "success";
}
else{
    echo "invalid";
}

?>
Nils Kaper
  • 1
  • 2
  • Your `data` string is not a valid `application/x-www-form-urlencoded` format. I highly recommend using an object and letting jQuery convert it to the appropriate string format, ie `data: { name, lastname, email, phone, message }` – Phil Jul 11 '18 at 23:29
  • Also, you are including multiple copies of jQuery. Don't do that – Phil Jul 11 '18 at 23:30
  • And finally, it looks like you are executing your `$("#contactForm").submit(...)` too early. See the duplicate for more info – Phil Jul 11 '18 at 23:34
  • Your HTML page seems to be missing ` ... ` and rest of content. Can you post that snippet/section of code ? – Amit Jul 11 '18 at 23:34
  • I inserted the
    now as well. I can't upload my whole page since it consists of various .php files. But I think the form itself should actually be enough, isn't it? What do you mean by it is executed too early? It should be executed the moment I'm redirected to the php file, but how could I do that?
     – Nils Kaper Jul 12 '18 at 00:02

0 Answers0