【问题标题】:SweetAlert + Form HTML + PHPSweetAlert + 表单 HTML + PHP
【发布时间】:2020-09-14 21:23:30
【问题描述】:

多年前我就这样做了,但现在,我不记得了,我不能让它工作......

所以,我有一个对另一个 file.php 进行操作的表单,用于发送电子邮件,我想发出一个甜蜜的警报来告诉人们,好的,您的消息已发送...

查看CONTACT.PHP中的代码

        <link href="sweet/style.css" type="text/css" rel="stylesheet">
    <link href="sweet/sweetalert.css" type="text/css" rel="stylesheet">
    <script src="sweet/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="sweet/sweetalert.min.js" type="text/javascript"></script>

    <script type='text/javascript'>
    $( document ).ready(function() {



        // Show image
        $("#but3").click(function(){
            var message = $("#message").val();
            var title = $("#title").val();
            if(message == "Welcome"){
                message  = "Welcome";
            }
            if(title == "Welcome"){
                title = "Welcome";
            }
            swal({
            title: title,
            text: message,
            imageUrl: "logo.png"
            });
        });

        // Timer
        $("#but4").click(function(){
            var message = $("#message").val();
            var title = $("#title").val();
            if(message == ""){
                message  = "Your message";
            }
            if(title == ""){
                title = "Your message";
            }
            message += "(close after 2 seconds)";
            swal({
                title: title,
                text: message,
                timer: 2000,
                showConfirmButton: false
            });
        });
    });
    </script>

    <!-- main-container -->
    <div class="container main-container">
        <div class="col-md-6">
            <form action="envia.php" name="envia" id="envia" method="post">
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-contact">
                            <input type="text" name="nome" id="nome" required>
                            <span>Nome</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-contact">
                            <input type="text" id="email" name="email" required>
                            <span>Email</span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="input-contact">
                            <input type="text" name="assunto" id="assunto" required>
                            <span>Assunto</span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="textarea-contact">
                            <textarea name="menssagem" id="mensagem" required></textarea>
                            <span>Mensagem</span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <input type="submit" name="enviar"  value="enviar" class="btn btn-box">
                    </div>
                </div>
            </form>

            <table>
              <tr><td> THIS SMALL FORM ITS JUST FOR SHOW SWEET ALERT </TD></TR>
                <tr>
                    <td>Title</td>
                    <td><input type='text' value='Title text' id='title'></td>
                </tr>
                <tr>
                    <td>Message</td>
                    <td><input type='text' value='Your message' id='message'></td>
                </tr>
                <tr>
                    <td colspan='2'>
                    <input type='button' value='Alert with image' id='but4'>&nbsp;
                    </td>
                </tr>
            </table>


        </div>

--

        <!-- main-container -->
        <div class="container main-container">
            <div class="col-md-6">
                <form action="envia.php" name="envia" id="envia" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-contact">
                                <input type="text" name="nome" id="nome" required>
                                <span>Nome</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-contact">
                                <input type="text" id="email" name="email" required>
                                <span>Email</span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="input-contact">
                                <input type="text" name="assunto" id="assunto" required>
                                <span>Assunto</span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="textarea-contact">
                                <textarea name="menssagem" id="mensagem" required></textarea>
                                <span>Mensagem</span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" name="enviar"  value="enviar" class="btn btn-box">
                        </div>
                    </div>
                </form>

                <table>
                  <tr><td> THIS SMALL FORM ITS JUST FOR SHOW SWEET ALERT </TD></TR>
                    <tr>
                        <td>Title</td>
                        <td><input type='text' value='Title text' id='title'></td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td><input type='text' value='Your message' id='message'></td>
                    </tr>
                    <tr>
                        <td colspan='2'>
                        <input type='button' value='Alert with image' id='but4'>&nbsp;
                        </td>
                    </tr>
                </table>


            </div>

文件 ENVIA.PHP

$nomeremetente = $_POST['nome'];
$emailremetente = trim($_POST['email']);
$emaildestinatario = 'info@mydomain.pt';// Digite seu e-mail aqui, lembrando que o e-mail deve estar em seu servidor web
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'];

/* Montando a mensagem a ser enviada no corpo do e-mail. */
$mensagemHTML = '
<strong>Formulário de Contato</strong>
<p><b>Nome:</b> '.$nomeremetente.' <p>
<b>E-Mail:</b> '.$emailremetente.' <p>
<b>Assunto:</b> '.$assunto.' <p>
<b>Mensagem:</b> '.$mensagem.'</p>
<hr>';

// O remetente deve ser um e-mail do seu domínio conforme determina a RFC 822.
// O return-path deve ser ser o mesmo e-mail do remetente.
$headers = "MIME-Version: 1.1\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: $emailremetente\r\n";
// remetente
$headers .= "Return-Path: $emaildestinatario \r\n";
// return-path
$envio = mail($emaildestinatario, $assunto, $mensagemHTML, $headers);
if($envio)
echo "<script>location.href='contact.php'</script>";// Página que será redirecionada

我尝试了很多方法,我只是重置了所有东西,现在我不知道该怎么办............

【问题讨论】:

    标签: php html sweetalert


    【解决方案1】:

    编辑到完整的代码修复

    contact.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" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Box personal portfolio Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="ionicons/css/ionicons.min.css" rel="stylesheet" />
        <link rel="icon" href="img/fav.png" type="image/x-icon" />
        <!-- main css -->
        <link href="css/style.css" rel="stylesheet" />
        <!-- Sweetalert -->
        <!-- <link href="sweet/style.css" type="text/css" rel="stylesheet" /> -->
        <link href="sweet/sweetalert.css" type="text/css" rel="stylesheet" />
        <script src="sweet/sweetalert.min.js" type="text/javascript"></script>
        <!-- modernizr -->
        <script src="js/modernizr.js"></script>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <!-- Preloader -->
        <div id="preloader">
          <div class="pre-container">
            <div class="spinner">
              <div class="double-bounce1"></div>
              <div class="double-bounce2"></div>
            </div>
          </div>
        </div>
        <!-- end Preloader -->
        <div class="container-fluid">
          <!-- box-header -->
          <header class="box-header">
            <div class="box-logo">
              <a href="index.html"
                ><img src="img/logo.png" width="80" alt="Logo"
              /></a>
            </div>
            <!-- box-nav -->
            <a class="box-primary-nav-trigger" href="#0">
              <span class="box-menu-text">Menu</span
              ><span class="box-menu-icon"></span>
            </a>
            <!-- box-primary-nav-trigger -->
          </header>
          <!-- end box-header -->
          <!-- nav -->
          <nav>
            <ul class="box-primary-nav">
              <li class="box-label">About me</li>
              <li><a href="index.html">Intro</a></li>
              <li><a href="about.html">About me</a></li>
              <li><a href="services.html">services</a></li>
              <li><a href="portfolio.html">portfolio</a></li>
              <li>
                <a href="contact.html">contact me</a>
                <i class="ion-ios-circle-filled color"></i>
              </li>
              <li class="box-label">Follow me</li>
              <li class="box-social">
                <a href="#0"><i class="ion-social-facebook"></i></a>
              </li>
              <li class="box-social">
                <a href="#0"><i class="ion-social-instagram-outline"></i></a>
              </li>
              <li class="box-social">
                <a href="#0"><i class="ion-social-twitter"></i></a>
              </li>
              <li class="box-social">
                <a href="#0"><i class="ion-social-dribbble"></i></a>
              </li>
            </ul>
          </nav>
          <!-- end nav -->
        </div>
        <!-- top bar -->
        <div class="top-bar">
          <h1>contact Me</h1>
          <p><a href="#">Home</a> / Contact Me</p>
        </div>
        <!-- end top bar -->
        <!-- main-container -->
        <div class="container main-container">
          <div class="col-md-6">
            <form name="envia" action="#" id="envia">
              <div class="row">
                <div class="col-md-6">
                  <div class="input-contact">
                    <input type="text" name="nome" id="nome" required />
                    <span>Nome</span>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="input-contact">
                    <input type="text" id="email" name="email" required />
                    <span>Email</span>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="input-contact">
                    <input type="text" name="assunto" id="assunto" required />
                    <span>Assunto</span>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="textarea-contact">
                    <textarea name="menssagem" id="mensagem" required></textarea>
                    <span>Mensagem</span>
                  </div>
                </div>
                <div class="col-md-12">
                  <input
                    id="submit"
                    type="submit"
                    name="enviar"
                    value="enviar"
                    class="btn btn-box"
                  />
                </div>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <h3 class="text-uppercase">Entre em contacto</h3>
            <h5>Pedidos orçamento e esclarecimento de dúvidas.</h5>
            <div class="h-30"></div>
            <p>
              <br />Poderá usar este formulário para esclarecimento de dúvidas ou
              pedido de orçamento, para pedidos de orçamento deverá indicar o mais
              claro possivel o que pretende.
            </p>
            <div class="contact-info">
              <p><i class="ion-android-call"></i>911729199</p>
              <p><i class="ion-ios-email"></i>info@obruno.pt</p>
            </div>
          </div>
        </div>
        <!-- end main-container -->
        <!-- footer -->
        <footer>
          <div class="container-fluid">
            <p class="copyright">© Box Portfolio 2016</p>
          </div>
        </footer>
        <!-- end footer -->
        <!-- back to top -->
        <a href="#0" class="cd-top"><i class="ion-android-arrow-up"></i></a>
        <!-- end back to top -->
        <!-- jQuery -->
        <script src="js/jquery-2.1.1.js"></script>
        <!--  plugins -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/menu.js"></script>
        <script src="js/animated-headline.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <!--  custom script -->
        <script src="js/custom.js"></script>
        <script>
          // This will prevent the default button action and the page won't refresh
          document.querySelector("#submit").addEventListener(
            "click",
            function (event) {
              process();
            },
            false
          );
          // This will make a post request to your php file
          function process() {
            // Getting the inputs
            var message = document.getElementById("mensagem").value;
            var email = document.getElementById("email").value;
            var subject = document.getElementById("assunto").value;
            var name = document.getElementById("nome").value;
            // Some data validation to see if the user have filled the required fields
            if (message && email && subject && name) {
              event.preventDefault();
              // Setting the AJAX request handler
              var xmlhttp = new XMLHttpRequest();
              // Waiting for a response
              xmlhttp.onreadystatechange = function () {
                // If the response is 200 aka "OK"
                if (this.readyState == 4 && this.status == 200) {
                  // Show your success alert here
                  swal({
                    title: "Message Sent!",
                    text: "Thank you for contacting us.",
                    timer: 2000,
                    showConfirmButton: false,
                  });
                  document.getElementById("envia").reset();
                  return;
                }
              };
              // Setting the request type and data to be sent
              xmlhttp.open("POST", "envia.php", true);
              xmlhttp.setRequestHeader(
                "Content-type",
                "application/x-www-form-urlencoded"
              );
              xmlhttp.send(
                "nome=" +
                  name +
                  "&email=" +
                  email +
                  "&assunto=" +
                  subject +
                  "&mensagem=" +
                  message
              );
            } else {
              // Alert the user to fill the required fields
              console.log("please fill all required fields");
              return;
            }
          }
        </script>
      </body>
    </html>
    

    envia.php

    <?php
    $nomeremetente     = $_POST['nome'];
    $emailremetente  = $_POST['email'];
    $emaildestinatario  = 'info@mydomain.pt';
    $assunto = $_POST['assunto'];
    $mensagem = $_POST['mensagem'];
    $content = '<strong>Formulário de Contato</strong><p><b>Nome:</b> ' . $nomeremetente . ' <p><b>E-Mail:</b> ' . $emailremetente . ' <p><b>Assunto:</b> ' . $assunto . ' <p><b>Mensagem:</b> ' . $mensagem . '</p><hr>';
    $headers = array(
        'From' => $emailremetente,
        'Reply-To' => $emaildestinatario,
        'MIME-Version' => '1.1',
        'Content-type' => 'text/html;charset=UTF-8',
        'X-Mailer' => 'PHP/' . phpversion()
    );
    if (isset($nomeremetente) && isset($emailremetente) && isset($emaildestinatario) && isset($assunto) && isset($mensagem) && isset($content)) {
        mail($emaildestinatario, $assunto, $content, $headers);
        echo "SUCCESS";
        http_response_code(200);
    } else {
        echo "FAILED";
        http_response_code(404);
    }
    

    请注意,我已经添加了甜蜜提醒,您可以继续自定义在电子邮件成功后显示的消息

    注意:不要忘记将您要接收电子邮件的电子邮件更改为您域中的电子邮件,否则这些电子邮件最终将无法发送或进入您的垃圾邮件

    【讨论】:

    • 但是如果我把我的
      放到
      我将如何调用发送电子邮件的文件?下一个问题,这行:'From' => 'sender@example.com', 'Reply-To' => 'reply@example.com',我这样写:'From' => '$email', ' Reply-To' => 'reply@mydomain.pt',最后,我把你发送的 ajax 代码放在哪里?
    • 你如何在这段代码中调用 javascript 来实现甜蜜警报?
    • 在这种情况下不需要表单操作,因为您将通过 AJAX 请求调用操作文件xmlhttp.open("POST", "email.php", true);
    • 'From' =&gt; 'sender@example.com''Reply-To' =&gt; 'reply@example.com', 是额外的标题信息,因此电子邮件不会进入垃圾邮件文件夹
    • AJAX 代码应该放在与表单相同的文件中,或者您可以从另一个 .js 文件中调用它已发送(PHP 文件将响应 200)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-16
    相关资源
    最近更新 更多