Question

t+1

我目前正在使用Bootstrap 4开发主页。我想使用jQuery和Ajax创建联系表单，但是尽管我实现了当前版本的jQuery，但我的.js文件似乎无法正常工作。

我仅重定向到contact-mail.php页面，其中显示“成功”，并且邮件已传递。但是contact-mail.js文件应该将我重定向到旧页面，并显示引导的警报成功窗口。任何想法？请在下面查看我的代码。

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

$("#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>

js文件不适用于Bootstrap 4

0 个答案: