javascript - php发送脚本后引导模式在同一页面中打开-6ren

javascript - php发送脚本后引导模式在同一页面中打开

转载作者：行者123 更新时间：2023-11-28 03:56:47

关于联系表格的另一个问题。我尝试在通过 php 脚本发送 Bootstrap 模式后将其放在同一页面上。可悲的是我每次都失败了，现在我有点陷入困境。

我想要它做什么...单击提交按钮后，必须通过 php 脚本发送联系表单，然后在联系表单所在的页面上会弹出“ThankyouModal”。

这是 HTML:

<div class="container main-container">
    <div class="col-md-6">
        <form action="contact-page.php" method="post">
            <div class="row">
                <div class="col-md-12">
                    <div class="input-contact">
                        <input type="text" name="name">
                        <span>Naam</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="input-contact">
                        <input type="text" name="email">
                        <span>E-mailadres</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="textarea-contact">
                        <textarea name="message"></textarea>
                        <span>Bericht</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
                    <button type="submit" name="submit" class="btn btn-box">Verzenden</button>
                </div>
            </div>
        </form>
    </div>

这是 PHP 脚本:

<html>
    <head>  
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

        <!-- Main CSS -->
        <link rel="stylesheet" href="css/style.css">

        <!-- Js -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<?php 

if(isset($_POST['submit'])) {     
    // EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "test@test.com";

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $sender = $_POST['email'];

    $name = $_POST['name']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; //required


    $email_message = "Hieronder staan alle gegevens.\n\n";

    $email_subject = "Contact details - $name";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Naam: ".clean_string($name)."\n";
    $email_message .= "E-mailadres: ".clean_string($email)."\n";
    $email_message .= "Bericht: ".clean_string($message)."\n";


    // create email headers
    $headers = 'From:'.$sender."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $sent= @mail($email_to, $email_subject, $email_message, $headers); 

    if($sent){
        echo "<script>
            $(document).ready(function(){
            $('#thankyouModal').modal('show');
            });
            </script>";
    }
    else {
        echo "<script>
            alert('Sorry! Er is iets mis gegaan, probeer het opnieuw.')
            location.replace('contact.html')
            </script>";
    }
}
?>

    </head>
    <body>
        <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                    <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
                    </div>
                    <div class="modal-body text-center" style="background-color: #fff;">
                    <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
                    </div>
                    <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
                    <button type="button" class="btn btn-box" aria-label="Close"><a href="contact.html" style="color:fff;" data-dismiss="modal" onclick="javascript:window.location='contact.html'">Sluiten</a></button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </body>
</html>

我意识到所有字段都是荷兰语，但代码必须是通用的。也许如果有弹出窗口的解决方案，我还想知道如何为“失败”消息实现相同的弹出窗口。

提前谢谢大家!凯文

最佳答案

这应该可以解决问题:

form.html:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Contact Form</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
  <div class="container main-container">
    <div class="col-md-6">
      <form  id="contact-form">
        <div class="row">
          <div class="col-md-12">
            <div class="input-contact">
              <input type="text" name="name">
              <span>Naam</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="input-contact">
              <input type="text" name="email">
              <span>E-mailadres</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="textarea-contact">
              <textarea name="message"></textarea>
              <span>Bericht</span>
            </div>
          </div>
          <div class="col-md-12">
            <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
            <button type="submit" name="submit" class="btn btn-box">Verzenden</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
        </div>
        <div class="modal-body text-center" style="background-color: #fff;">
          <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
        </div>
        <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
          <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div id="fail-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Fail Modal</h4>
        </div>
        <div class="modal-body">
          <p>Something went wrong in the php script</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#contact-form").on("submit", function(event) {
        event.preventDefault();

        request = $.ajax({
          url: "process.php",
          type: "post",
          data: $(this).serialize(),
          dataType:"json"
        });

        // Callback handler that will be called on success
        request.done(function (response, textStatus){
          if (response == true ) {
            console.log('true');
            $('#thankyouModal').modal('show');
          } else {
            console.log('false');
            $('#fail-modal').modal('show');
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (textStatus, errorThrown){
          // Log the error to the console
          console.error(
            "The following error occurred: "+ textStatus, errorThrown
          );
        });
      });
    });
  </script>
</body>
</html>

process.php:-

<?php
header('Content-Type: application/json');

$sent = false;
if(isset($_POST['submit'])) {     
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "test@test.com";

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $sender = $_POST['email'];

    $name = $_POST['name']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; //required

    $email_message = "Hieronder staan alle gegevens.\n\n";

    $email_subject = "Contact details - $name";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Naam: ".clean_string($name)."\n";
    $email_message .= "E-mailadres: ".clean_string($email)."\n";
    $email_message .= "Bericht: ".clean_string($message)."\n";

    // create email headers
    $headers = 'From:'.$sender."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $sent= @mail($email_to, $email_subject, $email_message, $headers); 
}

die(json_encode($sent));

?>

要使成功模式出现，$sent 在 process.php 末尾必须为 true

我还没有测试过你的 php 脚本 - 这取决于你。可能有比我所做的更好的检查响应的方法，但这应该是很好和简单的，因为这是您第一次使用 ajax

关于javascript - php发送脚本后引导模式在同一页面中打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47498572/

文章推荐： javascript 扩展 src-script 被阻止

文章推荐： javascript - 在 Angular 中使用 ngFor 创建织物 Canvas

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - php发送脚本后引导模式在同一页面中打开