如何用PHP打开引导模态? [英] How to open a bootstrap modal with PHP?

问题描述

我正在创建一个包含用于RSVP的PHP表单的婚礼网站.我充其量是新手.

I am creating a wedding website containing a PHP form for RSVPs. I am a novice at best.

我想做的是，一旦用户填写并提交了表单，网页要么将其带到成功/谢谢页面. (这部分正在工作).

What I am trying to do is, once a user fills out and submits the form, the web page either takes them to a success/thank-you page. (this part is working).

或者，如果未正确填写表格，则会显示一个引导程序模式，告诉他们他们做错了什么. (这是我遇到的麻烦).

Or if the form is not filled out correctly, it shows a bootstrap modal which tells them what they did wrong. (this is what I am having trouble with).

这是我的与模态部分有关的代码.

Here is my code that has to do with the modal part.

在我看来，当发生任何类型的错误时，我的PHP if语句应运行JavaScript.并且JavaScript应该打开一个显示错误的模式窗口.什么没有连接?

In my mind, my PHP if statement should run the JavaScript when there is any sort of error. And the JavaScript should open a modal window showing the errors. What is not connecting?

<?php
    if ($_POST["submit"]) {
      $result='<div class="alert alert-success">Form submitted</div>';

      if (!$_POST["name"]) {
        $error.="<br> Please enter the name on your invitation.";
      }
      if (!$_POST["head-count"]) {
        $error.="<br> Please enter the size of your party.";
      }
      if (!$_POST["reception-check"]) {
        $error.="<br> Please let us know if you will be attending the reception.";
      }
      if ($error) { ?>
        <script type="text/javascript"> $('#myModal').modal('show'); </script>
        <?php
      } else {
        if (mail("[e-mail]", "RSVP", "

        Name: ".$_POST['name']."

        Head Count: ".$_POST['head-count']."

        Reception Check: ".$_POST['reception-check']."

        Comments: ".$_POST['comments'])) {
          header("location: http://www.ourpeachwedding.com/pages/thankyou.php");
          exit();
        } else {
          $result='<div class="alert alert-danger"><strong>Sorry, there was an error submitting your rsvp, please try again.</strong>'.$error.'</div>';
        }
      }
    }

    ?>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
      <?php echo $result ?>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>
</div>

    <div id="rsvp">
      <div class="jumbotron">

        <?php echo $result; ?>

        <div class="container-fluid">
          <p class="text-center h1">RSVP</p>
          <p class="lead text-center">Even if you are not planning to attend, please RSVP anyway.</p>
          <div class="row">
            <div class=" col-md-6 col-md-offset-3">
              <form method="post">
                <div class="input-group">
                  <span class="input-group-addon">Name:</span>
                  <input name="name" type="text" class="form-control" placeholder="What was the name on the invitation?" value="<?php echo $_POST['name']; ?>">
                </div> <!--/.input-group-->
                <hr>
                <div class="input-group">
                  <span class="input-group-addon">Head Count:</span>
                  <input name="head-count" type="text" class="form-control" placeholder="How many in your party?" value="<?php echo $_POST['head-count']; ?>">
                </div> <!--/.input-group-->
                <hr>
                <div class="input-group">
                  <span class="input-group-addon">Reception?</span>
                  <input name="reception-check" type="text" class="form-control" placeholder="Will you be attending the reception?" value="<?php echo $_POST['reception-check']; ?>">
                </div> <!--/.input-group-->
                <hr>
                <div class="input-group">
                  <span class="input-group-addon">Comments:</span>
                  <textarea name="comments" type="text" class="form-control" placeholder="eg. gluten/food allergies, not attending, etc."><?php echo $_POST['comments']; ?></textarea>
                </div> <!--/.input-group-->
                <hr>
                <div class="text-center">
                  <input type="submit" name="submit" class="btn btn-success btn-large" value="Submit">
                </div> <!--/.text-center-->
              </form>
            </div> <!--/.col-->
          </div> <!--/.row-->
        </div> <!--/.container-fluid-->
      </div> <!--/.jumbotron-->
    </div> <!--/#rsvp-->

推荐答案

我认为，为此目的，是否在客户端进行验证不是很重要.您可以根据需要将其更改为客户端验证，但是所添加的脚本无法运行，因为它在加载必要的html元素之前就已在运行.为了确保它能继续运行，请将该行更改为

I think that for this purpose it's not very important whether validation is done client side or not. You can change it to client side validation if you wish, but the script you are adding isn't working because it's running before the necessary html elements are loaded. To ensure it runs after, change that line to

if ($error) { ?>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#myModal').modal('show');
        });
    </script>
    <?php
} else {
...

该脚本仅在出现错误时才添加，因此它将在加载时运行，但仅在提交并发现错误后重新加载页面时运行.

The script is added only when there is an error, so it will run when loaded but only when the page is reloaded after submission and errors were found.

这篇关于如何用PHP打开引导模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！