发送邮件时不显示新页面时显示警报 Bootstrap

6ovsh4lw  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(350)

我想在发送电子邮件后显示一个警报，如在此投资组合中：https://www.mathieu-crevoulin.com/之后，当您传送邮件时，您会看到此警示：电子邮件发送成功！感谢您的信息！您的回复将在稍后的时间内送达。
contact.php

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

if(isset($_POST["send"])){

    $body = $_POST['message'];
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    

    $mail = new PHPMailer(true);
    
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'mymail@mail.com';
    $mail->Password = 'psw';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port = 465;      
    $mail->setFrom('mymail@mail.com');

    $mail->addAddress($_POST["email"]);

    $mail->isHTML(true);

    $mail->Subject = 'Projet web';
    $mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;

    $mail->send();

    header("Location:  http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
   

    
}

index.php

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha512-doJrC/ocU8VGVRx3O9981+2aYUn3fuWVWvqLi1U+tA2MWVzsw+NVKq1PrENF03M+TYBP92PnYUlXFH1ZW0FpLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>

    <title>Portfolio</title>
</head>

<body>
<style>
    #success-message, #error-message
    {
        display: none;
    }
</style>

    <nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading1">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading2">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                    </li> -->

                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg
    images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg
    images/10705380.jpg -->

    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light rounded-2" tabindex="0">

        <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" id="scrollspyHeading1">
                <div class="carousel-item active " data-bs-interval="3000">
                    <img src="images/888777555.jpeg" class="d-block w-100" alt="...">

                    <div class="carousel-caption  d-flex flex-column justify-content-center h-100" style="top: 0">
                        <h2 class="in-left">Développeur indépendant</h2>
                        <p class="in-left">SAVINOV Denis</p>
                    </div>

                </div>
    
                            </div>

                            <div class="col-10 footertext" data-aos="fade-right">
                                <h5 class="text-end"><strong>Intégration Web</strong></h5>
                                <p class="text-end grisclaire">Des intégrations (X)HTML / CSS respectueuses des
                                    standards du Web.
                                </p>
                            </div>
                            <div class="col-2" data-aos="fade-right">
                                <i class="fa-solid fa-code fa-2xl"></i>
                            </div>

                            <div class="col-10 footertext" data-aos="fade-right">
                                <h5 class="text-end"><strong>Développements spécifiques</strong></h5>
                                <p class="text-end grisclaire">Des outils adaptés à votre coeur de métier,
                                    applications & solutions personnalisées.</p>
                            </div>
                            <div class="col-2" data-aos="fade-right">
                                <i class="fa-solid fa-wrench fa-2xl"></i>
                            </div>

                            <div class="col-10 footertext" data-aos="fade-right">
                                <h5 class="text-end"><strong>Référencement naturel</strong></h5>
                                <p class="text-end grisclaire">Affichage sémantique des informations,
                                    des pages propres pour un référencement optimal.</p>
                            </div>
                            <div class="col-2" data-aos="fade-right">
                                <i class="img-fluid material-icons" style="width: 100%;"><img class="img-fluid w-100" src="images/5902216.png" alt="" style="width: 100%;"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3 mb-md-0 row align-items-center">
                        <div class="row align-items-center" data-aos="fade-up">
                            <div class="col">
                                <img src="images/index1.jpeg" class="d-block w-100 d-none d-lg-block" alt="...">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3 mb-md-0">
                        <div class="row align-items-center">

                            <div class="col-2" data-aos="fade-left">
                                <i class="img-fluid material-icons" style="width: 100%;"><img src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png" alt="" style="width: 100%;"></i>
                            </div>
                            <div class="col-10 footertext" data-aos="fade-left">
                                <h5 class="text-start"><strong>Conception graphique & Webdesign</strong></h5>
                                <p class="text-start grisclaire">Logos, templates Web, plaquettes publicitaires,
                                    cartes de visite, newsletters...</p>
                            </div>

                            <div class="col-2" data-aos="fade-left">
                                <i class="img-fluid material-icons" style="width: 100%;"><img src="images/3938579.png" alt="" style="width: 100%;"></i>

                            </div>
                            <div class="col-10 footertext" data-aos="fade-left">
                                <h5 class="text-start"><strong>Dynamisme des pages</strong></h5>
                                <p class="text-start grisclaire">Des animations de contenu non intrusives
                                    pour embellir votre projet.</p>
                            </div>

                            <div class="col-2" data-aos="fade-left">
                                <i class="img-fluid material-icons" style="width: 100%;"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i>
                            </div>
                            <div class="col-10 footertext" data-aos="fade-left">
                                <h5 class="text-start"><strong>Interface d'administration</strong></h5>
                                <p class="text-start grisclaire">Outils spécifiques au bon fonctionnement
                                    de votre entreprise.</p>
                            </div>

                            <div class="col-2" data-aos="fade-left">
                                <i class="img-fluid material-icons" style="width: 100%;"><img src="images/1027666.png" alt="" style="width: 100%;"></i>
                            </div>
                            <div class="col-10 footertext" data-aos="fade-left">
                                <h5 class="text-start"><strong>Responsive design</strong></h5>
                                <p class="text-start grisclaire">Compatible tous supports, tablette & application
                                    mobile.</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="imagesjolie">
            <div class="parallax-header" style="   background: #000;
        background: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.8)
        ),
        url(1393785.jpg);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;">
                <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                    <div class="header-content">
                        <h1 class="text-center imagebluranimation" style="color: white;">Développement Web Responsive
                        </h1>
                        <h4 class="text-center imagebluranimation" style="color: white;">Compatible Mobile, Tablettes &
                            P.C</h4>
                    </div>
                </div>
            </div>
        </div>
  <div class="imagesjolie">
            <div class="parallax-header" style="   background: #000;
        background: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.8)
        ),
        url(521120.jpg);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;">
                <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                    <div class="header-content">

                        <h1 class="text-center imagebluranimation" style="color: white;"> PME, associations ou
                            particuliers,
                            je réponds à vos besoins en développement web </h1>
                    </div>
                </div>
            </div>
        </div>
        </br>

        <div class="container text-center" id="scrollspyHeading6" style="padding-bottom: 3%;">
            <h1 style="padding-top: 4%;" data-aos="fade-down">
                <g>À PROPOS</g>
            </h1>
            <h4 style="color: rgb(117, 111, 111);" data-aos="fade-down">Je suis développeur web freelance et j'aime ça !
            </h4>
            <div class="row gx-4 gx-lg-5">
                <div class="col-md-4 mb-3 mb-md-0" data-aos="fade-right">
                    <h4 class="text-start">Un développeur web passionné !</h4>
                    <p class="text-start grisclaire">Ma passion pour le développement web commence en 2003 et m'a
                        demandé un
                        changement
                        radical de cursus
                        afin de pouvoir pleinement l'exploiter.</br> </br>

                        Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                        divers projets développés.</br> </br>

                        En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                        développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un
                        plus
                        large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
                </div>

                <div class="col-md-4 mb-3 mb-md-0 row align-items-center" data-aos="fade-up">
                    <div class="row align-items-center">
                        <div class="col">
                            <img src="images/index1.jpeg" class="d-block w-100 d-none d-lg-block" alt="...">
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">

                    <h4 class="text-start">Expérience en développement</h4>

                    <p class="text-start grisclaire"> Mon expérience acquise au fil des projets me permet de mieux
                        comprendre les
                        attentes d'un client
                        et de
                        répondre précisement au besoin demandé en fonction du domaine d'activité.</p>

                    <p class="text-start grisclaire">Du site vitrine au projet plus complexe, je vous propose une
                        expertise et un
                        développement web qui
                        correspond à vos attentes & à vos besoins.</p>

                    <h3 class="text-start">Un tarif adapté à votre projet</h3>

                    <p class="text-start grisclaire"> Travaillant régulièrement avec des PME, associations ou
                        particuliers, je vous
                        propose des solutions
                        à
                        votre portée & adaptée à votre budget.</p>

                </div>
            </div>
        </div>
        <div class="imagesjolie">
            <div class="parallax-header" style="   background: #000;
            background: linear-gradient(
              rgba(0, 0, 0, 0.3),
              rgba(0, 0, 0, 0.8)
            ),
            url(1393769.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;">
                <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                    <div class="header-content">
                        <h1 class="text-center imagebluranimation" style="color: white;"> Un interlocuteur unique pour
                            un site internet
                            réussi
                            !
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="container text-center" id="scrollspyHeading7">
            <h1 style="padding-top: 4%;" data-aos="fade-down">
                <b>CONTACTEZ-MOI</b>
            </h1>
            <h3 class="footertext" style="background-color: rgb(245, 245, 245);padding: 1%;" data-aos="fade-down"><b>Une
                    idée ? Un projet ? N'hésitez pas à
                    demander un devis !
                    [GRATUIT]</b></h3>

            <div class="row align-items-center" style="padding: 3%;">
                <div class="col-md-4 mb-3 mb-md-0 text-start">
                    <div class="row">
                        <div class="col">
                            <div class="row" data-aos="fade-right">

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-geo-alt-fill w-100"></i>
                                </div>
                                <div class="col-10" style="padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>ADRESSE</b></h6>
                                    <p>45, allée des Grives 83390 Cuers</p>
                                </div>

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-whatsapp"></i>
                                </div>
                                <div class="col-10" style="padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>Téléphone</b></h6>
                                    <p>(+33) 6.15.42.10.45</p>
                                </div>

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-envelope-fill"></i>
                                </div>
                                <div class="col-10" style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>E-mail</b></h6>
                                    <p>contact@mcrevoulin.com</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954510748!2d7.692039647318505!3d48.56905316137844!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStrasbourg!5e0!3m2!1sen!2sfr!4v1659196020939!5m2!1sen!2sfr" width="300" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-aos="fade-up"></iframe>
                    <!-- <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
                    width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe> -->
                </div>
                <div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
   <form id="contactForm" action="contact.php" method="POST">
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
           <input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
               aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
       </div>
       <!-- Email address input -->
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1">@</span>
           <input type="text" id="email" name="email" class="form-control" placeholder="Email"
               aria-label="email" aria-describedby="basic-addon1" required>
       </div>
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
           <input type="text" id="phone" name="phone" class="form-control" placeholder="Téléphone"
               aria-describedby="basic-addon2" required>
       </div>
       <!-- Message input -->
       <div class="mb-3">
           <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
               placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
       </div>
       <!-- Form submit button -->
       <div class="d-grid">
           <button class="btn btn-primary btn-lg" name="send" type="submit">Submit</button>
       </div>
   </form>
</div>

            </div>

        </div>
    </div>
    <footer style="background-color: #2c2c2c;">
        <div class="container" style="padding: 5%;">
            <div class="row justify-content-between gx-4 gx-lg-5">
                <div class="col-md-4 mb-3 mb-md-0" data-aos="fade-right">
                    <h6 style="color: white;"> Développeur Informatique Indépendant</h6>

                    <p class="grisclaire">Développeur Web front & back-end & Webdesigner freelance, je suis à votre
                        disposition pour répondre à
                        tout type
                        de projets de création de sites internet, de développement spécifique ou d'applications web.
                    </p>

                    <p class="grisclaire">Passionné par les technologies liées au Web, je mets mes compétences au
                        service de vos besoins dans
                        divers
                        domaines.</p>
                </div>


                <div class="col-md-4 mb-3 mb-md-0 " data-aos="fade-left">

                    <h6 style="color: white;"> Mathieu CRÉVOULIN</h6></br>
                    <a class="grisclaire footertext" href="https://goo.gl/maps/XD9CrQDL9WXZWrWV6" style="margin-bottom: 0; text-decoration: none;"> <i class="bi bi-geo-alt"> 45, allée
                            des Grives 83390 Cuers </i></a></br>
                    <a href="https://api.whatsapp.com/send?phone=33651289271" class="grisclaire footertext" style="margin-bottom: 0; text-decoration: none;"> <i class="bi bi-whatsapp"></i> (+33)
                        6.15.42.10.45</a>
                    <p class="grisclaire footertext" style="margin-bottom: 0;"> <i class="bi bi-envelope-fill"></i>
                        contact@mcrevoulin.com </p>
                    <p class="grisclaire footertext" style="margin-bottom: 0;"><i class="bi bi-link"></i>
                        www.mathieu-crevoulin.com</p>
                </div>
            </div>

    </footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
        $(document).ready(function(){
        $('#contactForm').submit(function(e){
            e.preventDefault();
            const $this = $(this);

            // disable submit button
            const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');

            // send message
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                data: $this.serialize(),
                success: function(data){
                    alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
                     $this[0].reset(); // reset form
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert('An error occurred. Please try again')
                },
                complete: function(jqXHR, textStatus){
                    // enable submit button
                    $button.text('Submit').removeAttr('disabled');
                }
            })
        })
    });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="js/javascript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>

</html>

我想做同样的事情，这样在发送邮件后，就会出现一个提醒，就像我展示的例子一样（不加载页面或发送到一个新页面）。我试图创建一个带有提醒的新页面，但我希望它能像我展示的例子一样完成。我该怎么做？

twitter-bootstrap

1条答案

按热度按时间
66bbxpm5

66bbxpm51#

您可以使用 AJAX 来实现这一点。
contact.php文件

if(isset($_POST["send"])){

    $body = $_POST['message'];
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    

    $mail = new PHPMailer(true);
    
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'mymail@mail.com';
    $mail->Password = 'psw';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port = 465;      
    $mail->setFrom('mymail@mail.com');

    $mail->addAddress($_POST["email"]);

    $mail->isHTML(true);

    $mail->Subject = 'Projet web';
    $mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;

    $mail->send();

    // header("Location:  http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
    echo 'sent';
    exit;
}

index.php

<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
   <form id="contactForm" action="contact.php" method="POST">
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
           <input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
               aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
       </div>
       <!-- Email address input -->
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1">@</span>
           <input type="text" id="email" name="email" class="form-control" placeholder="Email"
               aria-label="email" aria-describedby="basic-addon1" required>
       </div>
       <div class="input-group mb-3">
           <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
           <input type="text" id="phone" name="phone" class="form-control" placeholder="Téléphone"
               aria-describedby="basic-addon2" required>
       </div>
       <!-- Message input -->
       <div class="mb-3">
           <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
               placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
       </div>
       <!-- Form submit button -->
       <div class="d-grid">
           <button class="btn btn-primary btn-lg" name="send" type="submit">Submit</button>
       </div>
   </form>
</div>

在结束body标记之前添加此标记。用于异步提交表单

<script>
    $(document).ready(function(){
        $('#contactForm').submit(function(e){
            e.preventDefault();
            const $this = $(this);

            // disable submit button
            const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');

            // send message
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                data: $this.serialize(),
                success: function(data){
                    alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
                     $this[0].reset(); // reset form
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert('An error occurred. Please try again')
                },
                complete: function(jqXHR, textStatus){
                    // enable submit button
                    $button.text('Submit').removeAttr('disabled');
                }
            })
        })
    })
</script>
赞(0）分享  回复(0）举报  2022-12-08
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com