How to open a bootstrap modal with PHP?

Question

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.

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("dprb17@gmail.com", "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-->

Answer 1

I had the same problem and solved it: You had to echo the script because when you end the php code ?> and start it again <?php the code between the end and start will be ignored or always visable/enable. See the exemple below i think that will work!

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

Has to be

 if ($error) { 
   echo '<script type="text/javascript"> $("#myModal").modal("show")</script>';
 }

The ' in the script are replaced with " because a ' will ignore " so it just echo it

Some other things in your code: At the if ($error) or if (!$_Post[...]) It wont work because there is no requirement like $error = 1 or T$_Post[...] > "1" in this case the if will never run and here :

    if (mail("dprb17@gmail.com", "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();

There is no consequence

I think when this work it will be very nice! I hope this will work! Good Luck.... and check your code.

Answer 2

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.